Dplayer Html5 弹幕视频播放器的实现

本弹幕视频,通过  Html5  Dplayer实现。

Dplayer官网:http://dplayer.js.org/#/

Dplayer文档:http://dplayer.js.org/#/zh-Hans/

Dplayer GitHub:https://github.com/MoePlayer/DPlayer

先看效果图

 Dplayer Html5 弹幕视频播放器的实现_第1张图片

Dplayer Html5 弹幕视频播放器的实现_第2张图片 

 一、下载Dplayer相关文件

就是Dplayer GitHub下载。。。

二、前台页面

html页面中引用下载完的Dplayer中的css和js


这个是我自己的css样式,可以参考改一下,让视频精简一点。


Html代码:

没错,就这么少

三、Dplayer初始化

       这就是Dplayer的初始化过程,用的是官网提供的api接口,可以直接实现弹幕功能,但是是大家公用的一个api接口。。。

       所以,大家也可以自己搭建弹幕接口,详情参照官网的文档,我比较懒,就没有自己搭建-。-(其实是windows搭建还需要下载一些东西,嫌麻烦QAQ)。

四、全部代码



    

        播放器很强大,还有很多其他的功能,可以看看官方文档。蛋疼的一点就是他这官网太不稳定了-。-。。。

        其实我还实现了视频记忆的功能,从数据库中读取播放时间,下次观看直接指定时间播放,类似网课智慧树,超星,之类的。。。今天就先到这吧,有什么不懂的地方,可以问我。

Dplayer官网:http://dplayer.js.org/#/

Dplayer文档:http://dplayer.js.org/#/zh-Hans/

Dplayer GitHub:https://github.com/MoePlayer/DPlayer

 

你可能感兴趣的:(前端)