Danmmu Player是一个具备弹幕功能的Html5视频播放器。我们在观看视频的时候,可以对视频发表自己的观点,当点击发送按钮后,发表的内容会在视频屏幕上以彩弹的形式发出,并做滚动展示动画效果,即视频弹幕功能。
它的源码我也下下来了 今天主要讲解的是如何用tp5去连接Danmmu Player 后台操作问题
前台只要下下来就是没有任何问题的 有问题的是它所给的 sendData.php 和 getData.php 要如何要做tp5中进行使用的问题。
数据库我就不说了 文件中有,先说它的前端页面
index页面
src: "http://www.spsms.vip/uploads/movi/41/20180619/a20f3de8d0d3168d61db83404ed4e97d.mp4" ,
height: "480px", //区域的高度
width: "800px", //区域的宽度
写上你要播放视频的路径 下面的js中的弹幕 不过没有什么用
$("#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:"yellow" ,size:1,position:0,time:3}
,{ "text":"好快啊" , color:"red" ,size:1,position:0,time:19}
,{ "text":"大家好,我是打不死的小强" ,color:"orange",size:1,position:0,time:23}
])
这是它页面上写死的
要修改运行PHP代码的路径
urlToGetDanmu:"",
urlToPostDanmu:"{:url('player/sendData')}"
urlToGetDanmu 是不用填的 因为我把它的功能融入到了下文中 public index 方法中了 首页只需要对接上后台的 sendData 方法把弹幕写入数据库中就可以了
他原先从数据库中进行拿出来的是getData.php
<?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;
?>
正如所见这是最为原始的一种形态 我们要把它改造一番
改造后:
public function index(){
$model= new DanmuModel();
$json = '<script>';
$json .='$("#danmup .danmu-div").danmu("addDanmu",';
$json .= '[';
$query = $model->select();
foreach ($query as $k=>$v){
$json .= $query[$k]['content'].',';
}
$json = substr($json,0,-1);
$json .= '])';
$json .= '</script>';
$this->assign('json',$json);
return view();
}
这是改造后的 把它单独的从script中剥离出来把 while 循环改成foreach循环 用assign进行输出 来看一下前端页面吧
<script>
$("#danmup").DanmuPlayer({
src: "http://www.spsms.vip/uploads/movi/41/20180619/a20f3de8d0d3168d61db83404ed4e97d.mp4" ,
height: "480px", //区域的高度
width: "800px", //区域的宽度
speed: 10000, //弹幕速度,穿过视频的毫秒数
danmuss: {}, //默认的danmuss对象(稍后介绍)
default_font_color: "#FFFFFF", //默认的弹幕颜色
font_size_small: 16, 小号弹幕的字体大小,注意此属性值只能是整数
font_size_big:28, //大号弹幕的字体大小
opacity: "0.5", //默认弹幕的透明度
top_botton_danmu_time: 6000, //底部及顶部弹幕存留的世界
urlToGetDanmu:"{:url('player/getData')}",
urlToPostDanmu:"{:url('player/sendData')}"
});
/*$("#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:"yellow" ,size:1,position:0,time:3}
,{ "text":"好快啊" , color:"red" ,size:1,position:0,time:19}
,{ "text":"大家好,我是打不死的小强" ,color:"orange",size:1,position:0,time:23}*!/
])*/
</script>
{$json}
只需要在前端页面输出 {$json}后就可以完成从数据库中拿出来的弹幕信息了
现在在说一下发弹幕储存在数据库中的问题 sendData.php 是它原先进行处理的 代码是这样的
<?php
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();
?>
也是最原始的代码 我们把它拿到后台进行改造一番
改造后:
public function sendData()
{
if(request()->isPost()){
$model= new DanmuModel();
$data=input('post.');
$danmu['content']=$data['danmu'];
$danmu['addtime']=time();
$model->save($danmu);
}
}
先判断有没有post过来啊的值,如果有那就把它写入数据库中。让你们看一下现在前台的效果吧
大概过程就是这个样的!如有不懂 请留言.