别想盗我视频之

2024-07-05 13:04| 来源: 网络整理| 查看: 265

在这里插入图片描述

文章目录前言一、blob二、mediaSource三、后台处理四、代码展示1、后台代码2、前台代码1.无插件，纯H5htmljs 2. 开源播放器插件htmljs 相关报错

前言

公司做的都是些企业官网，后台管理系统，忽然让做个视频播放功能，需求禁止用户下载视频，我有点方。作为一个前端，看一些视频的时候，会首先看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() // 这段代码报一些类型等错误的话，尝试修改视频文件类型。

【本文地址】

公司简介

联系我们