前言

公司做的都是些企业官网，后台管理系统，忽然让做个视频播放功能，需求禁止用户下载视频，我有点方。作为一个前端，看一些视频的时候，会首先看video标签的地址是不是能打开并下载的，但是大部分的视频都是ts文件流传回来的，这样又可以防止下载，又可以随时切换清晰度，很高级，但是我们不用这种方法，因为太高级了，今天我们来用blob加密来处理，这种加密多见于图片加密，视频当然也同理

一、blob

通过URL.createObjectURL()创建一个blob:http://开头的地址，createObjectURL的参数是一个Object对象，可以是File对象，blob对象，还有就是我们今天的主角，mediaSource对象

二、mediaSource

想具体了解mediaSource的可以看这位大佬的文章@Starkwang

三、后台处理

作为一个纯前端，这里不多介绍后台是怎么具体处理的，我只说明一下和后台说的要求

读取文件，做成流
将二进制流传到前台

四、代码展示

不多解释了好吧，上整套代码，仅供参考

1、后台代码

偷的我们公司的后台阿姨代码，仅供参考啊。

     FileInputStream in = null;OutputStream outputStream = null;response.setContentType("application/octet-stream;charset=UTF-8");try {//          String path = AstResourceManagementController.class.getClassLoader().getResource(astResourceManagement.getResourceUrl()).getPath();String path = Global.getConfig("file_path")+File.separator+astResourceManagement.getResourceUrl();in=new FileInputStream(path);int i=in.available();byte[]data=new byte[i];in.read(data);in.close();outputStream=new BufferedOutputStream(response.getOutputStream());outputStream.write(data);outputStream.flush();outputStream.close();} catch (Exception e) {e.printStackTrace();}

2、前台代码

1.无插件，纯H5

html

<video src="" id="video" controlslist="nodownload" controls></video>

js

        var video = document.querySelector('video');var assetURL = "${ctx}/getvideo?id=${id}"; //jsp内部写法，不必在意// 只需要改上边两个属性var mimeCodec = 'video/mp4;codecs="avc1.42E01E,mp4a.40.2"';if('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {var mediaSource = new MediaSource();video.src = URL.createObjectURL(mediaSource);//video.src改变会触发监听事件mediaSource.addEventListener('sourceopen', sourceOpen);} else {console.error('Unsupported MIME type or codec: ', mimeCodec);}function sourceOpen() {var mediaSource = this;var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);fetchAB(assetURL, function(buf) {sourceBuffer.addEventListener('updateend', function() {mediaSource.endOfStream();});sourceBuffer.appendBuffer(buf);});};function fetchAB(url, cb) {var xhr = new XMLHttpRequest;xhr.open('get', url);xhr.responseType = 'arraybuffer';xhr.onload = function() {cb(xhr.response);};xhr.send();};

2. 开源播放器插件

xgplayer.js 西瓜播放器插件

html

<div controls controlslist="nodownload" id="video-div"></div>

js

        var assetURL = "${ctx}/getvideo?id=${id}";// 只需要改上边两个属性var player = new Player({"id": "video-div","width":"100%","height":"100%",});var mimeCodec = 'video/mp4;codecs="avc1.42E01E,mp4a.40.2"';if('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {var mediaSource = new MediaSource();player.start(URL.createObjectURL(mediaSource))//video.src改变会触发监听事件mediaSource.addEventListener('sourceopen', sourceOpen);} else {console.error('Unsupported MIME type or codec: ', mimeCodec);}function sourceOpen() {var mediaSource = this;var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);fetchAB(assetURL, function(buf) {sourceBuffer.addEventListener('updateend', function() {mediaSource.endOfStream();});sourceBuffer.appendBuffer(buf);});};function fetchAB(url, cb) {var xhr = new XMLHttpRequest;xhr.open('get', url);xhr.responseType = 'arraybuffer';xhr.onload = function() {cb(xhr.response);};xhr.send();};

相关报错

 mediaSource.endOfStream()// 这段代码报一些类型等错误的话，尝试修改视频文件类型。

别想盗我视频之——blob加密+mediaSource防止用户下载视频相关推荐

怎么用python下载视频_使用Python从直接URL下载视频
我想用 python下载视频.我尝试使用youtube-dl,但不支持我想从中下载视频的网站.如何在 Python中下载视频.首先,我尝试在关注此链接 http://www.kmcgraphics.c ...
【海康视频SDK】linux服务器端截图与下载视频
任务描述: 给定海康摄像头的ip地址.端口.用户名.密码,要求能够在linux服务器端运行脚本,完成实时抓图,和下载近期1分钟视频的功能. 我尝试了但失败的方法: 在windows下跑通vs工程后, ...
怎样下载安装python编程软件视频_程序员如何利用Python下载视频？几串代码轻松搞定...
很多学生或者工作人员想要下载网络上的一些视频,但是苦于找不到合适的下载方法.无从下手. 首先,我这里用到的是Python代码.没想到又是Python吧.这次很简单,不需要复制和写代码. 首先,你先下载 ...
手把手教你用Python打造一款批量下载视频并能可视化显示下载进度的下载器
点击上方"Python爬虫与数据挖掘",进行关注回复"书籍"即可获赠Python从入门到进阶共10本电子书今日鸡汤桃之夭夭,灼灼其华. /1 前言/ ...
php 分隔视频,视频画面分割器怎么将视频画面分割成三部分?怎么分割视频画面并凸显部分?...
今天要介绍的视频画面分割器不是屏幕分割器怎么用,画面分割器使用说明,八画面视频分割器怎么用等问题哦,而是电脑视频画面分割器,可以对视频画面切割,解决视频分割器怎么用等问题哦!是将视频画面分割成上中下三 ...
如何使用python下载视频-使用Python从直接URL下载视频
我想用 python下载视频.我尝试使用youtube-dl,但不支持我想从中下载视频的网站.如何在 Python中下载视频.首先,我尝试在关注此链接 http://www.kmcgraphics.c ...
微信多媒体团队访谈：音视频开发的学习、微信的音视频技术和挑战等
内容概述腾讯多媒体内核中心高级研究员时永方接受了LiveVideoStack的邮件采访,谈及了个人成长中的关键时刻,学习多媒体开发的三点核心,以及在5G和高清时代下,微信多媒体团队面临的挑战. Q: ...
从零开始学爬虫系列4：快速下载视频
1 前言你知道的视频下载"姿势",有哪些吗? 本文绝对有你意想不到的玩法! 2 陈年往事视频下载,跟图片下载其实并无差别,甚至更简单. 玩过视频下载的,应该对「you-get」 ...
分享一个在线下载视频的网站
想下载一个视频,一直没有合适的办法,用土豆和pptv下载发现下载总是失败--PPTV下载的时候提示是保存路径错误,下载了一半就没法下载了,而用土豆下载完成后,却卡到了一个转码的界面,于是下载再次失败了 ...

别想盗我视频之——blob加密+mediaSource防止用户下载视频

文章目录

前言

一、blob

二、mediaSource

三、后台处理

四、代码展示

1、后台代码

2、前台代码

1.无插件，纯H5

html

js

2. 开源播放器插件

html

js

相关报错

别想盗我视频之——blob加密+mediaSource防止用户下载视频相关推荐

最新文章

热门文章