搜 索

使用弹幕播放器插件实现播放视频与弹幕功能

编辑:QTOOL.NET日期:2019-02-26414

这里介绍了使用DanmmuPlayer实现一个简单的弹幕播放器,首先我们先了解一下DanmmuPlayer插件.
DanmmuPlayer是基于jQuery的一款实用的弹幕与视频插件。他可以很好的实现观看视频时实时插入弹幕文字达到聊天互动的效果。
那么我们该如何使用它呢?
DanmmuPlayer是基于jQuery的一款插件所以首先需要加入相关jquery引用以及DanmmuPlayer的css和js文件,这些文件网上有很多下载,这里就不再提供了.
<script src="js/jquery.js"></script> 
<script src="js/jquery.danmu.js"></script> 
<script src="js/main.js"></script> 
<link rel="stylesheet" href="css/main.css">
DanmmuPlayer的一些样式引用示例
然后,在body标签中放置播放器代码,代码如下:
<div id="dmnr"></div> 
继续再script中配置参数,调用插件。
$("#dmnr").DanmuPlayer({ 
    src: "XXXXXXXX.mp4", //视频地址 
    height: "500px", //播放区域的高度 
    width: "900px", //播放区域的宽度 
    urlToGetDanmu:"getdm.php",  //php获取弹幕数据 
    urlToPostDanmu:"senddm.php"  //php发送弹幕数据存储数据
}); 
那么怎样让弹幕与后端数据进行交互呢.
在制作弹幕视频网站时,我们会将页面前端操作与后端数据库进行对接,将发送的即时弹幕内容储存到数据库中去
我们可以以PHP与MySQL来实现弹幕内容在数据库中读取显示与保存。
getdm.php文件是用来从后端获取弹幕数据的,我们可以使用查询数据库语句然后输出json信息.
senddm.php文件用来接收前端post提交发送的弹幕内容,然后通过INSERT语句将数据保存在数据表中。
运行文件,然后就可以实现弹幕播放器了.
当然,如果不与后端数据库交互,那么则可以不用urlToGetDanmu与urlToPostDanmu两参数,
我们可以直接实用DanmmuPlayer中addDanmu方法在页面中插入弹幕的json数据
如:$("#dmnr .danmu-div").danmu("addDanmu",[ 
    { "text":"这是弹幕1" ,color:"white",size:2,position:0,time:2}, 
    { "text":"这是弹幕2" ,color:"red",size:1,position:0,time:3}, 
]); 
一下是一些弹幕参数的介绍:
color——弹幕颜色。
text——弹幕文本内容
position——弹幕位置 0是滚动 1是顶部 2是底部
size——文字大小 0是小字 1是大字
time——弹幕出现时间(分秒)
isnew——该属性值可为任意,会被判断为新发送的弹幕,同时弹幕显示时会有边框
以上就是如何运用DanmmuPlayer插件,实现一个简单弹幕播放器,以及对播放器弹幕的一些控制方法的介绍.

TAG标签:js
此文章由QTOOL.NET编辑
最新文章

热门标签