本方法适用于版本x,而官网最新已迭代到x3版本。
查阅官方文档,并没有找到添加下载按钮的方法,而且播放器版本比较旧,文档方法可能已不适用。
那就只能自己动手修改播放器JS了,修改过程如下:
1、定义“是否显示下载按钮”
![《给ckplayer播放器添加下载按钮》](https://www.xueyidian.cn/wp-content/uploads/2024/01/2024011106233335.png)
2、定义按钮文本和提示文本
![《给ckplayer播放器添加下载按钮》](https://www.xueyidian.cn/wp-content/uploads/2024/01/2024011106242311.png)
3、构建下载按钮容器
![《给ckplayer播放器添加下载按钮》](https://www.xueyidian.cn/wp-content/uploads/2024/01/2024011106242845.png)
![《给ckplayer播放器添加下载按钮》](https://www.xueyidian.cn/wp-content/uploads/2024/01/2024011106243578.png)
![《给ckplayer播放器添加下载按钮》](https://www.xueyidian.cn/wp-content/uploads/2024/01/2024011106243995.png)
![《给ckplayer播放器添加下载按钮》](https://www.xueyidian.cn/wp-content/uploads/2024/01/2024011106244444.png)
![《给ckplayer播放器添加下载按钮》](https://www.xueyidian.cn/wp-content/uploads/2024/01/2024011106244948.png)
![《给ckplayer播放器添加下载按钮》](https://www.xueyidian.cn/wp-content/uploads/2024/01/2024011106245430.png)
4、定义按钮样式
![《给ckplayer播放器添加下载按钮》](https://www.xueyidian.cn/wp-content/uploads/2024/01/2024011106245924.png)
5、定义下载按钮点击事件,这里用a元素模拟点击链接来触发浏览器下载
![《给ckplayer播放器添加下载按钮》](https://www.xueyidian.cn/wp-content/uploads/2024/01/2024011106250421.png)
![《给ckplayer播放器添加下载按钮》](https://www.xueyidian.cn/wp-content/uploads/2024/01/2024011106250948.png)
6、给视频初始化时加上download: true,增加参数:download: true
![《给ckplayer播放器添加下载按钮》](https://www.xueyidian.cn/wp-content/uploads/2024/01/2024011106253149-614x580.png)
最终效果:
![《给ckplayer播放器添加下载按钮》](https://www.xueyidian.cn/wp-content/uploads/2024/01/2024011106254885-797x580.png)
本方法适用于版本x,而官网最新已迭代到x3版本。
查阅官方文档,并没有找到添加下载按钮的方法,而且播放器版本比较旧,文档方法可能已不适用。
那就只能自己动手修改播放器JS了,修改过程如下:
1、定义“是否显示下载按钮”
2、定义按钮文本和提示文本
3、构建下载按钮容器
4、定义按钮样式
5、定义下载按钮点击事件,这里用a元素模拟点击链接来触发浏览器下载
6、给视频初始化时加上download: true,增加参数:download: true
最终效果: