1.DPlayer是一个开源的web视频播放器
- 支持倍速播放
- 支持切换清晰度
- 支持截图(封面图片，视频资源需开启跨域)
- 支持弹屏（封面图片，视频资源要开启跨域）
2.封装min.js和min.css
- 在github找到其源码，http://dplayer.js.org/#/zh-Hans/
- 本站提供cdn代码，下面分别是 css 和 js
<link href="https://cdn.5252.online/ajax/dplayer/dplayer.min.css" rel="stylesheet"><script src="https://cdn.5252.online/ajax/dplayer/dplayer.min.js"></script>3.首先使用原生js实现的视频播放，再使用DPlayer比较效果
4.简单使用DPlayer
<!DOCTYPE html>
<html>
<head>
<title>52的小窝提供dplayer测试代码</title>
</head>
<body>
<!-- 创建一个div -->
<div id="player1" ></div>
<!-- 引用css和js -->
<link href="https://cdn.5252.online/ajax/dplayer/dplayer.min.css" rel="stylesheet">
<script src="https://cdn.5252.online/ajax/dplayer/dplayer.min.js"></script>
<!-- 然后新建一个script，填写脚本 -->
<script>
var dp = new DPlayer({
element: document.getElementById('player1'),//player元素
autoplay: false,//自动播放
theme: '#FADFA3',//主题颜色
loop: true,// 循环播放
lang: 'zh-CN',//语言
hotkey: true,//绑定热键
preload: 'auto',//预加载的方式
screenshot: false,//视频截图，暂未实现，请往下看
video: {//视频信息
url: 'https://cdn.5252.online/video/mov_bbb.mp4',//视频网址
pic: 'https://cdn.5252.online/image/logo.jpg'//视频封面
},
});
</script>
</body>
</html>效果演示如下（自带有视频倍速功能）：
本篇完，还有疑问？留下评论吧
嗨，这是一条评论。
要开始审核、编辑及删除评论，请访问仪表盘的“评论”页面。
评论者头像来自Gravatar。