video标签渲染视频,禁用下载,且不暴露视频地址

32 阅读1分钟

主要有俩个步骤

  1. 运用controls来展示操作栏,用controlsList="nodownload"禁用下载。
  2. 将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>