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

最新推荐文章于 2022-07-20 17:06:13 发布

huhuijun123

最新推荐文章于 2022-07-20 17:06:13 发布

阅读量408

点赞数

分类专栏： jquery 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/huhuijun123/article/details/84548495

版权

jquery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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" οnclick="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 οnclick="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>

huhuijun123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5 video使用，怎样截取正在播放的时间

http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp http://blog.1wanweb.com/post/Html5-Video.aspx &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Simple JavaScript...
复制链接

扫一扫

专栏目录