Canvas简易视频弹幕

最新推荐文章于 2024-06-10 15:27:42 发布

javscp_q

最新推荐文章于 2024-06-10 15:27:42 发布

阅读量126

点赞数 2

分类专栏：数据可视化文章标签： canvas video

本文链接：https://blog.csdn.net/javcp_q/article/details/100178747

版权

数据可视化专栏收录该内容

6 篇文章 0 订阅

订阅专栏

自己写的比较简易的canvas+video视频弹幕，存在不足，有待改进

视频资源路径需自行设置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>视频弹幕</title>
		<style type="text/css">
			canvas{
				/*没有此设置,无法点击canvas下的video*/
				pointer-events: none;
				position: absolute;
			}

		</style>
		<script type="text/javascript">
			window.onload = function(){
				var canvas = document.getElementById("canvas");
				var text = document.getElementById("text");
				var button = document.getElementById("button");
				var ctx = canvas.getContext("2d");
				var colors = ["red","orange","yellow","green","blue","purple","pink","black","white"];
				var barrages = [];
				var video = document.getElementById("video");

				setInterval(function(){
					if(video.paused==false){
						update();
						console.log(barrages.length);
					}
				},50);

				button.onclick = function(){
					if(text.value!=""){
						var barrage = {
							value:text.value,
							height:Math.floor((Math.random()*(canvas.height/2-20))+20),
							left:canvas.width+10,
							speed:Math.floor((Math.random()*5)+5),
							color:colors[Math.floor(Math.random()*10)]
						}
						barrages.push(barrage);
						text.value="";
					}
					console.log(video.paused);
				}

				function update(){
					ctx.clearRect(0,0,canvas.width,canvas.height);
					drawBarrages();
					updateBarrages();
				}

				function drawBarrages(){
					for(var i=0;i<barrages.length;i++){
						ctx.beginPath();
						ctx.font = "bold 20px Arial";
						ctx.fillStyle = barrages[i].color;
						ctx.textBaseline = "middle";
						ctx.fillText(barrages[i].value,barrages[i].left,barrages[i].height);
						ctx.closePath();
					}
				}

				function updateBarrages(){
					for(var i=0;i<barrages.length;i++){
						barrages[i].left-=barrages[i].speed;
					}
					//删除算法
					var num = 0;
					for(var i=0;i<barrages.length;i++){
						if((barrages[i].left+300)>0){
							barrages[num] = barrages[i];
							num++;
						}
						
					}
					while(barrages.length>num){
						barrages.pop();
					}
				}
			}
		</script>
	</head>
	<body>
		<div id="box">
			<canvas id="canvas" width="600" height="330"></canvas>
			<video loop controls id="video" width="600" height="330">
				<source src="video.mp4">
			</video>
		</div>
		<input id="text" type="text"/>
		<button id="button">发送</button>
	</body>
</html>