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

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

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

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

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

先看效果图

一、下载Dplayer相关文件

就是Dplayer GitHub下载。。。

二、前台页面

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

<link rel="stylesheet" href="__PUBLIC__/assets/css/DPlayer.min.css">
<script src="__PUBLIC__/assets/js/DPlayer.min.js"></script>

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


<style>.basicinfo {margin: 15px 0;}.basicinfo .row > .col-xs-4 {padding-right: 0;}.basicinfo .row > div {margin: 5px 0;}.Dplayer_box{overflow:hidden;width:100%;height:100%;margin-bottom: 3%}#player1{background-size:100% 100%;}.player_av{width:100%;height:100%;float:left;background:#000}.Dplayer_danmu{width:299px;float:right;height:100%}.Dplayer_watching{width:100%;height:60px;line-height:60px;display:inline-block;font-size:12px;color:#99a2aa;box-shadow:#ddd 0 0 5px}.Dplayer-watching-number{margin-left:20px;font-size:18px;font-weight:700;color:#222;padding:0}.Dplayer_list{width:100%;height:30px;overflow:hidden}.Dplayer_list li{width:60px;height:30px;float:left;color:#99a2aa;font-size:12px;text-align:center;line-height:30px}.Dplayer_list li:nth-child(1){width:58px!important}.Dplayer_list li:nth-child(2){width:136px!important}.list_ovefiow{width:100%;height:363px;overflow:auto}.danmuku_list{width:100%;height:20px;line-height:20px;text-align:left;color:#99a2aa;font-size:12px;display:block;margin:auto;overflow:auto;margin-top:5px}.danmuku_list li{float:left;width:60px;height:20px;white-space:nowrap;cursor:pointer}.danmuku_list li:nth-child(1){width:58px;margin-left:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.danmuku_list li:nth-child(2){width:125px;margin-right:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.danmuku_list li:nth-child(2):hover{color:#00a1d6}.danmuku_list li:nth-child(3){margin-left:5px}label{display: inline;}
</style>

Html代码：

<div class="Dplayer_box"><div class="player_av"><div id="player1"></div></div>
</div>

没错，就这么少

三、Dplayer初始化

<script>var url = "__CDN__{$fullurl}";  //视频路径var urlId = "{$fullurl|md5}22";  //弹幕库ID，我用url当作ID，同时md5加密，避免和其它弹幕库ID重复//创建DPlayer对象var dp = new DPlayer({element: document.getElementById('player1'),video: {url: url   //视频的路径},danmaku: {     //弹幕功能，不需要可以删除id: urlId,     //弹幕库的ID，每个视频的弹幕库不能一样，可以把url作为idapi: 'https://api.prprpr.me/dplayer/'  //这个是官网写好的弹幕接口，可以直接使用，就是不太稳定}});
</script>

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

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

四、全部代码

<style>.basicinfo {margin: 15px 0;}.basicinfo .row > .col-xs-4 {padding-right: 0;}.basicinfo .row > div {margin: 5px 0;}.Dplayer_box{overflow:hidden;width:100%;height:100%;margin-bottom: 3%}#player1{background-size:100% 100%;}.player_av{width:100%;height:100%;float:left;background:#000}.Dplayer_danmu{width:299px;float:right;height:100%}.Dplayer_watching{width:100%;height:60px;line-height:60px;display:inline-block;font-size:12px;color:#99a2aa;box-shadow:#ddd 0 0 5px}.Dplayer-watching-number{margin-left:20px;font-size:18px;font-weight:700;color:#222;padding:0}.Dplayer_list{width:100%;height:30px;overflow:hidden}.Dplayer_list li{width:60px;height:30px;float:left;color:#99a2aa;font-size:12px;text-align:center;line-height:30px}.Dplayer_list li:nth-child(1){width:58px!important}.Dplayer_list li:nth-child(2){width:136px!important}.list_ovefiow{width:100%;height:363px;overflow:auto}.danmuku_list{width:100%;height:20px;line-height:20px;text-align:left;color:#99a2aa;font-size:12px;display:block;margin:auto;overflow:auto;margin-top:5px}.danmuku_list li{float:left;width:60px;height:20px;white-space:nowrap;cursor:pointer}.danmuku_list li:nth-child(1){width:58px;margin-left:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.danmuku_list li:nth-child(2){width:125px;margin-right:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.danmuku_list li:nth-child(2):hover{color:#00a1d6}.danmuku_list li:nth-child(3){margin-left:5px}label{display: inline;}
</style>
<link rel="stylesheet" href="__PUBLIC__/assets/css/DPlayer.min.css"><div class="Dplayer_box"><div class="player_av"><div id="player1"></div></div></div>
<script src="__PUBLIC__/assets/js/DPlayer.min.js"></script>
<script>var url = "__CDN__{$fullurl}";  //视频路径var urlId = "{$fullurl|md5}22";  //弹幕库ID，我用url当作ID，同时md5加密，避免和其它弹幕库ID重复//创建DPlayer对象var dp = new DPlayer({element: document.getElementById('player1'),video: {url: url   //视频的路径},danmaku: {     //弹幕功能，不需要可以删除id: urlId,     //弹幕库的ID，每个视频的弹幕库不能一样，可以把url作为idapi: 'https://api.prprpr.me/dplayer/'  //这个是官网写好的弹幕接口，可以直接使用，就是不太稳定}});
</script>

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

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

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

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

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

