前几天朋友让帮忙做一个视频弹幕网站,在找弹幕实现上发现了一个不错的开源的插件。
官方地址: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"></span>
<span class="glyphicon" aria-hidden="true"></span>
<span class="glyphicon" aria-hidden="true"></span>
<span class="glyphicon" aria-hidden="true"></span>
<span class="glyphicon" aria-hidden="true"></span>
<span class="glyphicon" aria-hidden="true"></span>
<span class="glyphicon" aria-hidden="true"></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,创建时间,更新时间等字段
三、效果图
在线预览地址,服务器性能差,网速比较慢
预览地址:http://cartoon.liuyanzhao.com/post/40
代码地址:http://github.com/saysky/cartoon
您可以选择一种方式赞助本站
支付宝扫一扫赞助
微信钱包扫描赞助
赏