插入标签

从 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 事件配合 currentTimeduration属性

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

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