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 作為蘋果設備上的首選方案。


17年資歷女工程師,專精於動畫、影像辨識以及即時串流程式開發。經常組織活動,邀請優秀的女性分享她們的技術專長,並在眾多場合分享自己的技術知識,也活躍於非營利組織,辦理活動來支持特殊兒及其家庭。期待用技術改變世界。