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


<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Documenttitle>
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>

video视频播放,play()、pause()、duration时长、onended播放结束_第1张图片

你可能感兴趣的:(video)