主要有俩个步骤
- 运用controls来展示操作栏,用controlsList="nodownload"禁用下载。
- 将vue-router传过来的视频地址,转化为blob
<template>
<div>
<video id="playBackUrl" width="100%" height="100%" controls controlsList="nodownload">
<source :src="url" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</template>
<script>
export default {
name: 'livePage',
data() {
return {
url: ''
}
},
mounted() {
//将视频地址转化为blob,用于禁止下载
//this.$router.params.url 获取vue-router传过来的视频地址
this.url = URL.createObjectURL(this.$route.params.url)
},
}
</script>