短视频开发:防止视频被下载
短视频紧跟时事热点与我们的生活息息相关,我们也发布自己相关的视频到平台,分享记录自己的生活,保留乐趣,但是随之而来就会发现有视频盗用的情况,那就需要我们在短视频开发时保留禁止视频下载的功能。
1,短视频开发video禁用下载功能
<video controlslist="nodownload"></video>
2,短视频开发隐藏鼠标右键,禁止复制链接
document.oncontextmenu = function () { return false; }
3,短视频开发使用云点播等第三方播放控件,最好的话设置一下防盗链
4,短视频开发使用blob视频流加密的形式
部分浏览器,如qq浏览器会拦截video标签获取到播放链接,当用户鼠标移如播放器时会出现下载字样,为了解决这一问题,我们采用blob视频流的形式进行加密;
目前市面上采用这种方式的比较多:比如哔哩哔哩,西瓜视频等,如图:
BLOB :二进制大对象,是一个可以存储二进制文件的容器。Video 使用 blob 二进制流需要前后端同时支持。
拿到blob对象后,再通过URL.createObjectURL生成临时地址,赋值给video标签的src属性,这样就可以了。但其实可以直接从服务端接收二进制对象,就是服务端把视频文件转换成二进制对象,通过接口给到前端,前端再生成dom string。
其中,在浏览器端也提供了BLOB相关的API,通过new Blog(…)生成blog对象。
前端获取这个blob对象后,的操作如下;
jq写法:
let xhr = new XMLHttpRequest() xhr.open('GET', 'http://localhost:3001/video', true) xhr.responseType = 'blob' xhr.onload = function(e) { if (this.status === 200) { // 获取blob对象 let blob = this.response console.log(blob) // 获取blob对象地址,并把值赋给容器 $("#my-video").attr("src", URL.createObjectURL(blob)); } } xhr.send()
js原生写法:
<script type="text/javascript"> var video = document.getElementById("my-video"); window.URL = window.URL || window.webkitURL; var xhr = new XMLHttpRequest(); var play_url = 'test.mp4'; xhr.open("GET", play_url, true); xhr.responseType = "blob"; xhr.onload = function() { if (this.status == 200) { var blob = this.response; console.log(blob); video.onload = function(e) { window.URL.revokeObjectURL(video.src); }; video.src = window.URL.createObjectURL(blob); } } xhr.send(); </script>
5,短视频开发视频切片加密
这个时候我们会用到视频分片处理。
试想一下,如果我们把视频切成一段一段的,每次只加载一段,看完了再加载一段,这样能有效的节省资源。
还是以B站的一个视频为例,在F12中的Network里可以看到,网站一直在一段一段的请求视频流的数据。(PS:这个m4s是HTML的一种格式)
切片加密原理:将视频从MP4文件切片成多个ts文件,并使用AES-128对每一片视频进行加密,最后生成m3u8文件。这里我们需要用到ffmpeg。
以上就是 短视频开发:方式视频被下载,更多内容欢迎关注之后的文章。