SpringBoot实现视频弹幕功能 DanmuPlayer插件的使用

avatar 2021年03月08日21:13:59 0 551 views

前几天朋友让帮忙做一个视频弹幕网站,在找弹幕实现上发现了一个不错的开源的插件。

官方地址:https://github.com/chiruom/DanmuPlayer

本文介绍一下基本使用。

一、下载插件和官方示例

直接从官网下载,可以运行官方的 demo 例子先玩一下。

下载地址:https://github.com/chiruom/DanmuPlayer

我这里进行了一些修改

 

示例

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <link href="css/scojs.css" rel="stylesheet">
  <link href="css/colpick.css" rel="stylesheet">
  <link href="css/bootstrap.css" rel="stylesheet">
  <link href="css/main.css" rel="stylesheet" >
</head>
<body>
<div id="danmup" style="left: 50%;margin-left:-400px;top:100px">


</div>
<div style="display: none">
  <span class="glyphicon" aria-hidden="true">&#xe072</span>
  <span class="glyphicon" aria-hidden="true">&#xe073</span>
  <span class="glyphicon" aria-hidden="true">&#xe242</span>
  <span class="glyphicon" aria-hidden="true">&#xe115</span>
  <span class="glyphicon" aria-hidden="true">&#xe111</span>
  <span class="glyphicon" aria-hidden="true">&#xe096</span>
  <span class="glyphicon" aria-hidden="true">&#xe097</span>
</div>


</body>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/jquery.shCircleLoader.js"></script>
<script src="js/sco.tooltip.js"></script>
<script src="js/colpick.js"></script>
<script src="js/jquery.danmu.js"></script>
<script src="js/main.js"></script>
<script>
  $("#danmup").DanmuPlayer({
    src:"demo.mp4",
    height: "480px", //区域的高度
    width: "800px" //区域的宽度
    ,urlToGetDanmu:"http://localhost:8080/getDanmu"
    ,urlToPostDanmu:"http://localhost:8080/postDanmu"
  });


  // $("#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:"black",size:1,position:0,time:10}
  //   ,{ "text":"这是顶部弹幕" ,color:"yellow" ,size:1,position:1,time:3}
  //   ,{ "text":"这是底部弹幕" , color:"red" ,size:1,position:2,time:9}
  //   ,{ "text":"大家好,我是伊藤橙" ,color:"orange",size:1,position:1,time:3}

  // ])
</script>
</html>

 

二、项目整合

1、前端代码

head里引入

<link rel="stylesheet" href="/static/plugins/DanmuPlayer/css/scojs.css">
<link rel="stylesheet" href="/static/plugins/DanmuPlayer/css/colpick.css">
<link rel="stylesheet" href="/static/plugins/DanmuPlayer/css/bootstrap.css">
<link rel="stylesheet" href="/static/plugins/DanmuPlayer/css/main.css">

 

footer里引入

<script src="/static/front/js/jquery.js"></script>
<!--弹幕-->
<script src="/static/plugins/DanmuPlayer/js/jquery.shCircleLoader.js"></script>
<script src="/static/plugins/DanmuPlayer/js/sco.tooltip.js"></script>
<script src="/static/plugins/DanmuPlayer/js/colpick.js"></script>
<script src="/static/plugins/DanmuPlayer/js/jquery.danmu.js"></script>
<script src="/static/plugins/DanmuPlayer/js/main.js"></script>

 

页面中间创建dom

<div id="danmup"> </div>

 

页面底部,在footer的js下面

<script th:inline="javascript">
        $("#danmup").DanmuPlayer({
            src: [[${post.videoUrl}]],
            height: "520px", //区域的高度
            width: "100%" //区域的宽度
            , urlToGetDanmu: "/getDanmuList?postId=[[${post.id}]]"
            , urlToPostDanmu: "/postDanmu?postId=[[${post.id}]]"
        });
</script>

 

