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

本文介绍一下基本使用。

一、下载插件和官方示例

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

我这里进行了一些修改

示例

$("#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}

// ])

二、项目整合

1、前端代码

head里引入

footer里引入

页面中间创建dom

页面底部，在footer的js下面

$("#danmup").DanmuPlayer({

src: [[${post.videoUrl}]],

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

width: "100%" //区域的宽度

, urlToGetDanmu: "/getDanmuList?postId=[[${post.id}]]"

, urlToPostDanmu: "/postDanmu?postId=[[${post.id}]]"

});

注意，我用的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 getDanmuList(@RequestParam("postId") Long postId) {

List 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，创建时间，更新时间等字段

三、效果图

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