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);}

效果演示