js教程

ckplayer修改播放器语言,修改为英语示例

精准像素 2022-09-06 人阅读

CKPlayer在应用到外贸网站的时候,需要把播放器上面的按钮文字同样修改成其他国家语言,修改方法非常简单,精准像素刚好做到这个案列,方法分享给大家。

语言包配置方法

默认的ckplayer加载安装代码如下:

<link type="text/css" rel="stylesheet" href="ckplayer/css/ckplayer.css" />
<script type="text/javascript" src="ckplayer/js/ckplayer.js" charset="UTF-8"></script>
<div class="video" style="width: 600px;height: 400px;">播放器容器</div>
<script type="text/javascript">
    .....
</script>

我们只需要再加载一条语言JS库即可,如下:

<script type="text/javascript" charset="utf-8" src="ckplayer/language/en.js"></script>

完整代码:

<link type="text/css" rel="stylesheet" href="ckplayer/css/ckplayer.css" />
<script type="text/javascript" src="ckplayer/js/ckplayer.js" charset="UTF-8"></script>
<script type="text/javascript" charset="utf-8" src="ckplayer/language/en.js"></script>
<div class="video" style="width: 600px;height: 400px;">播放器容器</div>
<script type="text/javascript">
    //定义一个变量:videoObject,用来做为视频初始化配置
    var videoObject = {
        container: '.video', //“#”代表容器的ID,“.”或“”代表容器的class
        video: 'http://ckplayer-video.oss-cn-shanghai.aliyuncs.com/sample-mp4/05cacb4e02f9d9e.mp4'//视频地址
    };
    var player = new ckplayer(videoObject);//初始化播放器
</script>

修改语言方法

打开/ckplayer/language,新建一个JS文件,如:jp.js,去翻译工具翻译一下,保存。

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  typeof define === 'function' && define.amd ? define(factory) :
  (global = global || self, global.ckplayerLanguage = factory());
}(this, function () { 'use strict';
/*
* 功能:包含播放器用到的全部相关语言文字
*/
var language={
play:'播放',
pause:'暂停',
refresh:'重播',
full:'全屏',
exitFull:'退出全屏',
webFull:'页面全屏',
exitWebFull:'退出页面全屏',
theatre:'剧场模式',
exitTheatre:'退出剧场模式',
volume:'音量:',
muted:'静音',
exitmuted:'恢复音量',
seek:'seek:',
waiting:'缓冲',
live:'直播中',
backLive:'返回直播',
lookBack:'回看:',
next:'下一集',
screenshot:'视频截图',
smallwindows:'小窗口播放功能',
playbackrate:'倍速',
playbackrateSuffix:'倍',
track:'字幕',
noTrack:'无字幕',
definition:'清晰度',
switchTo:'切换成:',
closeTime:'{seconds}秒后可关闭广告',
closeAd:'关闭广告',
second:'秒',
details:'查看详情',
copy:'复制',
copySucceeded:'复制成功,可贴粘!',
smallwindowsOpen:'小窗口功能已开启',
smallwindowsClose:'小窗口功能已关闭',
screenshotStart:'截图中,请稍候...',
screenshotClose:'截图功能已关闭',
loopOpen:'循环播放',
loopClose:'已关闭循环播放',
close:'关闭',
down:'下载',
p50:'50%',
p75:'75%',
p100:'100%',
timeScheduleAdjust:{
prohibit:'视频禁止拖动',
prohibitBackOff:'视频禁止重复观看',
prohibitForward:'视频禁止快进',
prohibitLookBack:'视频禁止播放部分内容',
prohibitForwardNotViewed:'视频禁止播放未观看的部分'
},
error:{
noMessage:'未知错误',
supportVideoError:'该浏览器版本太低,建议更换成其它浏览器',
videoTypeError:'该浏览器不支持播放该视频,建议更换成其它浏览器',
loadingFailed:'加载失败',
emptied:'视频文件加载过程中出现错误',
screenshot:'视频截图失败',
ajax:'Ajax数据请求错误',
noVideoContainer:'未找到放置视频的容器'
}
};
return language;
}))
相关推荐
  • CKPlayer
  • 帝国cms7.5二次开发整合CKPlayer播放器教程

    帝国cms7.5整合CKPlayer播放器教程说明将帝国cms7.5编辑器整合CKPlayer播放器,支持一个页面多个视频播放帝国cms7.5整合CKPlayer播放器教程步骤1、下载ckplayer播放器,下载地址:http://www.ckplayer.com/down/ 2、解压后放置 /e/data/ckplayer/目录3、...

    帝国cms教程 386 3年前
  • ckplayer视频播放器织梦插件 v1.9
    ckplayer视频播放器织梦插件 v1.9

    插件前台效果插件主要功能1、网页在线播放flv、f4v、MP4等格式的视频,兼容手机端html5视频播放功能2、播放器的皮肤风格可随意更换,本站还提供了大量的ckplayer风格,logo以及左上角水印图片等等都可...

    织梦cms插件 633 3年前
  • WordPress集成ckplayer播放器教程

    WordPress免插件集成ckplayer播放器,首先在ckplayer官网下载资源包,将ckplayer文件夹放入所使用主题里(确保wp-content/themes/motheme/ckplayer/ckplayer.js存在),然后添加代码如下:在主题的functions.php添加以下代码function MBThemes_ckplayer_scripts...

    wordpress教程 149 3年前