别想盗我视频之 |
您所在的位置：网站首页 › uc浏览器如何使用迅雷下载视频 › 别想盗我视频之 |
别想盗我视频之
|
公司做的都是些企业官网，后台管理系统，忽然让做个视频播放功能，需求禁止用户下载视频，我有点方。作为一个前端，看一些视频的时候，会首先看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 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 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() // 这段代码报一些类型等错误的话，尝试修改视频文件类型。 |
【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |