php+js实现弹幕,基于HTML5的有弹幕功能的视频播放器

客官°小女子只卖身不卖艺 2023-01-16 09:42 156阅读 0赞

如何使用

Danmmu Player需要依赖jQuery，因此首先需要加入相关css和js文件。

接下来，在body中需要放置播放器的位置加入如下代码：

最后，关键的部分，配置参数，调用插件。

$("\#danmup").DanmuPlayer(\{

src: "abc.mp4", //视频源

height: "480px", //区域的高度

width: "800px", //区域的宽度

urlToGetDanmu:"getData.php", //从后端获取弹幕数据

urlToPostDanmu:"sendData.php" //发送弹幕数据给后端保存入库

\});

好了，现在可以运行你的弹幕播放器了，当然，如果不用与后端交互，则可以不使用urlToGetDanmu和urlToPostDanmu两个参数，直接在页面中加入初始数据，如：

$("\#danmup .danmu-div").danmu("addDanmu",\[

\{ "text":"这是滚动弹幕" ,color:"white",size:1,position:0,time:2\},

\{ "text":"我是帽子绿" ,color:"green",size:1,position:0,time:3\},

\{ "text":"哈哈哈啊哈" ,color:"\#f30",size:1,position:0,time:10\},

\{ "text":"大家好，我是打不死的小强" ,color:"orange",size:1,position:0,time:23\}

\]);

Danmmu Player的addDanmu方法是将弹幕内容追加到屏幕中，看清楚了，这是一串json格式的数据，其中：

text——弹幕文本内容

color——弹幕颜色。

position——弹幕位置 0为滚动 1 为顶部 2为底部

size——弹幕文字大小。 0为小字 1为大字

time——弹幕所出现的时间。 单位为分秒(十分之一秒)

isnew——当出现该属性时(属性值可为任意)，会认为这是用户新发的弹幕，从而弹幕在显示的时候会有边框。

在实例中，我简化了操作界面，去掉了文本颜色、大小、位置等参数的设置，以及透明度等设置，只留下几个主要功能按钮。

与后端交互

实际项目应用时，我们会将前端操作与后端对接，将发送的弹幕内容不仅要显示在屏幕上，还要存储到后台数据库中。当然数据库类型可以根据项目需求确定。你可以使用MySQL，甚至也可以使用文本文件来保存数据。本文实例中后端采用PHP+MySQL来实现弹幕内容的读取和保存。

getData.php是用来从后端获取弹幕数据的。我们知道，在用户打开播放视频的时候，已经有人发表过弹幕内容了，这些内容是已经存在数据库中的了，我们需要将这些数据读取并显示在视频播放器屏幕上。

include\_once('connect.php'); //连接数据库

$json = '\[';

$query = mysql\_query("select \* from danmu");

while($row=mysql\_fetch\_array($query))\{

$json .= $row\['content'\].',';

\}

$json = substr($json,0,-1);

$json .= '\]';

echo $json;

数据表danmu的字段结构以及连接数据库文件connect.php请大家下载源码包可以查看。

sendData.php用来接收前端post过来的弹幕内容数据，并将数据保存到数据表中。

include\_once('connect.php'); //连接数据库

$danmu=strip\_tags($\_POST\['danmu'\]);

$addtime = time();

$sql="INSERT INTO \`danmu\`(\`id\`,\`content\`,\`addtime\`) VALUES (null,'$danmu','$addtime')"; $query=mysql\_query($sql); mysql\_close();

其实你也可以将post上来的数据进行拆分，将数据表多设几个字段用来保存不同的属性，如内容、颜色、字体大小等，然后在getData.php读取的时候就比较灵活了，直接json\_encode()就可以输出数据了。

发表评论取消回复

表情：

评论列表（有 0 条评论，156人围观）

还没有评论，来说两句吧...

相关阅读

相关 iOS 图解弹幕功能的实现

先来看一张效果图(LICEcap录制的有点卡, 凑合看) ![826619-20190725104807066-1133338330.gif][] 理一下大概流程:

小灰灰/ 2023年08月17日 17:16/ 0 赞/ 100 阅读

相关 php+js实现弹幕,基于HTML5的有弹幕功能的视频播放器

如何使用 Danmmu Player需要依赖jQuery，因此首先需要加入相关css和js文件。接下来，在body中需要放置播放器的位置加入如下代码：最后，关键的部分

客官°小女子只卖身不卖艺/ 2023年01月16日 09:42/ 0 赞/ 157 阅读

相关原生 JS 实现视频弹幕功能

![在这里插入图片描述][20201119213110775.gif_pic_center] 效果还行吧，大概就不到 150 行代码即可。快点学起来吧 ![在这里插入图

悠悠/ 2022年12月22日 11:11/ 0 赞/ 201 阅读

相关 html5 网页弹幕,Damoo

软件简介 Damoo 是一个轻量级的 HTML5 弹幕引擎。可以在页面元素上附加一层弹幕图层并且以非常简单的 API 调用方式使用。查看DEMO Damoo 一个不起眼

- 日理万妓/ 2022年10月06日 11:58/ 0 赞/ 117 阅读

相关简易弹幕实现

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] html <style> da

深藏阁楼爱情的钟/ 2022年10月02日 09:46/ 0 赞/ 187 阅读

相关弹幕效果实现

前言昨天晚上11点了还没睡着，惆怅能力不足，但不知道怎么能快速的提升自己。呜呼哀哉，临睡前看了一个弹幕的效果实现的技术视频，听着很好的，自己在做电商这块也没写过弹幕。今

川长思鸟来/ 2022年09月25日 01:24/ 0 赞/ 238 阅读

相关 Java 版视频弹幕交互功能

2021年了，还有不支持弹幕的视频网站吗，现在各种弹幕玩法层出不穷，抽奖，ppt都上弹幕玩法了，不整个弹幕都说不过去了，今天笔者就抽空做了一个实时视频弹幕交互功能的实现，不得不

今天药忘吃喽~/ 2022年08月28日 01:54/ 0 赞/ 200 阅读

相关 Android弹幕功能实现，模仿斗鱼直播的弹幕效果

记得之前有位朋友在我的公众号里问过我，像直播的那种弹幕功能该如何实现？如今直播行业确实是非常火爆啊，大大小小的公司都要涉足一下直播的领域，用斗鱼的话来讲，现在就是千播之战。而弹

淡淡的烟草味﹌/ 2022年05月15日 13:54/ 0 赞/ 263 阅读

相关 javaScript视频弹幕

视频弹幕 <script type="text/javascript"> function $(str){return document.getEle

太过爱你忘了你带给我的痛/ 2022年01月16日 02:11/ 0 赞/ 313 阅读

相关 Canvas弹幕实现

canvas知识绘制文字 let canvas = document.getElementById('canvas'); let ctx = ca

朱雀/ 2021年06月10日 20:38/ 0 赞/ 561 阅读