视频技术

FFmpeg red5 nginx Html5 rtsp rtmp

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

[HTML5]js做视频标签分段播放源代码参考

时间:2017-11-28 22:34酷播
[HTML5]js做视频标签分段播放源代码参考

[HTML5]js做视频标签分段播放源代码参考

  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>   

来源 http://blog.csdn.net/tuposky/article/details/41488403

热门文章推荐

请稍候...

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

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