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

WEB前端 waitig 991℃ 百度已收录 0评论

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

HTML5 vedio常用的js操作

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

html:

[html] view
plain copy

  1. <input type="file" id="file" onchange="setMediaFile()">  
  2. <video id="video1" autoplay="autoplay" controls="none" ></video>  

js:

[javascript] view
plain copy

  1. var myVid=document.getElementById("video1");  
  2.   
  3. function setMediaFile() {  
  4.    var file = document.getElementById(‘file’).files[0];  
  5.    if(!file){  
  6.     alert("Please upload file.");  
  7.     return false;  
  8.    }  
  9.    var url = (window.URL) ? window.URL.createObjectURL(file) : window.webkitURL.createObjectURL(file);  
  10.    document.getElementById("video1").src = url;  
  11. }  

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

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

3、监听视频播放事件

给视频添加timeupdate事件

[html] view
plain copy

  1. myVid.addEventListener("timeupdate",timeupdate);  
  2.     function timeupdate(){  
  3.         //do something…  
  4.     }  

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

[html] view
plain copy

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  2. <html>  
  3.   <head>  
  4.     <title>tttt</title>  
  5.     <meta http-equiv="pragma" content="no-cache">  
  6.     <meta http-equiv="cache-control" content="no-cache">  
  7.     <meta http-equiv="expires" content="0">      
  8.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
  9.     <meta http-equiv="description" content="This is my page">  
  10.     <meta charset="utf-8">  
  11.   </head>  
  12.   
  13. <body>  
  14.     <div class="container">  
  15.         <input type="file" id="file" onchange="playMedia(5,10)">第5秒开始-10秒时暂停  
  16.         <br >  
  17.         <br >  
  18.         <button onclick="setCurrentTime(7)" type="button">从第7秒开始播放</button>  
  19.              
  20.         <input type="text" id="showTime"/>  
  21.         <br >  
  22.         <br >  
  23.         <video id="video1" autoplay="autoplay" controls >  
  24.         </video>  
  25.           
  26.     </div>  
  27.   
  28. </body>  
  29.   
  30. <script>  
  31.   
  32.     var myVid=document.getElementById("video1");  
  33.     myVid.addEventListener("timeupdate",timeupdate);  
  34.   
  35.     var _endTime;  
  36.   
  37.     //视频播放  
  38.     function playMedia(startTime,endTime){  
  39.         //设置结束时间  
  40.         _endTime = endTime;  
  41.        var file = document.getElementById("file").files[0];  
  42.        if(!file){  
  43.         alert("请指定视频路径");  
  44.         return false;  
  45.        }  
  46.        var url = (window.URL) ? window.URL.createObjectURL(file) : window.webkitURL.createObjectURL(file);  
  47.        myVid.src = url;  
  48.        myVid.controls = true;  
  49.        setTimeout("setCurrentTime(‘"+startTime+"’)",200);  
  50.     }  
  51.   
  52.     //设置视频开始播放事件  
  53.     function setCurrentTime(startTime){  
  54.         myVid.currentTime=startTime;  
  55.         myVid.play();  
  56.     }  
  57.   
  58.     function timeupdate(){  
  59.         //因为当前的格式是带毫秒的float类型的如:12.231233,所以把他转成String了便于后面分割取秒  
  60.         var time = myVid.currentTime+"";  
  61.         document.getElementById("showTime").value=time;  
  62.         var ts = time.substring(0,time.indexOf("."));  
  63.         if(ts==_endTime){  
  64.             myVid.pause();  
  65.         }  
  66.     }  
  67.   
  68. </script>  
  69. </html>  


本文由【waitig】发表在等英博客
本文固定链接:HTML5中js控制video视频和分段播放
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (0)分享 (0)