HTML5中js控制video视频和分段播放

来源：互联网发布：哈登第四周场均数据编辑：程序博客网时间：2024/05/30 04:20

原文地址：http://blog.csdn.net/tuposky/article/details/41488403

HTML5 vedio常用的js操作

1、选择本地资源播放视频

html:

[html] view plain copy
<input type="file" id="file" onchange="setMediaFile()">  
<video id="video1" autoplay="autoplay" controls="none" ></video>  

js:

[javascript] view plain copy
var myVid=document.getElementById("video1");  
  
function setMediaFile() {  
   var file = document.getElementById('file').files[0];  
   if(!file){  
    alert("Please upload file.");  
    return false;  
   }  
   var url = (window.URL) ? window.URL.createObjectURL(file) : window.webkitURL.createObjectURL(file);  
   document.getElementById("video1").src = url;  
}  

2、设置，和获取当前视频播放的时间

利用currentTime来设置或获取当前时间
获取视频当前播放时间：myVid.currentTime
设置视频当前播放时间：myVid.currentTime="10"

3、监听视频播放事件

给视频添加timeupdate事件

[html] view plain copy
myVid.addEventListener("timeupdate",timeupdate);  
    function timeupdate(){  
        //do something...  
    }  

4、综合事例
选择视频，指定设置视频播放开始时间，和结束时间，即分段播放视频

[html] view plain copy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
  <head>  
    <title>tttt</title>  
    <meta http-equiv="pragma" content="no-cache">  
    <meta http-equiv="cache-control" content="no-cache">  
    <meta http-equiv="expires" content="0">      
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
    <meta http-equiv="description" content="This is my page">  
    <meta charset="utf-8">  
  </head>  
  
<body>  
    <div class="container">  
        <input type="file" id="file" onchange="playMedia(5,10)">第5秒开始-10秒时暂停  
        <br >  
        <br >  
        <button onclick="setCurrentTime(7)" type="button">从第7秒开始播放</button>  
             
        <input type="text" id="showTime"/>  
        <br >  
        <br >  
        <video id="video1" autoplay="autoplay" controls >  
        </video>  
          
    </div>  
  
</body>  
  
<script>  
  
    var myVid=document.getElementById("video1");  
    myVid.addEventListener("timeupdate",timeupdate);  
  
    var _endTime;  
  
    //视频播放  
    function playMedia(startTime,endTime){  
        //设置结束时间  
        _endTime = endTime;  
       var file = document.getElementById("file").files[0];  
       if(!file){  
        alert("请指定视频路径");  
        return false;  
       }  
       var url = (window.URL) ? window.URL.createObjectURL(file) : window.webkitURL.createObjectURL(file);  
       myVid.src = url;  
       myVid.controls = true;  
       setTimeout("setCurrentTime('"+startTime+"')",200);  
    }  
  
    //设置视频开始播放事件  
    function setCurrentTime(startTime){  
        myVid.currentTime=startTime;  
        myVid.play();  
    }  
  
    function timeupdate(){  
        //因为当前的格式是带毫秒的float类型的如：12.231233，所以把他转成String了便于后面分割取秒  
        var time = myVid.currentTime+"";  
        document.getElementById("showTime").value=time;  
        var ts = time.substring(0,time.indexOf("."));  
        if(ts==_endTime){  
            myVid.pause();  
        }  
    }  
  
</script>  
</html>  

阅读全文

0 0