阿酷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流媒体服务器产品对比
- 无广告的免费视频存储空间并提供视频上传转码的功能,很不错的哦
- 说说视频编码格式、视频码率、视频帧率、分辨率的概念
- 免费视频存储平台(微云、百度网盘、谷歌硬盘、酷播云)的截图对比