视频技术

FFmpeg red5 nginx Html5 rtsp rtmp

·您当前的位置：首页 > 技术教程 > Html5技术 >

[html5]视频播放器js控制vedio视频和分段播放

时间:2015-11-21 11:27酷播
js控制vedio视频和分段播放，[html5]视频播放器js控制vedio视频和分段播放

HTML5 js控制vedio视频和分段播放，有需要的朋友可以参考下。

jQuery网页跨平台媒体播放器

HTML5 vedio常用的js操作

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

html:

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

js:

  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事件

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

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

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
  2. <html> 
  3.   <head> 
  4.     <title>CuPlayer.com</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="CuPlayer.com,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.     //CuPlayer.com视频播放 
  38.     function playMedia(startTime,endTime){ 
  39.         //CuPlayer.com设置结束时间 
  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.     //CuPlayer.com设置视频开始播放事件 
  53.     function setCurrentTime(startTime){ 
  54.         myVid.currentTime=startTime; 
  55.         myVid.play(); 
  56.     } 
  57.  
  58.     function timeupdate(){ 
  59.         //CuPlayer.com因为当前的格式是带毫秒的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> 

 

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器