更新于

视频插件 Dplayer

发布于 / 分类: JavaScript / 暂无评论 / 阅读量: 156

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

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

暂无评论

Info
站点信息

以前觉得活下去很难,现在发现活的好才难!

创建于20156

总共发表了261篇文章

共有393条评论

创建了21个分类目录

Archive
时间归档
Weather
天气

湿度
Catalog
目录树
设置
配色方案

布局

购买