MSE(Media Source Extensions)介紹

什麼是MSE？

媒體源擴展（Media Source Extensions, MSE）是一項由W3C制定的網頁API標準，旨在通過JavaScript動態生成和控制媒體流，從而實現無插件且基於Web的流媒體播放功能。MSE允許開發者將媒體數據源附加到HTMLMediaElement（如<audio>和<video>標籤），並動態地為這些元素構建媒體源

MSE的主要功能

動態媒體流構建：MSE允許開發者使用JavaScript動態地創建和控制媒體流，這意味著可以根據需要動態加載和播放媒體數據，而不需要預先下載整個文件。
自適應比特率流：MSE是實現自適應比特率流（如DASH和HLS）的基礎，這些技術允許根據網絡條件自動調整視頻質量，以提供最佳的觀看體驗。
多種媒體格式支持：MSE支持多種媒體容器和編解碼格式，常見的包括H.264視頻編碼、AAC音頻編碼和MP4容器格式。

MSE的應用場景

點播影片：MSE 可以用於點播影片服務，允許使用者在觀賞過程中動態加載不同解析度的影片片段，以適應不同的網路狀況。
直播影片：MSE 也支援直播影片流，雖然在即時性要求較高的應用中（例如視訊通話），MSE 可能不如 WebRTC 那麼合適。
自訂媒體播放：開發者可以利用 MSE 建立自訂的媒體播放器，實現更靈活的控制與功能，例如自訂緩衝策略及錯誤處理機制。

MSE的優勢

動態加載：MSE允許根據需要動態加載媒體數據，減少了初始加載時間和帶寬消耗。
自適應流媒體：MSE支持自適應比特率流媒體技術，如MPEG-DASH和HLS，提供更好的用戶體驗。
高效緩衝管理：開發者可以精細控制緩衝區，實現更高效的媒體播放。

如何使用MSE

1. 確認瀏覽器支援度，可以使用以下JavaScript進行檢查：

if ('MediaSource' in window) {
    console.log('MSE is supported');
} else {
    console.log('MSE is not supported');
}

2. 創建MediaSource對象

創建一個MediaSource對象並將其附加到<video>元素上：

<video id="videoElement" controls></video>
<script>
    var video = document.getElementById('videoElement');
    var mediaSource = new MediaSource();
    video.src = URL.createObjectURL(mediaSource);
</script>

3. 處理sourceopen事件

mediaSource.addEventListener('sourceopen', function() {
    var sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
    fetchAndAppendSegments(sourceBuffer);
});

4. 獲取和附加媒體片段

使用fetch API或其他方法來獲取媒體片段，並將其附加到SourceBuffer中：

function fetchAndAppendSegments(sourceBuffer) {
    fetch('path/to/video/segment.mp4')
        .then(response => response.arrayBuffer())
        .then(data => {
            sourceBuffer.appendBuffer(data);
        });
}

5. 處理緩衝更新

sourceBuffer.addEventListener('updateend', function() {
    if (mediaSource.readyState === 'open') {
        fetchAndAppendSegments(sourceBuffer);
    }
});

MSE的瀏覽器支持度

請見此：https://caniuse.com/mediasource

一直以來有低延遲需求的高分發直播需求都會很困擾iPhone對MSE的不支援

但是好消息!!!

Safari 17.1 brings the new Managed Media Source API to iPhone

https://www.radiantmediaplayer.com/blog/at-last-safari-17.1-now-brings-the-new-managed-media-source-api-to-iphone.html

蘋果公司的 Safari 17.1 更新為 iPhone 帶來了新的 Managed Media Source API (MSS)，這是 Media Source Extensions (MSE) 的進化版本，旨在提供更好的電池效能和網絡優化。

Safari 17.1 的更新標誌著蘋果對 iPhone 的 Managed Media Source API 支持，這是一項長期以來由流媒體行業所期待的功能。MSS 是 MSE 的進化，旨在提供更高效的流媒體體驗，並且在 iOS 上的支持意味著現有的視頻播放器需要從 MSE 遷移到 MSS。MSS 允許瀏覽器更多地控制流媒體的邏輯和設備能力檢測，這些以往由視頻應用程序處理。蘋果強調 MSS 在電池消耗和網絡效率方面的優勢，尤其是在 5G 網絡下。儘管如此，蘋果仍然建議在 Safari 中僅支持蘋果設備的開發者優先使用原生 HLS。Radiant Media Player 已在測試 MSS 的過程中，並計劃添加對 iPhone Safari 中 MSS 的支持，同時保留原生 HLS 作為蘋果設備上的首選方案。

Claire's Blog