基于MVC的Html视频弹幕

最新推荐文章于 2023-05-29 23:24:56 发布

赤丶

最新推荐文章于 2023-05-29 23:24:56 发布

阅读量350

点赞数 2

文章标签： tomcat

本文链接：https://blog.csdn.net/qq_51554527/article/details/123980167

版权

本文详细介绍了如何在网页中使用DanmuPlayer.js插件实现弹幕功能，包括前端如何加载视频并添加弹幕，以及后端Java MVC如何配合PHP处理弹幕数据的获取和存储。通过实例展示了完整的数据流程和关键代码片段。

摘要由CSDN通过智能技术生成

采用的是DanmuPlayer.js插件，没有的可以去Git。

首先你的知道这个插件的使用方法。

首先你的现在html中定义一个div

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

接着就是js代码，src代表的是视频路径，height代表视频的高，weight代表视频的宽

//urlToGetDanmu:"getData.php", //从后端获取弹幕数据
//urlToPostDanmu:"sendData.php" //发送弹幕数据给后端保存入库

这里的话由于此插件是采用的php的方法，我用的java mvc模式，所以对此方法做出了一些修改。所以这里我先将这两个方法给注释掉了。咱可不用管。


				$("#danmup").DanmuPlayer({
				
			  	src:src2,//视频源
			    height: "480px", //区域的高度
    			width: "800px", //区域的宽度
                //urlToGetDanmu:"getData.php",  //从后端获取弹幕数据
			    //urlToPostDanmu:"sendData.php"  //发送弹幕数据给后端保存入库
			    })

$("#danmup .danmu-div").danmu("addDanmu",result)，这个方法是向我们的视频中添加弹幕的方法，这里需要注意的是result需要是一个JSON格式如我将result定义成这样。

let result = {text:"hhq" ,color:"white",size:1,position:0,time:21}
				//position：0代表滚动弹幕 1 代表顶部 2 代表底部
			,{text:"这是顶部弹幕" ,color:"yellow" ,size:1,position:1,time:31}
			
			,{text:"这是底部弹幕" , color:"red" ,size:1,position:2,time:31}

$("#danmup .danmu-div").danmu("addDanmu",result)

好了，知道这些之后我们直接开始传数据。

jquery向后端发送请求拿到数据库中的弹幕数据。

$.post("danmu/getDanmu",{},result=>{
				console.log(result)
				let src2 = result[0].addr
				//console.log(src2)
				console.log(result1)

				$("#danmup").DanmuPlayer({
			  	src:src2,//视频源
			    height: "480px", //区域的高度
			    width: "800px", //区域的宽度
			    //urlToGetDanmu:"getData.php",  //从后端获取弹幕数据
			    //urlToPostDanmu:"sendData.php"  //发送弹幕数据给后端保存入库	
			}) 
				$("#danmup .danmu-div").danmu("addDanmu",result)
				//这是自动加弹幕我的responseData就是后台的数据
			});

result是我们拿到的数据通过调用danmu方法直接将后台返回给我们的result给渲染上去。（当然你后台java得先处理好，让返回的数据是json格式）。

javaservlet处理数据

protected void getDanmu(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		int cinema_id = 101;
		DanmuBiz biz = new DanmuBizImpl();
		List<DanmuBean> list = biz.getDanmu(cinema_id);
		if(list == null) {
			this.send(resp, 501);
			return;
		}
		this.send(resp, list);
	}

注意这里的send方法是我们前面封装好的一个baseservlet里面的方法。处理了我们的响应数据。这里我就不做解释了（send里面已经将结果封装成了json格式）。

看成片：