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

<!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>

这里写图片描述

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页