html ＜video＞标签的使用方法

实例

<video ref="videoPlayer" :src="require('@/assets/videos/video.mp4')" autoplay="autoplay" muted="muted" width="500" height="400" controls="controls" loop="loop">
  您的浏览器不支持video标签
</video>
<!-- 也可以使用source标签引入视频 -->
<video ref="videoPlayer" autoplay="autoplay" muted="muted" width="500" height="400" controls="controls" loop="loop">
  <source :src="require('@/assets/videos/video.mp4')" type="video/mp4">
  您的浏览器不支持video标签
</video>

由于有的浏览器不支持部分视频格式，我们可以用source引用多个不同格式的视频，这样能够更好的提升用户体验度。

<video ref="videoPlayer" autoplay="autoplay" muted="muted" width="500" height="400" controls="controls" loop="loop">
  <source :src="require('@/assets/videos/video.mp4')" type="video/mp4">
  <source :src="require('@/assets/videos/video.ogg')" type="video/ogg">
  您的浏览器不支持video标签
</video>

视频格式的 MIME 类型

格式	MIME-type
MP4	video/mp4
WebM	video/webm
Ogg	video/ogg

可选属性

属性	值	描述	备注
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。	谷歌高版本浏览器不允许自动播放，除非设置muted属性。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。	使用第三方播放器时，不添加该属性，以便使用自定义控件
height	pixels	设置视频播放器的高度。	不建议使用，使用CSS替换
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。	无
muted	muted	如果出现该属性，视频的音频输出为静音。	只有设置这个属性视频才会自动播放
poster	URL	规定视频正在下载时显示的图像，直到用户点击播放按钮。	Poster建议分辨率：1280x720，以免在弱网环境下加载慢
preload	auto metadata none	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。	无
src	URL	要播放的视频的 URL。	使用流媒体格式时，显示blob:开头的URL
width	pixels	设置视频播放器的宽度。	不建议使用，使用CSS替换

自定义按钮控制视频播放/暂停、前进、后退、增大音量、减小音量

<template>
    <div class='videoPage'>
      <video ref="videoPlayer" autoplay="autoplay" muted="muted" width="500" height="400" controls="controls" loop="loop">
        <source :src="require('@/assets/videos/llama_video.mp4')" type="video/mp4">
        您的浏览器不支持video标签
      </video>
      <button @click="toPlay">播放/暂停</button>
      <button @click="toForward">前进</button>
      <button @click="toBack">倒退</button>
      <button @click="addVoice">增加音量</button>
      <button @click="decrease">减小音量</button>
    </div>
</template>

// 播放/暂停
toPlay(){
  this.$refs.videoPlayer.paused === true ? this.$refs.videoPlayer.play() : this.$refs.videoPlayer.pause()
},
// 前进
toForward(){
  var time = 10
  this.$refs.videoPlayer.volume !== this.$refs.videoPlayer.duration ? this.$refs.videoPlayer.currentTime += time : 1
},
// 倒退
toBack(){
  var time = 10
  this.$refs.videoPlayer.currentTime !== 0 ? this.$refs.videoPlayer.currentTime -= time : 1
},
// 增加音量
addVoice(){
  var vol = 0.1
  this.$refs.videoPlayer.volume !== 1 ? this.$refs.videoPlayer.volume += vol : 1
},
// 减小音量
decrease(){
  var vol = 0.1
  this.$refs.videoPlayer.volume !== 0 ? this.$refs.videoPlayer.volume -= vol : 1
}