视频技术

FFmpeg red5 nginx Html5 rtsp rtmp

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

[html5]html5视频标签实现指定时间点的播放与暂停

时间:2017-11-28 22:41酷播
[html5]html5视频标签实现指定时间点的播放与暂停

[html5]html5视频标签实现指定时间点的播放与暂停

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
  2. <html> 
  3.   <head> 
  4.     <title>video</title> 
  5.     <meta http-equiv="pragma" content="no-cache"> 
  6.     <meta http-equiv="cache-control" content="no-cache"> 
  7.     <meta charset="utf-8"> 
  8.   </head> 
  9.  
  10. <body> 
  11.     <div class="container"> 
  12.         <input type="button" value='10-13' onclick="playMedia(10,13)">第10秒开始-13秒时暂停 
  13.         <br > 
  14.         <br > 
  15.         <button onclick="playMedia(50,null)" type="button">从第50秒开始播放到结束</button> 
  16.         <input type="text" id="showTime"/> 
  17.         <br > 
  18.         <br > 
  19.         <video id="video1" autoplay="autoplay" controls=true src='http://www.amdcu.net/admin/data/admin/lm_data/lm_23781/story_content/video_5uVjEQZCagr_30_48_720x406.mp4'> 
  20.         </video> 
  21.     </div> 
  22.  
  23. </body> 
  24.  
  25. <script> 
  26.  
  27.     var myVid=document.getElementById("video1"); 
  28.     myVid.addEventListener("timeupdate",timeupdate); 
  29.  
  30.     var _endTime; 
  31.  
  32.     //视频播放 
  33.     function playMedia(startTime,endTime){ 
  34.         //设置结束时间 
  35.         _endTime = endTime; 
  36.         myVid.currentTime=startTime; 
  37.           myVid.play(); 
  38.     } 
  39.      
  40.     function timeupdate(){ 
  41.         //因为当前的格式是带毫秒的float类型的如：12.231233，所以把他转成String了便于后面分割取秒 
  42.         var time = myVid.currentTime+""; 
  43.         document.getElementById("showTime").value=time; 
  44.         var ts = time.substring(0,time.indexOf(".")); 
  45.         if(ts==_endTime){ 
  46.             myVid.pause(); 
  47.         } 
  48.          
  49.     } 
  50.  
  51. </script> 
  52. </html>  

 

热门文章推荐

请稍候...

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

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