video组件——禁用下载功能——基础积累

vidoe组件——禁用下载功能

有些官网上的视频是不允许下载的，为了防止视频被盗或者从事违法的活动。

因此我这边官网上使用video组件的时候，想用下面的方法来实现禁用下载功能。

在使用video组件来播放视频时，视频上会有操作按钮，按钮中会有下载，如果想要不展示这个下载按钮，可以通过下面的方法：

1.有下载按钮

2.没有下载按钮

实现方式如下：

3.实现方式

3.1 html页面代码

<video
          controls="controls"
          loop
          controlslist="nodownload noremoteplayback"
          ref="videoRef"
          v-if="showVideo"
          class="videoCls"
          src="https://jpfilexxxxxx1.oss-cn-shenzhen.aliyuncs.com/markting/%E5%8A%A0%E9%80%9F%E7%89%88%E7%B2%BE%E5%AF%86%E7%94%B5%E8%B7%AF%E6%80%BB%E6%88%90.mp4"
        ></video>

3.2 js部分代码

export default {
 data() {
    return {
      showVideo: false,
    };
  },
  methods: {
    toggleVideo() {
      this.showVideo = !this.showVideo;
      if (this.showVideo) {
        this.$nextTick(() => {
          var video = this.$refs.videoRef;
          video['disablePictureInPicture'] = true;
          this.$refs.videoRef.play();
        });
      }
    },
  },
}

完成！！！

不过这样只能是页面上隐藏，如果从控制台中拿到视频路径，还是可以下载下来的。所以还不是很完善。
完成！！！多多积累，多多收获！！！