设为首页

加入收藏

繁體中文

 OK5266.COM | 本站首页 | 资讯动态 | 站内公告 | 精品文萃 | 下载中心 | 学习园地 | 博客世界 | 论坛世界 | 访客留言 | 手机访问 | 微公众号 |

     [ 南湖君 ], welcome back!

«June 2022»
1234
567891011
12131415161718
19202122232425
2627282930

用户:
密码:
Cookie:

Bulletin Board

暂无公告...

My Features

Blog Update

Latest Comments

Messages

Friend Site Links

爱德华网络世界


Blog Counts
blog名称:南湖君
日志总数:19
评论数量:6
留言数量:0
访问次数:63439
建立时间:2004年9月16日

[学习天地]Dplayer Html5 弹幕视频播放器的实现
edward 发表于 2020-9-12 6:21:04
本弹幕视频,通过  Html5  Dplayer实现。
Dplayer官网:http://dplayer.js.org/#/

一、下载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样式,可以参考改一下,让视频精简一点。

html页面中引用下载完的Dplayer中的css和js
<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作为id
            api: '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作为id
            api: 'https://api.prprpr.me/dplayer/'  //这个是官网写好的弹幕接口,可以直接使用,就是不太稳定
        }
    });
</script>

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

其实我还实现了视频记忆的功能,从数据库中读取播放时间,下次观看直接指定时间播放,类似网课智慧树,超星,之类的。。。


阅读全文(509) | 回复(0) | 引用(0)

发表评论:
昵称:
密码:
主页:
标题:
爱德华网络世界 | 博客首页 | 联系我们 | 博客注册 | 博客登陆
Powered by www.ok5266.com © Copyright 2004-2022. All rights reserved.
Processed in 0.047 second(s), page refreshed 110466 times.