Danmmu Player 如何在tp5上进行使用的

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过来啊的值，如果有那就把它写入数据库中。让你们看一下现在前台的效果吧

大概过程就是这个样的！如有不懂 请留言.