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

### 效果演示

![image.png](https://img-blog.csdnimg.cn/img_convert/3a33f91a5d03528aa368748c18230b17.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/9abe00c9d1d841c9bcea6ea54ad9a43c.jpeg#pic_center)

ITPub博客

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

最新文章