Html5 video 标签 src 用数据流方式播放视频
传统上,我们使用 <video>
标签的 src
属性直接指向一个视频文件的 URL,浏览器就会加载并播放这个视频。但是,在某些场景下,我们可能需要直接从服务器获取视频数据,然后在浏览器端进行播放,这就是数据流播放视频。
数据流播放视频的好处:
<video id="myVideo" controls></video>
const video = document.getElementById('myVideo');
// 创建 XMLHttpRequest 对象
const xhr = new XMLHttpRequest();
xhr.open('GET', '/video/stream'); // 替换为你的后端接口地址
xhr.responseType = 'arraybuffer'; // 设置响应类型为 ArrayBuffer
xhr.onload = function() {
const blob = new Blob([this.response], { type: 'video/mp4' }); // 替换为你的视频类型
const url = URL.createObjectURL(blob);
video.src = url;
video.play();
};
xhr.send();
代码解释:
arraybuffer
,表示接收二进制数据。onload
事件中,将接收到的二进制数据转换为 Blob 对象。MediaSource
接口的支持程度不同,需要进行兼容性处理。通过数据流播放视频,我们可以实现更加灵活、高效的视频播放体验。但是,这种方式也需要考虑更多的技术细节,如浏览器兼容性、性能优化等。在实际应用中,需要根据具体的业务需求选择合适的方式。
建议:
src
属性指定视频 URL 即可。希望这个回答能帮助你更好地理解 HTML5 video 标签使用数据流播放视频。
如果你还有其他问题,欢迎随时提问!