vidoe组件——禁用下载功能

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

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

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

1.有下载按钮

2.没有下载按钮

实现方式如下：

3.实现方式

3.1 `html`页面代码

<videocontrols="controls"loopcontrolslist="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();});}},},
}

完成！！！

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

video组件——禁用下载功能——基础积累相关推荐

vue使用饿了么upload组件实现下载功能
使用upload组件实现下载功能组件结构 <el-uploadv-if="uploadShow":disabled="tru ...
浏览器点击pdf的链接——实现下载或预览功能——基础积累
最近在做后台管理系统时,遇到了一个需求,就是点击pdf链接时,需要实现文档的下载. 点击链接,通常就会用到a标签,将链接放在href参数中,点击时就会触发相应的事件了. 常规写法如下: <a : ...
antd vue实现日历功能——添加放假时间功能——基础积累
最近再写后台管理系统时,遇到一个需求,就是需要写一个日历,然后添加放假时间的功能. 需要实现的功能有: 日历表头需要设置为当前年份的前后两年,比如今年是2022年,则年份下拉中时间为 2021.202 ...
Html5页面video标签禁用下载视频
两处禁用. 1.video标签的禁用 <video >标签中加入 controlslist="nodownload" 2.播放器区域禁用鼠标右键: 页面加载完成,执行j ...
office 文档在线预览功能实现(word,excel,pdf,ppt等多种格式)——使用https://view.xdocin.com/view 提示文档过期——基础积累
web实现office文档在线预览功能--基础积累最近遇到一个需求,就是要实现多种文档链接的在线预览,最简单的方式就是通过window.open(url地址)的方式来实现. 但是如果要求是在一个弹窗 ...
h5禁用浏览器下载视频_【HTML5】video 标签禁用自带的下载按钮
h5自带的 video标签 ,会有个下载按钮,有时候想避免,就可以利用样式的方法 video::-internal-media-controls-download-button { display:n ...
android多线程下载原理,安卓多线程断点续传下载功能（靠谱第三方组件，原理demo）...
一,原生的DownloadManager 从Android 2.3(API level 9)开始,Android以Service的方式提供了全局的DownloadManager来系统级地优化处理长时间 ...
直播电商平台开发，video组件实现视频弹幕功能
直播电商平台开发,video组件实现视频弹幕功能发送弹幕 WXML文件代码如下:  <video class=" ...
js禁用浏览器 pdf 打印、下载功能（pdf.js 禁用打印下载、功能）
前端实现 pdf 预览方法 (1)用iframe标签src="文件地址"就可以直接打开,还可以设置width,height等属性.具体参考iframe属性. <iframe ...

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

vidoe组件——禁用下载功能

1.有下载按钮

2.没有下载按钮

3.实现方式

3.1 `html`页面代码

3.2 `js`部分代码

video组件——禁用下载功能——基础积累相关推荐

最新文章

热门文章

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

vidoe组件——禁用下载功能

1.有下载按钮

2.没有下载按钮

3.实现方式

3.1 html页面代码

3.2 js部分代码

video组件——禁用下载功能——基础积累相关推荐

最新文章

热门文章

3.1 `html`页面代码

3.2 `js`部分代码