video 元素自定义 controls 控件以及常用事件、方法

<video
  id="video"
  src="@/assets/test.mp4"
  autoplay
  muted
  controls
  controlsList="nodownload"
>您的浏览器不支持 video 标签。</video>

可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。

属性参考

隐藏控件

当 video 标签添加上 controls 属性时，页面上会显示出所有的控制组件。若有些组件不需要只需要在 css 中设置相关属性把它隐藏掉即可。

// 全屏按钮
video::-webkit-media-controls-fullscreen-button {
  display: none;
}
//播放按钮
video::-webkit-media-controls-play-button {
  display: none;
}
//进度条
video::-webkit-media-controls-timeline {
  display: none;
}
//观看的当前时间
video::-webkit-media-controls-current-time-display {
  display: none;
}
//剩余时间
video::-webkit-media-controls-time-remaining-display {
  display: none;
}
//音量按钮
video::-webkit-media-controls-mute-button {
  display: none;
}
// 画中画
video::-webkit-media-controls-toggle-closed-captions-button {
  display: none;
}
//音量的控制条
video::-webkit-media-controls-volume-slider {
  display: none;
}
//所有控件
video::-webkit-media-controls-enclosure {
  display: none;
}

隐藏播放器右下角三个点

右下角的三个点，里面包含下载和画中画，最新版谷歌浏览器还新增了播放速度按钮。

去除的方法是给 video 元素设置属性 controlsList="nodownload noplaybackrate" 以及属性 disablepictureinpicture。只有下载、画中画和播放速度全部隐藏右下角的三个点才会消失。

自定义播放速度

通过 video 的 playbackRate 属性自定义播放速度。

// 获取video节点
const video = this.$refs.videoPlayback;

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

阻止默认的全屏和暂停

video 加上 controls 属性后默认双击屏幕全屏显示、单击屏幕暂停和开始播放视频。可以通过禁止 click 事件的默认行为来阻止这两种行为，给 video 原素加上 @click.prevent="() => {}"即可。

或者：

const video= document.getElementById("video");

video.addEventListener("click", () => {
	// 阻止视频默认点击事件
	event.preventDefault()
}, false);

自定义全屏播放

// 全屏播放
function fullscreenFun() {
  const ele = document.getElementById('video');
  if (ele.requestFullscreen) {
    ele.requestFullscreen();
  } else if (ele.mozRequestFullScreen) {
    ele.mozRequestFullScreen();
  } else if (ele.webkitRequestFullScreen) {
    ele.webkitRequestFullScreen();
  }
}

requestFullscreen 等 API 的用法参考 MDN

常用事件

const video = document.getElementById('video')

// 1、loadstart：视频查找。当浏览器开始寻找指定的音频/视频时触发，也就是当加载过程开始时
video.addEventListener('loadstart', function(e) {
  console.log('提示视频的元数据已加载')
  console.log(e)
  console.log(video.duration)            // NaN
})

// 2、durationchange：时长变化。当指定的音频/视频的时长数据发生变化时触发，加载后，时长由 NaN 变为音频/视频的实际时长
video.addEventListener('durationchange', function(e) {
  console.log('提示视频的时长已改变')
  console.log(e)
  console.log(video.duration)           // 528.981333   视频的实际时长（单位：秒）
})

// 3、loadedmetadata ：元数据加载。当指定的音频/视频的元数据已加载时触发，元数据包括：时长、尺寸（仅视频）以及文本轨道
video.addEventListener('loadedmetadata', function(e) {
  console.log('提示视频的元数据已加载')
  console.log(e)
})

// 4、loadeddata：视频下载监听。当当前帧的数据已加载，但没有足够的数据来播放指定音频/视频的下一帧时触发
video.addEventListener('loadeddata', function(e) {
  console.log('提示当前帧的数据是可用的')
  console.log(e)
})

// 5、progress：浏览器下载监听。当浏览器正在下载指定的音频/视频时触发
video.addEventListener('progress', function(e) {
  console.log('提示视频正在下载中')
  console.log(e)
})

// 6、canplay：可播放监听。当浏览器能够开始播放指定的音频/视频时触发
video.addEventListener('canplay', function(e) {
  console.log('提示该视频已准备好开始播放')
  console.log(e)
})

// 7、canplaythrough：可流畅播放。当浏览器预计能够在不停下来进行缓冲的情况下持续播放指定的音频/视频时触发
video.addEventListener('canplaythrough', function(e) {
  console.log('提示视频能够不停顿地一直播放')
  console.log(e)
})

// 8、play：播放监听
video.addEventListener('play', function(e) {
  console.log('提示该视频正在播放中')
  console.log(e)
})

// 9、pause：暂停监听
video.addEventListener('pause', function(e) {
  console.log('暂停播放')
  console.log(e)
})

// 10、seeking：查找开始。当用户开始移动/跳跃到音频/视频中新的位置时触发
video.addEventListener('seeking', function(e) {
  console.log('开始移动进度条')
  console.log(e)
})

// 11、seeked：查找结束。当用户已经移动/跳跃到视频中新的位置时触发
video.addEventListener('seeked', function(e) {
  console.log('进度条已经移动到了新的位置')
  console.log(e)
})

// 12、waiting：视频加载等待。当视频由于需要缓冲下一帧而停止，等待时触发
video.addEventListener('waiting', function(e) {
  console.log('视频加载等待')
  console.log(e)
})

// 13、playing：当视频在已因缓冲而暂停或停止后已就绪时触发
video.addEventListener('playing', function(e) {
  console.log('playing')
  console.log(e)
})

// 14、timeupdate：目前的播放位置已更改时，播放时间更新
video.addEventListener('timeupdate', function(e) {
  console.log('timeupdate')
  console.log(e)
})

// 15、ended：播放结束
video.addEventListener('ended', function(e) {
  console.log('视频播放完了')
  console.log(e)
})

// 16、error：播放错误
video.addEventListener('error', function(e) {
  console.log('视频出错了')
  console.log(e)
})

// 17、volumechange：当音量更改时
video.addEventListener('volumechange', function(e) {
  console.log('volumechange')
  console.log(e)
})

// 18、stalled：当浏览器尝试获取媒体数据，但数据不可用时
video.addEventListener('stalled', function(e) {
  console.log('stalled')
  console.log(e)
})

// 19、ratechange：当视频的播放速度已更改时
video.addEventListener('ratechange', function(e) {
  console.log('ratechange')
  console.log(e)
})

常用属性和方法

const video = document.getElementById('video');

// 暂停、播放
video.play()
video.pause()

// 静音
video.muted = true
video.muted = false

// 切换视频
video.src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
video.load()