DPlayer使用笔记
DPlayer使用笔记
- DPlayer使用笔记
- 准备工作
- 基本使用
- 播放器切换(HLS/FLV)
- 新增一个切换播放器按钮
- 给对应的按钮添加CSS样式
- 绑定切换事件
- 手机端点击播放后不自动隐藏工具条
DPlayer使用笔记
DPlayer是一个非常好用的播放器,支持HLS、FLV等播放方式。还支持弹幕,清晰度切换,是一款常用的播放神器。
准备工作
若使用Flash播放器,请先导入flv.js
flv.min.js下载地址
<script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.5.0/flv.js"></script>
若使用H5播放器,请先导入hls.js。
hls.min.js下载地址
<script src="https://cdn.bootcdn.net/ajax/libs/hls.js/8.0.0-beta.3/hls.js"></script>
至少保证引用一种播放器之后,再导入DPlayer.js
<script src="https://cdn.bootcdn.net/ajax/libs/dplayer/1.25.1/DPlayer.min.js"></script>
DPlayer中文文档地址
基本使用
/*** 加载直播播放器* @param {Object} URL*/function LoadPlayer(URL) {const dp = new DPlayer({container: document.getElementById('player-con-h5'),live: true, //是否直播//hotkey: true, //热键开启screenshot: true, //截图开启autoplay: true, //自动播放开启mutex: true, // 多个视频互斥volume: 0.7, // 音量playbackSpeed:[0.5, 1, 1.5, 2],video: {url: URL,}});}
以上我们就创建了一个简单的方法,只需要代入视频播放地址就可以愉快的播放视频了。以下我以直播为例,如需点播,仅需要把live属性改为false即可。
播放器切换(HLS/FLV)
DPlayer修改版,支持播放器切换的DPlayer.min.js下载
先上效果图,原本想做成和切换清晰度的按钮效果一样的。由于源码的css样式太难写了,就只做成了按钮,点击切换。
新增一个切换播放器按钮
先把DPlayer.js进行美化并且格式化,我们就得到了一份格式化好的DPlayerJS源码,接下来找到在源码里搜索class标签为dplayer-icons dplayer-icons-right,找到负责加载工具条右侧的代码。
然后我们加入这行代码。
<div class="dplayer-quality"><button class="dplayer-icon dplayer-type-icon" id="playerType-button" onClick="PlayerTypeChange()">切换为', t += l(i.playerType), t += '播放器</button></div>
playerType是自定义属性,是负责提示切换的播放器是什么的属性。例如H5、Flash。
给对应的按钮添加CSS样式
此处的样式是“抄袭”的切换清晰度按钮的样式。
切换清晰度按钮class为dplayer-quality-icon
切换播放模式按钮class为dplayer-type-icon
.dplayer-controller .dplayer-icons .dplayer-icon.dplayer-type-icon{color:#fff;width:auto;line-height:22px;font-size:14px}
此时你会发现我们添加的按钮不起作用,是因为没有对应的css样式。复制下面的css到DPlayer加载css的地方。我们这次搜索关键字:
{color:#fff;width:auto;line-height:22px;font-size:14px}
可以找到切换清晰度样式的css代码,然后将dplayer-type-icon的css代码追加到这行样式的后面,注意不是行末尾,是该样式的后面。
绑定切换事件
当你到这一步的时候就已经基本完成DPlayer源码的修改了。在前面添加按钮的时候,我提前绑定了PlayerTypeChange事件,接下来可以按照自己的需求写内容了。
此处的playerType是js全局变量,用于赋值DPlayer的自定义属性,这样就可以完成提示信息的切换。
function PlayerTypeChange(){if(playerType == "HLS"){console.log("播放器变更FLV");playerType = "FLV";$("#playerType-button").html("切换H5播放器");}else if(playerType == "FLV"){console.log("播放器变更HLS");playerType = "HLS";$("#playerType-button").html("切换FLV播放器");}clock(); //获取对应的HLS地址,或者获取FLV地址}
手机端点击播放后不自动隐藏工具条
我们可以监听DPlayer的playing事件来做到,可以配合setTimeout延迟隐藏工具条,提升用户体验。
dp.on('playing', function () {//间隔两秒则自动隐藏setTimeout(function(){ //为播放器添加隐藏工具条样式document.getElementById("player-con-h5").classList.add("dplayer-hide-controller");}, 2000);});
DPlayer使用笔记相关推荐
- 【读书笔记】知易行难,多实践
前言: 其实,我不喜欢看书,只是喜欢找答案,想通过专业的解答来解决我生活的困惑.所以,我听了很多书,也看了很多书,但看完书,没有很多的实践,导致我并不很深入在很多时候. 分享读书笔记: <高效1 ...
- 【运维学习笔记】生命不息,搞事开始。。。
001生命不息,搞事不止!!! 这段时间和hexesdesu搞了很多事情! 之前是机械硬盘和固态硬盘的测速,我就在那默默的看着他一个硬盘一个机械测来测去. 坐在他后面,每天都能看到这位萌萌的小男孩,各 ...
- SSAN 关系抽取 论文笔记
20210621 https://zhuanlan.zhihu.com/p/353183322 [KG笔记]八.文档级(Document Level)关系抽取任务 共指id嵌入一样 但是实体嵌入的时候 ...
- pandas以前笔记
# -*- coding: utf-8 -*- """ Created on Sat Jul 21 20:06:20 2018@author: heimi "& ...
- PyTorch 学习笔记(六):PyTorch hook 和关于 PyTorch backward 过程的理解 call
您的位置 首页 PyTorch 学习笔记系列 PyTorch 学习笔记(六):PyTorch hook 和关于 PyTorch backward 过程的理解 发布: 2017年8月4日 7,195阅读 ...
- 容器云原生DevOps学习笔记——第三期:从零搭建CI/CD系统标准化交付流程
暑期实习期间,所在的技术中台-效能研发团队规划设计并结合公司开源协同实现符合DevOps理念的研发工具平台,实现研发过程自动化.标准化: 实习期间对DevOps的理解一直懵懵懂懂,最近观看了阿里专家带 ...
- 容器云原生DevOps学习笔记——第二期:如何快速高质量的应用容器化迁移
暑期实习期间,所在的技术中台-效能研发团队规划设计并结合公司开源协同实现符合DevOps理念的研发工具平台,实现研发过程自动化.标准化: 实习期间对DevOps的理解一直懵懵懂懂,最近观看了阿里专家带 ...
- 王道考研 计算机网络笔记 第六章:应用层
本文基于2019 王道考研 计算机网络: 2019 王道考研 计算机网络 个人笔记总结 第一章:王道考研 计算机网络笔记 第一章:概述&计算机网络体系结构 第二章:王道考研 计算机网络笔记 第 ...
- 王道考研 计算机网络笔记 第五章:传输层
本文基于2019 王道考研 计算机网络: 2019 王道考研 计算机网络 个人笔记总结 第一章:王道考研 计算机网络笔记 第一章:概述&计算机网络体系结构 第二章:王道考研 计算机网络笔记 第 ...
最新文章
- The file “Info.plist” couldn’t be opened because there is no such file
- 玩转SCVMM中的更新基线,实现虚拟平台基础服务器补丁自动更新
- 开发工具:收集12 个顶级 Bug 跟踪工具,值得收藏!
- CMake编译protobuf
- MySQL备份之mysqlhotcopy与注意事项
- BGP通告路由的方法以及BGP静态路由下放
- JavaScript高级编程II
- opencv 二值化图像 像素统计 countNonZero
- matlab模拟高斯光束波前相位分布,拉盖尔-高斯光束空间传播波前畸变的RMS评估...
- Kindle Paperwhite2测评剧本.
- 使用 DiskMaker X 轻松制作 Yosemite 安装 U 盘(引)
- 圣诞礼物|2020年送这些礼物你就能拥有一个程序员男朋友
- iOS 微信支付开发流程
- 纪中暑假培训 :Date:7 终章-剑之魂
- win10 tensorrtx yolov5使用方法
- 【Android 电量优化】电量优化 ( 唤醒锁定 | 使用 WeakLock 保持服务唤醒 | 屏幕唤醒 )
- 完美解决surface pro6 CPU降频导致性能下降的问题
- Fitbit被谷歌21亿美元收购 品牌启用英文域名Fitbit.com
- ERP流程之父谈ERP软件未来
- 邮箱满了,但是Web邮箱又登陆不上怎么办?
热门文章
- PO BO VO DTO POJO DAO DO 在java中的概念
- 【分享】java开发框架低代码平台介绍
- 了解计算机技术的课件,认识计算机第一信息技术PPT课件.ppt
- 高通将发布新款智能手表处理器,或与Apple Watch正面肉搏
- P2382 化学分子式
- 26款优秀的Android逆向工程工具
- 利用 Python 爬取了 13966 条运维招聘信息,我得出了哪些结论?
- “十步一杀”职场减压大法
- linux中打开pdf文件_在Linux中减少PDF文件大小
- C++抽象编程——接口(6)——设置随机数种子