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对象，该对象正在流式传输媒体元素中呈现的内容的实时捕获。

• 由于Chrome和Firefox的兼容性问题，Firefox浏览器中获取媒体流的方法和Chrome不同，不能通过videoElement.captureStream()获取，而是通过videoElement.mozCaptureStream()获取。

• HTMLMediaElement 接口的 srcObject 属性设定或返回一个对象，这个对象提供了一个与HTMLMediaElement关联的媒体源，这个对象通常是 MediaStream ，但根据规范可以是 MediaSource， Blob 或者 File。

leftVideo.addEventListener('canplay', () => {
  let stream;
  const fps = 0;
  if (leftVideo.captureStream) {
    stream = leftVideo.captureStream(fps);
  } else if (leftVideo.mozCaptureStream) {
    stream = leftVideo.mozCaptureStream(fps);
  } else {
    console.error('Stream capture is not supported');
    stream = null;
  }
  rightVideo.srcObject = stream;
});

CSS

calc() 函数用于动态计算长度值。

• 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
• 任何长度值都可以使用calc()函数进行计算；
• calc()函数支持"+", "-", "*", "/"运算；
• calc()函数使用标准的数学运算优先级规则；

video {
    margin: 0 10px 0 0;
    width: calc(30% - 7px);
}

效果演示