### HTML
`src 與 source的區別`
-   source標籤可以寫多個，並指定type ,相容不同瀏覽器解碼支援。但src只能寫一個
-  source標籤的type屬性的屬性值有video/ogg，video/mp4，video/webm
```
<video id="leftVideo" controls="" loop="" muted="">
    <source src="http://blog.itpub.net/70013909/viewspace-2893216/xxx.mp4" type="video/mp4"><source>
</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)

web技術支援| 從視訊元素流式傳輸到視訊元素

相關文章