html5 video使用,怎样截取正在播放的时间

yaoliuwei 2014-04-13

http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp

 http://blog.1wanweb.com/post/Html5-Video.aspx

<!DOCTYPE html>
<html> <head>
 

    <title>Simple JavaScript Controller</title>
 <script src="jquery-1.4.2.min.js"></script>
 <script>
    
function init() {  
    document.video = document.getElementByIdx_x("video");  
    webm = document.getElementByIdx_x("webm");  
    init_events();  
   // init_properties();  
    //setInterval(update_properties, 1000);  
}  
function init_events(){  
if(true) { //监听video的各个属性  
    document.video.addEventListener();  
    }  
}
                          
        </script>              
        <script>
    
             var beginTime="";
      var endTime="";
            function record(){
                   Media =  document.video = document.getElementByIdx_x("video");  
                     beginTime = Media.currentTime;
                  $("#label1").html('<a href="javascript:stop();">停止</a>');
                  alert(beginTime);
                
                }
            function stop(){
                
                 endTime = Media.currentTime;
                 alert(endTime);
                $("#label1").html('<label>开始记录时间</label><input id="begin" type="text" value='+beginTime+'></input><label value="结束记录时间"/> <label>结束记录时间</label><input id="stop" type="text" value='+endTime+'></input><button type="button" onclick="send()">上传</button>');
                }
            
    </script>
        function send(){
        
        
        
        
        
        }
        
        
                  </head>
                           <body > <div class="video-player" align="center">
                               
    <video  controls="controls" id="video" >
  <source src="movie.ogg" type="video/ogg">
  <source src="战争背后.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
                               
                                <br><div id="label1"> <a href="javascript:record();">记录</a> </div>
                             
                 <br> </div>
                 </body>
                 </html>
 
 事例2:
<!DOCTYPE html>
<html>
<body>

<button onclick="hasVidEnded()" type="button">该视频播放是否已结束?</button>
<div id="time"></div>
<br />
<br />
<video id="video1" controls="controls">
  <source src="/example/html5/mov_bbb.mp4" type="video/mp4">
  <source src="/example/html5/mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

<script>
myVid=document.getElementById("video1");
setInterval(function(){
   if(myVid){
        document.getElementById("time").innerHTML=myVid.currentTime;
        if(myVid.currentTime>3){
              myVid.pause();// 3秒后暂停

         }
    }
},1000);
function hasVidEnded()
  {

  alert(myVid.ended);
  }
</script>

</body>
</html>
示例3:
<!DOCTYPE html>
 
<html>
 
  <head>
 
    <title>Simple JavaScript Controller</title>
 
    <script type="text/javascript">
 
  
 
       function playPause() {
 
       var myVideo = document.getElementsByTagName('video')[0];
 
       if (myVideo.paused)
 
           myVideo.play();
 
       else
 
           myVideo.pause();
 
       }
 
  
 
       function makeBig() {
 
       var myVideo = document.getElementsByTagName('video')[0];
 
       myVideo.height = (myVideo.videoHeight * 2 ) ;
 
       }
 
  
 
       function makeNormal() {
 
       var myVideo = document.getElementsByTagName('video')[0];
 
       myVideo.height = (myVideo.videoHeight) ;
 
       }
 
  
 
    </script>
 
  </head>
 
  
 
  <body>
 
     <div class="video-player" align="center">
 
      <video src="myMovie.m4v" poster="poster.jpg" ></video>
 
      <br>
 
      <a href="javascript:playPause();">Play/Pause</a> <br>
 
      <a href="javascript:makeBig();">2x Size</a> |
 
      <a href="javascript:makeNormal();">1x Size</a> <br>
 
     </div>
 
  </body>
 
</html>
 
 
 
 

相关推荐

Kingcxx / 0评论 2020-03-07