视频插件 Dplayer
官网：中文
github: Dplayer
这个如果是按照普通的开发模式，本地开发的话，要引入一个css和js，js在github上有，而css没有，我找不到，最后在cdn库里面翻到一个，所以这里就提供一下吧！
<link rel="stylesheet" href="https://cdn.staticfile.org/dplayer/1.25.0/DPlayer.min.css">
<body>
<div id="dplayer"></div>
<script src="https://cdn.staticfile.org/dplayer/1.25.1/DPlayer.min.js"></script>
</body>一个css一个js
let dp = new DPlayer({
container: document.getElementById('dplayer'),
video: {
url: "视频连接地址.mp4",
},
});默认支持的格式不多，目前市面上常用的应该是m3u8格式，使用这个格式我们需要引入一个js文件库：hsl
<script src="https://cdn.staticfile.org/hls.js/8.0.0-beta.3/hls.min.js"></script>这个库要在DPlayer.min.js引入
然后我们就可以直接使用m3u8格式的文件了
let dp = new DPlayer({
container: document.getElementById('dplayer'),
video: {
url: "视频连接地址.m3u8",
},
});dplayer有一个常用的方法，就是切换视频：switchVideo
dp.switchVideo({
url: '切换的视频.m3u8'
});这样就可以做成切换集数的功能，然后浏览器现在都默认不能自动播放了，如果要播放，你需要有一个事件去触发，才会运行自动播放。
dp有一个自动播放的时候play()；如果我们在初始化视频后直接运行play是没有效果的，如果我们在事件函数里面使用，则有效果。
所以如果要切换下一集并且自动播放的话，可以这样写：
$("#next").on("click", function() {
dp.switchVideo({
url: '切换的视频.m3u8'
});
dp.play();
});dp还有一个非常不错的优点，就是容器的大小我们可以自由设置，但是里面的视频比例会根据容器大小自动调整，所以针对那些宽高比不同的视频，也是可以正常浏览的。不会被容器大小影响到视频画面比例。
更多内容就自行查看文档了，我只是了解一下。
分类：
JavaScript
标签：
Dplayer视频插件
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿站点。未经许可，禁止转载。
全部评论 1
小白s
Google Chrome Windows 10