注意,我用的Thymeleaf,所以支持插入动态属性,如 [[${post.videoUrl}]] 当前页面的视频的URL, [[${post.id}]]是当前视频ID获取

 

2、后端代码

控制器代码

package com.example.forum.controller.home;

import com.alibaba.fastjson.JSON;
import com.example.forum.controller.common.BaseController;
import com.example.forum.entity.Danmu;
import com.example.forum.service.DanmuService;
import com.example.forum.service.PostService;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.List;

/**
 * @author 言曌
 * @date 2021/3/7 2:27 下午
 */
@Controller
@Slf4j
public class FrontDanmuController2 extends BaseController {


    @Autowired
    private DanmuService danmuService;

    @Autowired
    private PostService postService;


    /**
     * 根据视频ID查询动漫,根据时间升序
     *
     * @param postId 视频ID
     * @return
     */
    @GetMapping(value = "/getDanmuList", produces = {"application/json;charset=UTF-8"})
    @ResponseBody
    public List<Danmu> getDanmuList(@RequestParam("postId") Long postId) {
        List<Danmu> danmuList = danmuService.findByPostId(postId);
        return danmuList;
    }

    /**
     * 发布弹幕
     *
     * @param postId    视频ID
     * @param danmuJson 弹幕对象JSON字符串,如
     *                  { "text":"内容","color":"#ffffff","size":"1","position":"0","time":37}
     * @return 返回什么不重要
     */
    @PostMapping("/postDanmu")
    @ResponseBody
    public String postDanmu(@RequestParam("postId") Long postId,
                            @RequestParam("danmu") String danmuJson) {
        Long userId = getLoginUserId();
        if (userId == null) {
            return "error, not login";
        }

        Danmu danmu = JSON.parseObject(danmuJson, Danmu.class);
        danmu.setPostId(postId);
        danmu.setUserId(userId);


        // 没开启,使用默认的
        danmuService.insert(danmu);
        postService.updateDanmuSize(postId);
        return "success";
    }

}

 

弹幕实体类

package com.example.forum.entity;

import com.baomidou.mybatisplus.annotation.TableName;
import com.example.forum.common.base.BaseEntity;
import lombok.Data;

import java.io.Serializable;

/**
 * 弹幕
 * text——弹幕文本内容。
 * color——弹幕颜色。
 * position——弹幕位置 0为滚动 1 为顶部 2为底部
 * size——弹幕文字大小。 0为小字 1为大字
 * time——弹幕所出现的时间。 单位为分秒(十分之一秒)
 * isnew——当出现该属性时(属性值可为任意),会认为这是用户新发的弹幕,从而弹幕在显示的时候会有边框。
 *
 * @author 言曌
 * @date 2021/3/7 2:22 下午
 */
@Data
@TableName("danmu")
public class Danmu extends BaseEntity implements Serializable {

    /**
     * 弹幕文本内容
     */
    private String text;

    /**
     * 弹幕颜色
     */
    private String color;

    /**
     * 弹幕位置 0为滚动 1 为顶部 2为底部
     */
    private String position;

    /**
     * 弹幕文字大小
     */
    private String size;

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

    /**
     * 用户ID
     */
    private Long userId;

    /**
     * 视频ID
     */
    private Long postId;
}

备注:BaseEntity 是id,创建时间,更新时间等字段

 

三、效果图

在线预览地址,服务器性能差,网速比较慢

https://cartoon.liuyanzhao.com

预览地址:https://cartoon.liuyanzhao.com/post/40

代码地址:http://github.com/saysky/cartoon

 

  • 微信
  • 交流学习,有偿服务
  • weinxin
  • 博客/Java交流群
  • 资源分享,问题解决,技术交流。群号:590480292
  • weinxin
avatar

发表评论

avatar 登录者:匿名
可以匿名评论或者登录后台评论,评论回复后会有邮件通知

  

已通过评论:0   待审核评论数:0