blob类型视频测试（blob加密视频源地址）

 阿酷TONY / 原创 /2021-9-23

• blob类型视频调用，并不太适合用于纯mp4类视频文件；
• blob视频比较适合调用m3u8类分片索引视频。

Blob
Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作。 

Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。

要从其他非blob对象和数据构造一个 Blob，请使用 Blob() 构造函数。要创建一个 blob 数据的子集 blob，请使用 slice() 方法。要获取用户文件系统上的文件对应的 Blob 对象，请参阅 File 文档。

接受 Blob 对象的API也被列在 File 文档中。

注意：slice() 方法原本接受 length 作为第二个参数，以表示复制到新 Blob 对象的字节数。如果设置的参数使 start + length 超出了源 Blob 对象的大小，则返回从开始到结尾的所有数据。
注意：slice() 方法在某些浏览器和版本上带有浏览器引擎前缀：比如 Firefox 12 及更早版本的blob.mozSlice() 和 Safari 中的blob.webkitSlice()。 没有浏览器引擎前缀的老版本 slice() 方法有不同的语义，并且已过时。Firefox 30 取消了对 blob.mozSlice() 的支持。

构造函数
Blob(blobParts[, options])
返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
属性
Blob.size 只读
Blob 对象中所包含数据的大小（字节）。
Blob.type 只读
一个字符串，表明该 Blob 对象所包含数据的 MIME 类型。如果类型未知，则该值为空字符串。
方法
Blob.slice([start[, end[, contentType]]])
返回一个新的 Blob 对象，包含了源 Blob 对象中指定范围内的数据。
Blob.stream()
返回一个能读取blob内容的 ReadableStream。
Blob.text()
返回一个promise且包含blob所有内容的UTF-8格式的 USVString。
Blob.arrayBuffer()
返回一个promise且包含blob所有内容的二进制格式的 ArrayBuffer 

var video = document.getElementById("my-video");

        window.URL = window.URL || window.webkitURL; //用来判断电脑系统window.webkitURL和window.URL是一样的，window.URL标准定义，window.webkitURL是webkit内核的实现，一般手机上就是使用这个，还有火狐等浏览器的实现。
        var xhr = new XMLHttpRequest();  // 实现数据请求 进行http协议的通信
        var play_url = "test.mp4" //网上的视频地址
        **注意，大部分视频地址都有跨域问题，在服务器上应设置好跨域的问题方便前端请求使用**
        xhr.open("GET", play_url, true);  //打开一个地址，请求类型 地址 异步或同步 
        xhr.responseType = "blob";  // 设置返回值 为blob对象    
        xhr.onload = function (e) { //请求后要执行的函数
            if (this.status == 200) { //成功 
                var blob = this.response;  // 请求成功获取的参数 赋值给 “blob”
                console.log(blob);
                video.src = window.URL.createObjectURL(blob); //创建一个对象 视频只需要获取一次， 获取一次后，就需要释放这个对象。
                // video.onload = function () { //获取到video 后执行的函数 ？
                    // window.URL.revokeObjectURL(video.src); //释放这个对象
                // };
            }
        }
        xhr.send(); //发送请求

 

  blob加密视频源地址截图 1

 blob加密视频源地址截图 2

 [ 视频安全 ] 相关原创文章

• 教育教学类视频如何处理加密与安全（组图）
• 防止360浏览器小窗下载视频
• 视频安全之视频播放密码功能(设置观看密码功能教程)
• 视频安全之授权播放和防录屏跑马灯
• 企业级微信视频直播如何设定观看白名单（设定手机观看白名单、授权观看直播）
• 在线教育网站如何更好的实现视频安全视频保护？
• 免费视频二维码的完整使用教程（适合小企业做微信视频宣传） 
• Html5视频video标签中使用blob实现视频播放加密

[ 视频直播 ] 相关原创文章

• 云直播客户端4.0活动拍摄类直播与教学培训类直播测试
• 视频直播画中画效果（边角叠加、去背景、并列布局三种效果）
• 做视频直播时如何测试本地网络的上行带宽(网速测试)
• 在线导播台（网页导播台）混流效果
• 云课堂直播功能介绍，更贴合在线教育、企业内训的场景应用
• 微信公众号直播有哪些不一样的玩法？
• 企业年会活动常用的音频类、视频类工具软件

[ 视频存储与应用 ] 相关原创文章

• 企业网站如何插入第三方平台不带广告的宣传宣传片
• 最全的视频格式分类详解（那是相当的全面）
• FMS/wowza/red5/SRS流媒体服务器产品对比
• 无广告的免费视频存储空间并提供视频上传转码的功能，很不错的哦
• 说说视频编码格式、视频码率、视频帧率、分辨率的概念
• 免费视频存储平台（微云、百度网盘、谷歌硬盘、酷播云）的截图对比

[ 视频播放器 ] 相关文章

• HTML5倍数功能视频播放器（加速2倍，1.5倍播放）
• 去掉h5播放器中voide标签中的下载按钮
• blob用法实例:http地址的原理及生成方法
• 如何禁止视频在手机移动端页面中全屏播放

[ WebRTC ] 相关文章

• 企业级无延时直播来了，用了就回不去了（webRTC）
• rtmp直播和webrtc直播对比优劣何在?

[ 谷歌浏览器 ] 相关文章

• 谷歌5款插件推荐：谷歌工具类、翻译类扩展程序
• 10款好用的谷歌chrome浏览器插件、扩展程序，用起来很爽哦
• 提高效率：17款超赞的谷歌chrome浏览器插件、扩展程序

[ 微信公众号运营 ] 相关文章

• 公众号如何实现视频列表播放视频的功能
• 微信公众号推广的40个有效果的方法
• 在微信公众号中如何添加【自定义菜单】，原创图文教程
• 精心整理10个高逼格的优质素材（视频、图片）网站
• 在微信公众号中添加外部的链接图文教程
• 视频分享到微信完整教程（转发给微信好友、微信群、微信朋友圈）