您的位置：首页 > Web前端 > HTML5

html5开发<video>视频字幕的程序

2013-12-30 20:39 405 查看
<!DOCTYPE
html>
<html
lang="en">
<head>
   
<meta
charset="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>
   
<script
src="js/jquery.js"></script>
   
<script>
   
   
window.addEventListener("load",function(){
   
     
  //我们的数据数组
   
     
  var captionData=[];
   
     
  //首先获得我们的视频对象
   
     
  var
myvideo=document.getElementByIdx_x("myvideo");
   
     
  //此项表示加载之后执行以下的操作
   
     
  //获得我们存放字幕的地方
   
     
  var
mycaption=document.getElementByIdx_x("caption");
   
     
  //读入我们的字幕数据
   
     
 
$.get("js/captions.js",function(text,status){
   
     
     
captionData=eval_r(text);
   
     
  });

   
     
 
   
     
 
window.addEventListener("timeupdate",function(){
   
     
      var
csec=myvideo.currentTime;
   
     
     
//开始进行判断
   
     
      for(var
i=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">
   
    <video
controls width="400"
id="myvideo">
   
     
  <source
src="video/first.mp4">
   
   
</video>
   
    <div
id="caption">播放开始</div>
   
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航