web技术支持| 从视频元素流式传输到视频元素

HTML

src 与 source的区别

• source标签可以写多个，并指定type ,兼容不同浏览器解码支持。但src只能写一个
• source标签的type属性的属性值有video/ogg，video/mp4，video/webm

<video id="leftVideo" controls loop muted>
    <source src="./xxx.mp4" type="video/mp4"/>
</video>
<video id="rightVideo" autoplay></video>

获取音频元素

• getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。
• 如果没有指定 ID 的元素返回 null
• 如果存在多个指定 ID 的元素则返回第一个。

const leftVideo = document.getElementById('leftVideo');
const rightVideo = document.getElementById('rightVideo');

监听canplay事件

提示该视频已准备好开始播放：

• 接口的captureStream()属性 HTMLMediaElement]返回一个MediaStream对象&#