video视频播放，play()、pause()、duration时长、onended播放结束

最新推荐文章于 2025-03-11 15:20:24 发布

唐策

最新推荐文章于 2025-03-11 15:20:24 发布

阅读量1.5w

点赞数

分类专栏： video 文章标签： video视频播放，play()、pause()、durat

本文链接：https://blog.csdn.net/qq_29132907/article/details/81485389

版权

video 专栏收录该内容

4 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<button class="gonext"> 播放</button>
<button class="gonext1"> 暂停</button>
<button class="getTime">获取总时长<span></span></button>
  <video webkit-playsinline="true" x-webkit-airplay="true" playsinline="true" x5-video-player-type="h5" id="video" src="video01.mp4" onended="myFunction()"></video>
  <script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
  <script type="text/javascript">
  // 音频播放结束
    function myFunction(){  
      setTimeout(function(){
        console.log("videoTime")
      },0);
    }
    $(function(){
      // 播放
      $(".gonext").click(function(){
        $("video")[0].play();
      })
      // 暂停
      $(".gonext1").click(function(){
        $("video")[0].pause();
      })
      // 音频播放结束事件
      /*$("video").on('ended', function() {
        setTimeout(function(){
          console.log("videoTime")
        },0);
      })*/
      //获取视频的总时长
      $(".getTime").click(function(){
        var videoTime=Math.floor($("video")[0].duration); 
        console.log(videoTime)
      })
    })
  </script>
</body>
</html>