您的位置: 首页 >日志>前端技术>详细内容

前端技术

如何给ckplayer播放器添加下载按钮

来源:本站原创 发布时间:2023-12-26 17:37:14 浏览次数: 【字体:

WebFuture系统前台使用的是ckplayer视频播放器,版本是x,而官网最新已迭代到x3版本。

查阅官方文档,并没有找到添加下载按钮的方法,而且播放器版本比较旧,文档方法可能已不适用。

那就只能自己动手修改播放器JS了,修改过程如下:

1、定义“是否显示下载按钮”

微信截图_20231227151120

2、定义按钮文本和提示文本

微信截图_20231227151128

3、构建下载按钮容器

企业微信截图_20231227151656

企业微信截图_20231227151710

企业微信截图_20231227151719

企业微信截图_20231227151735

企业微信截图_20231227152327

企业微信截图_20231227152501

4、定义按钮样式

企业微信截图_20231227152310

5、定义下载按钮点击事件,这里用a元素模拟点击链接来触发浏览器下载

企业微信截图_20231227152557

企业微信截图_20231227152607

6、给视频初始化时加上download: true,找到 wwwroot\content\_common\base\js\power.videoreversion.js ,第357行增加:download: true

企业微信截图_1703213392308

最终效果:

企业微信截图_20231227153001

修改后的ckplayer.js 下载

202312271533360502.zip

×

用户登录