视频插件 Dplayer

76 0

官网:中文
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还有一个非常不错的优点,就是容器的大小我们可以自由设置,但是里面的视频比例会根据容器大小自动调整,所以针对那些宽高比不同的视频,也是可以正常浏览的。不会被容器大小影响到视频画面比例。

更多内容就自行查看文档了,我只是了解一下。

0
  • 本文分类:JavaScript
  • 本文标签:Dplayer视频插件
  • 流行热度:已超过 76 人围观了本文
  • 发布日期:2020年05月8日 - 23时17分00秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿站点。未经许可,禁止转载。

评论(0)

微信收款码
微信收款码