用video标签流式加载

最新推荐文章于 2025-05-10 01:50:18 发布

dingbenji5337

最新推荐文章于 2025-05-10 01:50:18 发布

阅读量1.6k

点赞数

文章标签： c# 前端 ui ViewUI

原文链接：http://www.cnblogs.com/saysmy/p/10701396.html

版权

本文探讨了video标签加载视频的问题，包括mp4的非流式加载、格式兼容性和UI限制。通过设置responseType为arrayBuffer获取视频流，并利用MediaSource API实现流式播放，详细介绍了如何创建和操作MediaSource来处理视频流，实现自定义功能。对于不支持流式加载的mp4格式，提出了自处理流播放的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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';
//

最低0.47元/天解锁文章