html5开发<video>视频字幕的程序
<!DOCTYPEhtml><htmllang="en"><head> <metacharset="utf-8"> <title>使用video实现实时字幕的效果</title> <style> #box{ border: 1px solid red; width: 400px; height: 400px; position: absolute; } video{ position: relative; } #caption{ position: relative; left: 180px; top: -60px; font-size: 18px; font-weight: bold; } </style> <scriptsrc="js/jquery.js"></script> <script> window.addEventListener("load",function(){ //我们的数据数组 var captionData=[]; //首先获得我们的视频对象 varmyvideo=document.getElementByIdx_x("myvideo"); //此项表示加载之后执行以下的操作 //获得我们存放字幕的地方 varmycaption=document.getElementByIdx_x("caption"); //读入我们的字幕数据 $.get("js/captions.js",function(text,status){ captionData=eval_r(text); });
window.addEventListener("timeupdate",function(){ varcsec=myvideo.currentTime; //开始进行判断 for(vari=0;i<captionData.length;i++){ //根据当前播放的时间跟我们json的时间进行比较 if(csec>captionData[i].start&&csec<captionData[i].end){ //此时将字幕设置 mycaption.innerHTML=captionData[i].text; mycaption.style.color=captionData[i].color||"#ff0"; } }
},true);
},true);
</script> </head><body> <div id="box"> <videocontrols width="400"id="myvideo"> <sourcesrc="video/first.mp4"> </video> <divid="caption">播放开始</div> </div> </body></html>