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
  • JS禁止
  • 帝国cms7.5二次开发整合CKPlayer播放器教程

    教程说明将帝国cms7.5编辑器整合CKPlayer播放器,支持一个页面多个视频播放教程步骤1、下载ckplayer播放器,下载地址:http://www.ckplayer.com/down/ 2、解压后放置 /e/data/ckplayer/目录3、替换信息编辑器中的视频上传js控件,路径为:/e/admin/ecmseditor...

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

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

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

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

    wordpress教程 198 4年前
  • JS禁止复制+框选+F12+F5+debugr+右键等功能代码

    一整套常用的JS禁止用户操作代码,包含禁止用户复制、鼠标框选文本、禁止浏览器F12键、浏览器F5键、无限debugr、禁止鼠标右键等功能代码。对防止扒站、抄袭内容还是有一点作用,算是一种防护吧!写的很全,特意分享给网友们!//禁用右键 window.onconte...

    js教程 52 10个月前
  • js禁止微信QQ内置浏览器访问网站,防止域名红名

    我们可以使用JavaScript中的userAgent函数,来判断网站是否为QQ内置浏览器访问的方法,就可以轻松的防止域名被QQ微信红名提示。相比于写程序代码的方法,JS这种方法更简单,只需一段JS代码即可完成。判断是否为微信访问let is_weixin = (function () { l...

    js教程 77 11个月前
  • 利用JS插件识别抖音图片验证的几种方法

    经常刷网页版的抖音,但隔一段时间就会出现验证码,有滑块和文字点选。今天尝试开发一个自动完成验证的插件,但遇到了跨域图片不能直接获得base64数据的问题。准备插件工具:https://pan.baidu.com/s/1IiSvK8DuftEqeaXI9fZIyg?pwd=j1dm 提取码:j1dm工具使用...

    js教程 58 1年前
最新更新
  • js截取字符串教程

    slice()方法接受两个参数,起始索引和结束索引(可选)。它返回从起始索引到结束索引(不包括结束索引)之间的子字符...

    js教程 2个月前
  • find findIndex indexOf索引选择器使用方法

    find使用方法find方法是ES6引入的一种数组方法,可以用来查找数组中符合条件的元素。语法是:array.find(callba...

    js教程 3个月前
  • js复制网页内容教程

    Async Clipboard API方法HTML5新增的方法,无需引入第三方插件,直接就可以复制内容。低版本的浏览器可能会不兼...

    js教程 3个月前
  • js获取字符长度函数分享

    js获取字符长度函数function objLen(str) { if (str == null) return 0; if (typeof str != "string") { ...

    js教程 3个月前
  • 网站LED跑马灯效果广告代码

    网站可以看到很多的论坛网站都会用到这种网站LED跑马灯效果,这种效果实现也很简单,分享给大家。LED跑马灯效果...

    js教程 4个月前