加载中…
个人资料
微博
  • 博客等级：
  • 博客积分：
  • 博客访问：
  • 关注人气：
  • 获赠金笔：0支
  • 赠出金笔：0支
  • 荣誉徽章：
正文 字体大小：大 中 小

HTML5 vedio常用的js操作视频切片

(2017-10-25 16:53:00)

HTML5 vedio常用的js操作

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

html:

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


js:

 

[javascript] view plain copy
  1. var myVid=document.getElementByIdx_x("video1");  
  2.   
  3. function setMediaFile() {  
  4.    var file = document.getElementByIdx_x('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.getElementByIdx_x("video1").src = url;  
  11. }  


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

 

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

3、监听视频播放事件

给视频添加timeupdate事件

http://s14/mw690/001A1RGCzy7eQFoo4SFed&690vedio常用的js操作视频切片" TITLE="HTML5 vedio常用的js操作视频切片" />

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



 

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

 

[html] view plain copy
  1. >  
  2. <</span>html>  
  3.   <</span>head>  
  4.     <</span>title>tttt</</span>title>  
  5.     <</span>meta http-equiv="pragma" content="no-cache">  
  6.     <</span>meta http-equiv="cache-control" content="no-cache">  
  7.     <</span>meta http-equiv="expires" content="0">      
  8.     <</span>meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
  9.     <</span>meta http-equiv="description" content="This is my page">  
  10.     <</span>meta charset="utf-8">  
  11.   </</span>head>  
  12.   
  13. <</span>body>  
  14.     <</span>div class="container">  
  15.         <</span>input type="file" id="file" onchange="playMedia(5,10)">第5秒开始-10秒时暂停  
  16.         <</span>br >  
  17.         <</span>br >  
  18.         <</span>button onclick="setCurrentTime(7)" type="button">从第7秒开始播放</</span>button>  
  19.              
  20.         <</span>input type="text" id="showTime"/>  
  21.         <</span>br >  
  22.         <</span>br >  
  23.         <</span>video id="video1" autoplay="autoplay" controls >  
  24.         </</span>video>  
  25.           
  26.     </</span>div>  
  27.   
  28. </</span>body>  
  29.   
  30. <</span>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.         ;  
  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.getElementByIdx_x("showTime").value=time;  
  62.         var ts = time.substring(0,time.indexOf("."));  
  63.         if(ts==_endTime){  
  64.             myVid.pause();  
  65.         }  
  66.     }  
  67.   
  68. </</span>script>  
  69. </</span>html>  



喜欢

0

阅读┊ 收藏 ┊ 喜欢▼ ┊打印┊举报/Report
  

新浪BLOG意见反馈留言板　欢迎批评指正

新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 产品答疑

Copyright © 1996 - 2022 SINA Corporation, All Rights Reserved

新浪公司 版权所有