插入标签

从 HTML5 开始引入了 <video> 和 <audio> 两个标签在网页中插入视频音频。JS 同样可以操控多媒体的播放。这里主要提到视频：

  1. <!-- controls 标志性属性主要用于让视频出现控制面板-->
  2. <video src="..." controls></video>

属性和方法

大部分属性取值都为 boolean

  • controls：显示控制面板
  • autoplay：自动播放，现在的浏览器只允许在静音模式下自动播放
  • loop：循环播放
  • muted： 静音
  • autobuffer：自动缓冲
  • volume：设置音量，取值 0-1

  • poster：设置视频的封面，没有播放时可以显示一张图。音频没有该属性

    <video src="..." controls poster="XX.jpg"></video>

  • duration：查看该多媒体的总时长，单位为秒

  • currentTime：获取多媒体当前所播放的具体时间，单位为秒

    video.currentTime += 10;    // 控制视频播放快进 10 s

  • playbackRate：设置播放倍速，1 为正常速度播放

    video.playbackRate = 4;    // 4 倍速度播放

    事件

  1. play()：播放多媒体
  2. pause()： [pɔːz] 暂停
  3. volumechange()：调整多媒体音量
  4. requestFullscreen()：全屏

一个最简单的视频播放、暂停功能

<video src="..." controls id='video'></video>
<!-- 功能操作区域 -->
<div id='btnGroup'>
  <input type="button" value='播放' id='playBtn'>
  <input type="button" value='暂停' id='pauseBtn'>
</div>
<script>
  btnGroup.onclick = function (event) {
    switch (event.target.id) {
        // 播放按钮
      case 'playBtn':
        video.play();
        break;
        // 暂停按钮
      case 'pauseBtn':
        video.pause();
        break;
    }
  }
</script>

获取时长

想要获取到视频总时长或当前播放时长，通过 video.ontimeupdate 事件配合 currentTime 和 duration属性

// video 是视频多媒体元素元素节点
video.ontimeupdate = function () {
  let currentTime = parseInt(video.currentTime);// 获取当前时间
  let duration = parseInt(video.duration);  // 获取视频总时长
}

更多：多媒体所有属性方法