html5用video标签流式加载的实现

这篇文章主要介绍了html5用video标签流式加载的实现，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

站在用户的角度思考问题，与客户深入沟通，找到珠山网站设计与珠山网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：成都网站建设、网站设计、企业官网、英文网站、手机端网站、网站推广、域名注册、虚拟空间、企业邮箱。业务覆盖珠山地区。

video标签

浏览器的video标签通常是接收一个src属性，然后浏览器就会根据这个src属性来自动加载视频。
这个过程是浏览器来加载video的。

这种方式有什么问题吗？

• mp4文件不能流式加载

• webm，flv，hls等格式兼容性问题

• 播放器ui太丑，一些常用的功能都没有

• 清晰度切换，等一些操作需要重载视频，比较慢而且还会黑屏

• 无法对视频加密

请求video流视频

我们可以通过设置responseType为arraybuffer来获取视频流，也可以通过range字段来获取视频流片段。比如

let xhr = new window.XMLHttpRequest();
xhr.responseType = 'arraybuffer'
xhr.open('get', 'http://www.w3school.com.cn/i/movie.mp4')
xhr.responseType = 'arraybuffer';
// xhr.setRequestHeader('Range', `bytes=0-390625`)
xhr.onload = function () {
    if (xhr.status === 200 || xhr.status === 206) {
        console.log(xhr.response)
    }
}
xhr.send();

或者fetch的arrayBuffer方法返回视频流。

 fetch(videoUrl).then(function(response) {
       return response.arrayBuffer();
 })

获取到的数据是什么呢？二进制的视频流。
获取这个有什么用呢？

video去播“流”

MediaSource

MediaSource简称mse，是h6的一个api，它允许通过js生成媒体流，让浏览器播放。

使用

我们通过 URL.createObjectURL来创建一个blob格式的视频文件，来给video标签播。
具体用法就是new MediaSource，然后根据这个MediaSource生成blob文件，然后向MediaSource中添加mime和视频流。