H5 视屏 canvas弹幕实验

来源：互联网发布：ie浏览器无法打开淘宝编辑：程序博客网时间：2024/05/22 00:36
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />    <link href="plugin/video/video-js.css" type="text/css" rel="stylesheet"/>    <link href="customize/css/index.css" type="text/css" rel="stylesheet" />    <script type="text/javascript" src="plugin/jQuery-3.0.0/jquery-3.0.0.js"></script>    <script type="text/javascript" src="plugin/video/video.js"></script><title></title></head><body><div style="height:210px;"><video width="100%" height="100%" preload="auto" id="example_video_1" webkit-playsinline="" poster="customize/img/video.png" class="video-js vjs-default-skin" controls preload="none"  data-setup="{}"><source src="http://wshls.acgvideo.com/live/live_13631572_4583071/playlist.m3u8?wsSecret=e6711c087560b5d20a996629540f45a7&amp;wsTime=57dd2eca" type="video/mp4">    <track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->    <track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 --> </video><div class="chatCanvas"><canvas id="canvas">不支持</canvas><form name="canvasForm" class="canvasForm"><input type="text" name="contenttext" class="contenttext"/><input type="button" value="发送" class="confirm"/></form></div> </div></body><script>(function($){$(".confirm").click(function(){var canvas=document.getElementById('canvas');var ctx=canvas.getContext("2d");var width=100;var height=100;var colorArr=["yellow","pink","orange","red","green"];var textArr=[];var txt = $(".contenttext").val();textArr.push(txt);console.log(textArr);canvas.width=width;canvas.height=height;var image=new Image();ctx.font = "20px Courier New";var numArrL=[80,100,5,300,500,430];var numArrT=[80,100,20,300,380,210];setInterval(function(){ctx.clearRect(0,0,canvas.width,canvas.height);ctx.save();for(var j=0;j<textArr.length;j++){numArrL[j]-=(j+1)*0.6;ctx.fillStyle = colorArr[j]ctx.fillText(textArr[j],numArrL[j],numArrT[j]);}for(var i=0;i<textArr.length;i++){if(numArrL[i]<=-500){numArrL[i]=canvas.width;}}ctx.restore();},30)})})(jQuery)</script></html>
0 0