基于HTML5有弹幕功能的播放器

该博客介绍了一个利用HTML5技术实现的带有弹幕功能的视频播放器。通过JavaScript库,可以在视频播放过程中添加并显示弹幕,提供丰富的用户体验。
摘要由CSDN通过智能技术生成
        Danmmu Player是一个具备弹幕功能的Html5视频播放器。我们在观看视频的时候,可以对视频发表自己的观点,当点击发送按钮后,发表的内容会在视频屏幕上以彩弹的形式发出,并做滚动展示动画效果,即视频弹幕功能。

  基于HTML5的有弹幕功能的视频播放器


  如何使用
  Danmmu Player需要依赖jQuery,因此首先需要加入相关css和js文件。
  <link rel="stylesheet" href="css/main.css">
  <script src="js/jquery-2.1.4.min.js"></script>
  <script src="js/jquery.danmu.js"></script>
  <script src="js/main.js"></script>
  接下来,在body中需要放置播放器的位置加入如下代码:
  <div id="danmup"></div>
  最后,关键的部分,配置参数,调用插件。
  $("#danmup").DanmuPla
首先,这个插件并不是傻瓜式安装的,很多东西需要自己去调试,以下只给有一定基础的人,所以纯伸手党就不用看了 申明: 弹幕的接收和发送的最初源码来自此贴:http://www.discuz.net/thread-2499499-1-1.html 注: 下载后发现问题很多,所以我自己修改了一遍,剔除了代码中的大部分不合理的地方加入了控制最大弹幕数的,编码GBK测试无问题,utf-8未测试(应该是不会有问题的)。 此源码为最初版,后来还重写了记录吐槽者IP、整合至视频展厅以及管理弹幕的简易后台,根据情况我在开放下载吧 播放器使用的是mukioplayer:http://code.google.com/p/mukioplayer/ 如果你要转载下面的内容,那么请注明原帖地址 --------------------------------------------我是分割线-------------------------------------------- 源码下载(内含v1.150mukioplayer): 2012-04-25第3次更新 1.追加简易后台管理一枚 2012-04-17第2次更新 1.修正了无法正确保存ZOOME字幕的问题 2012-04-05第1次更新 1.增加一个外置弹幕列表的播放器可自由选择任意一个使用 2.修改了php的引用代码和php默认不支持的函数 3.其他已知的问题 下载后需要编辑2个配置文件: 一.在config.php中设置你的数据库连接和可控制的最大弹幕数。 注:数据库填写的信息和你安装论坛时填写的一样,如果你是独立主机那么可以建立一个专门的MYSQL用户操作弹幕表,加强安全性 二.在conf.xml中设置弹幕播放器的接收和发送URL地址。  1.post.php为接收从弹幕中传入参数的  2.xml.php为生成弹幕文件的 三.关于后台:  1.可以更改admin这个文件夹名字来隐藏后台路径提高安全性  2.使用前请先配置后台文件夹中的admin.php后台基本设定,具体规则参见每行的注释  3.后台访问路径既:http://你的域名/bplayer/后台文件夹名称/admin.php 配置完成后把文件夹上传到根目录中即可 --------------------------------------------我是分割线-------------------------------------------- 进入后台 - 站长 - 数据库 - 升级中运行以下SQL语句: CREATE TABLE IF NOT EXISTS `tm_comment` ( `ID` int(12) NOT NULL auto_increment, `playerID` varchar(15) default NULL, `message` text, `color` varchar(12) default NULL, `fontsize` varchar(12) default NULL, `playtime` varchar(12) default NULL, `mode` varchar(12) default NULL, `times` datetime default NULL, KEY `ID` (`ID`) ) ENGINE=MyISAM DEFAULT CHARSET=gbk AUTO_INCREMENT=1 ; --------------------------------------------我是分割线-------------------------------------------- 在看到后台的界面 - 编辑器设置 - Discuz! 代码,新增一个标签,名称随意,这里我们就用iplay,添加后点击详情,在替换内容中添加如下代码: <embed width='800' height='353' quality='high' allowfullscreen='true' type='application/x-shockwave-flash' src='http://你的域名/bplayer/mukioplayer.swf?type={1}&vid;={2}'='http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash'/> 复制代码 例子中添加代码:[iplay={1}]{2}[/iplay] 解释:添加弹幕播放器 参数个数:2 参数提示语: 视频类型 视频的ID 镶套次数:1 允许使用的用户组根据自己论坛的情况而定即可 --------------------------------------------我是分割线-------------------------------------------- 完毕,在帖子中使用 [iplay=视频类型]视频ID[/iplay] 就可以添加一个弹幕播放器测试了。 视频类型解释 : 新浪 sina或者video都可以 优酷 youku 新发现: QQ视频 qq (测试可用) 6间房 6room (未测试) 视频ID解释 : 例如一个视频地址是新浪的 http://you.video.sina.com.cn/b/25323843-1272884840.html 那么 - 前面的25323843 这个值就是这个视频的ID 优酷的话 http://v.youku.com/v_show/id_XMzIzNjA2NjE2.html 就是id_至.html中间的XMzIzNjA2NjE2 --------------------------------------------我是分割线-------------------------------------------- 播放器提示评论文件加载失败或者发送失败,但是弹幕可以正确保存到数据库中的解决方法: 打开config.php,复制全部内容(已经配置好了数据库信息的),在打开xml.php,选中require 'config.php';,粘贴全部内容,保存。 某些linx服务器会出现此问题,临时用这个方法解决,暂时没有找到php生成xml不能包含其他文件的原因 --------------------------------------------我是分割线-------------------------------------------- 关于播放器侧边栏问题,压缩包里还有一个mukioplayer1.swf文件,将此文件与mukioplayer.swf替换,即可显示侧边栏 --------------------------------------------我是分割线-------------------------------------------- 总结:实现了基本的弹幕存储功能,但是管理很麻烦,而且安全性也有待加强,字段类型也弄的很随便,期待有强人来完善 若有问题可回帖,有时间我会回答,但不一定每个都回答(只针对本帖的内容和源码,在其他地方下的别问我) 此弹幕并不仅限DISCUZ论坛,PHPWIND及其他论坛也是可以整合的
Vue-DPlayer是一个基于Vue.js的封装DPlayer的插件,用于在网页上播放视频。它支持发送弹幕并显示弹幕,可以通过一些简单的配置来实现弹幕的发送和显示。 首先,需要在Vue组件中引入Vue-DPlayer插件,并在该组件中定义一个`danmaku`数组,用于存储发送的弹幕内容。 接着,通过Vue-DPlayer的配置项`options`中设置`danmaku`为`true`,以启用弹幕发送功能。可以通过`api`属性访问弹幕相关的API,如`api.sendDanmaku`用于发送弹幕。 在Vue-DPlayer组件的模板中,可以通过使用`v-model`指令将弹幕输入框绑定到一个变量上,以获取用户输入的弹幕内容。当用户编辑完成后,可以通过发送按钮触发发送弹幕的方法。 具体实现如下所示: ```html <template> <div> <vue-dplayer :options="playerOptions"></vue-dplayer> <input type="text" v-model="danmakuContent" placeholder="请输入弹幕内容"> <button @click="sendDanmaku">发送</button> </div> </template> <script> import VueDPlayer from 'vue-dplayer' export default { components: { VueDPlayer }, data() { return { playerOptions: { danmaku: true }, danmakuContent: '', danmaku: [] } }, methods: { sendDanmaku() { this.danmaku.push(this.danmakuContent) // 使用Vue-DPlayer的API发送弹幕 this.$refs.dplayer.api.sendDanmaku(this.danmakuContent) this.danmakuContent = '' // 清空输入框 } } } </script> ``` 以上代码会在网页上显示一个视频播放器和一个输入框,用户可以在输入框中输入弹幕内容,并通过点击发送按钮发送弹幕。发送的弹幕内容会被保存在`danmaku`数组中,并显示在视频播放器上。 这样,就可以通过Vue-DPlayer实现在网页上发送和显示弹幕功能了。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值