直接上代码

<div style="padding-top:56.25%" >
    <video style="width:100%;height:672px;position: absolute;bottom: 0;right: 0;"
		:src="视频地址"
		:poster="视频封面海报图地址"
		webkit-playsinline
		playsinline
		preload="load"
		controls="controls">
    </video>
</div>

video标签有下载按钮要想避免，在标签里面加controlsList="nodownload"，即：

<div style="padding-top:56.25%" >
    <video style="width:100%;height:672px;position: absolute;bottom: 0;right: 0;"
		:src="视频地址"
		:poster="视频封面海报图地址"
		webkit-playsinline
		playsinline
        controlsList="nodownload"
		preload="load"
		controls="controls">
    </video>
</div>

用video就不需要多余的js方法去监控键盘事件，直接上面这一串代码就行。但是跟键盘控制vue-video-player一样也必须选中视频区域pc端才能实现这一效果，相比之下这个好一点的就是移动端不需要另写js方法，移动端也适用，只是pc端移动端表现形式不一样而已。

html video官方文档链接     HTML <video> 标签 | 菜鸟教程

补充一点：触发视频暂停播放事件给标签定义一个名字，直接上代码

<div style="padding-top:56.25%" >
    <video style="width:100%;height:672px;position: absolute;bottom: 0;right: 0;"
		ref="videoPlayer"
		:src="视频地址"
		:poster="视频封面海报图地址"
		webkit-playsinline
		playsinline
        controlsList="nodownload"
		preload="load"
		controls="controls">
    </video>
</div>

this.$refs.videoPlayer.pause()// 暂停
this.$refs.videoPlayer.play()// 播放

js监听视频播放事件；参考vue如何实现对video的监听？_zlting~的博客-CSDN博客_vue 监听videohttps://blog.csdn.net/sunshineting2/article/details/107080661

	mounted() {
		this.$refs.videoPlayer.addEventListener('play', this.handlePlay)
	},
	methods：{
		handlePlay() {
			this.$refs.videoPlayer.play()
		},
	},

这个有个弊端，在ipad上在微信浏览器中没有倍速显示，我在开发的项目中需要在各种浏览器都有倍速，所以就弃用了，去用的daplyer插件，移步看我另一个播放视频控件

vue引用DPlayer播放器_唐屁屁儿的博客-CSDN博客_dplayer集成vue

这个插件没有快进快退音量调节需要必须选中视频区域问题，个人觉得比vue-video-player和h5 video 这俩好用