Dplayer Html5 弹幕视频播放器的实现相关推荐

web player html5源码,GitHub - WEBHH/DanmuPlayer: Html5弹幕视频播放器插件
DanmuPlayer ##Html5弹幕视频播放器插件 Danmmu Player是一个具备弹幕功能的Html5视频播放器. 具备弹幕视频播放,接受用户发送彩色弹幕,实时调解弹幕显示效果等功能. D ...
html5播放器插件手机版,Html5弹幕视频播放器插件
插件描述:Danmmu Player是一个具备弹幕功能的Html5视频播放器. 具备弹幕视频播放,接受用户发送彩色弹幕,实时调解弹幕显示效果等功能. Danmmu Player意在使开发者能便捷的在网 ...
Html5弹幕视频播放器插件Danmu介绍
原文地址:http://www.jq22.com/jquery-info2611 插件描述:Danmu Player是一个具备弹幕功能的Html5视频播放器. 具备弹幕视频播放,接受用户发送彩色弹幕, ...
html网页播放器fl,Html5弹幕视频播放器插件
如何使用 Danmmu Player需要依赖jQuery,因此首先需要加入相关css和js文件. 接下来,在body中需要放置播放器的位置加入如下代码: 最后,关键的部分,配置参数,调用插件. $(& ...
html弹幕播放器源码,高性能HTML5弹幕播放器 Moe2_player
软件介绍 Moe2_player是一款高性能HTML5弹幕播放器. 特点:完全基于html5,移动设备友好,(iphone需要添加到桌面作为webapp方可观看弹幕) 性能强大,在多倍于B站最大弹幕覆 ...
HTML5 自定义视频播放器
HTML5 自定义视频播放器第一步:获取播放器第二步:实现播放与暂停第三步:实现全屏操作第四步:实现播放的逻辑第五步:实现播放过程的逻辑第六步:实现视频的跳播第七步:播放完毕后重置播放器 ...
WordPress插件 Fox Video Player 独家HTML5广告视频播放器插件[更新至v3.0.1]
Fox Video Player 是一款独家HTML5广告视频播放器WordPress插件,方便把你的网站转换成一个多媒体站点,尤其独特的视频插入广告像优酷这样的在视频播放前播放广告,当然你也可以设置 ...
米云影视html5播放器,网页制作HTML5自定义视频播放器源码
video对象兼容性写法您的浏览器不支持,请升级您的浏览器 video 标签 width height autoplay muted poster带有预览图(海报图片)的视频播放器选中video ...
html5实现视频播放器弹幕效果,基于HTML5的有弹幕功能的视频播放器
如何使用 Danmmu Player需要依赖jQuery,因此首先需要加入相关css和js文件. 接下来,在body中需要放置播放器的位置加入如下代码: 最后,关键的部分,配置参数,调用插件. $(& ...
自动滚放的html,HTML5实现视频播放器随页面滚动固定页面右下角效果详解
简要教程这是一款可以自动将HTML5视频播放器在页面向下滚动时,将其固定在页面右下角位置的jquery和CSS3效果. 使用方法在页面中引入jquery文件. HTML结构使用一个元素来包裹H ...

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

Dplayer Html5 弹幕视频播放器的实现相关推荐

最新文章

热门文章