优化dplayer播放器倍速播放按钮和循环播放按钮然后在vue2中使用dplayer
k3u1fbpfcp/5c6ef81a08394bf59bf46c9d43396435~tplv-k3u1fbpfcp-watermark.image)
dplayer源码
- 下载dplayer源码 github.com/DIYgod/DPla…
- 安装依赖后直接运行该项目代码
- 主要目录文件
- template 中主要包含有两个文件
- video.art 为播放器的模板
- player.art 为播放器的控制栏模板文件 - 主要修改这部分内容
- 在js文件中 主要是player.js 定义DPlayer类 其余文件负责实现功能的
- template.js 定义操作dom对象、需要添加或修改控制按钮 是修改这个文件 -主要也是修改播放器控制按钮栏
- options.js 初始化配置项文件
- i18n.js 国际化 修改一些文案的时候可以在这里调整
- setting.js 定义了设置按钮中的几个操作方法
- events 定义播放器的事件
- css 使用 scss编写 文件结构也比较清晰
修改
- 修改文案 在 i18n 中修改 速度为播放速度 洗脑播放 修改为 循环播放
- 以下简单的修改了 播放速度与洗脑循环按钮
- 将以下修改打包到 dist 下，然后将打包文件替换掉 dplayer-vue 中的 dplayer 文件下的 dist 就可以实现自定义 dplayer 并在 vue2 中使用
- 在 player.art 中修改如下 dplayer-speed 添加样式到 controller.scss 中
// controller.scss 添加
// 修改播放速度的按钮为当前设置的播放速度样式
.dplayer-speed {
color: #eee;
font-size: 13px;
line-height: 20px;
float: right;
display: inline-block;
vertical-align: middle;
white-space: nowrap;
}
// 当前播放速度样式设置
.active-speed{
background-color: rgba(0,255,0,0.6);
&:hover {
background-color: rgba(0,255,0,0.6);
}
}
// player.art修改
<div class="dplayer-setting-item dplayer-setting-speed" >
<span class="dplayer-label">{{ tran('Speed') }} {{ setting }}</span>
<div class="dplayer-speed">1</div>
</div>
// template中添加DOM操作节点
this.speed.speedNode = this.speed.querySelector('.dplayer-speed');
// 在setting中 操作节点设置所选的播放速度 并添加active-speed样式作为选中状态样式
this.player.template.speedItem[this.lastIndex].className = 'dplayer-setting-speed-item';
this.player.template.speedItem[i].className = 'dplayer-setting-speed-item active-speed';
this.lastIndex = i;
this.player.speed(this.player.template.speedItem[i].dataset.speed);
this.player.template.speed.speedNode.innerHTML = this.player.template.speedItem[i].dataset.speed;
git
vue中使用dplayer
- 使用npm i dplayer 安装dplayer播放器 - 安装之后会发现 在node_modules中打开dplayer文件夹 使用的是dplayer的打包文件
- 可以直接拷贝 dist 目录中的js文件到自己的组件库中使用 - 如果你想要修改dplayer的话
- 使用this.db 调用dplayer提供的所有事件
- 你也可以直接使用vue-dplayer 如果你想要修改dplayer的话 建议可以尝试直接将dplayer导入到自己的项目中使用
