HTML5 video 标签的部分操作

2022-05-30 19:18:48

<!DOCTYPE HTML>
<html lang="en-US">
<head>
   <meta charset="UTF-8">
   <title></title>
   <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
   <script type="text/javascript">
       $(function(){
           var video = document.getElementById("video");
           alert("duration："+video.duration+",volume:"+video.volume);
           $("#btnPlay").click(function(){
               video.volume = 0.5;
               video.play();
               var time = setInterval(function(){
                   $("#btnTime").val("剩余时间是："+Math.ceil(video.duration-video.currentTime)+" 秒");
               },1);
               var intval = setInterval(function(){
                   if(video.ended){
                       clearInterval(intval);
                       clearInterval(time);
                       alert("视频播放完毕");
                   }
               },1);

           });
           $("#btnPause").click(function(){
               video.pause();
           });
           $("#btnMute").click(function(){
               video.muted = true;
           });
           $("#btnCurrentTime").click(function(){
               alert("当前播放了："+video.currentTime+" 秒");
           });

       });
   </script>
   <style type="text/css">
       video{cursor:pointer;}
   </style>
</head>
<body>
   <video src="Moo-O.mp4" id="video" controls>
   </video>
   <input type="button" value="播放" id="btnPlay" />
   <input type="button" value="暂停" id="btnPause"/>
   <input type="button" value="静音" id="btnMute"/>
   <input type="button" value="播放时间" id="btnCurrentTime" />
   <input type="button" value="剩余时间" id="btnTime" />
</body>
</html>

HTML5 video 标签的部分操作

码农公寓

相关文章