JavaScript 檢查 MSE 兼容

隨著 HTML5 視頻播放的流行，視頻編解碼器也隨之變得更加豐富多樣。其中，MSE(Material Stream Extensions) 的出現為瀏覽器提供了一種動態加載視頻片段的方式，相當于是 HTTP 2.0 協議在視頻領域的應用。但是，并不是所有的瀏覽器都支持 MSE，因此我們需要使用 JavaScript 來檢查瀏覽器是否支持 MSE，從而提供更好的用戶體驗。

通常來說，MSE 主要受以下兩個方面的限制：

1. 瀏覽器限制：MSE 尚未被所有的主流瀏覽器支持，需要特別注意。

2. 編碼器限制：MSE 所支持的視頻編碼格式有限，具體支持的編碼器可以通過瀏覽器的兼容性指南進行查看。

下面，我們通過代碼來判斷瀏覽器是否支持 MSE。

if (window.MediaSource) {
var isMSESupported = true;
} else {
var isMSESupported = false;
}
if (isMSESupported) {
console.log("瀏覽器支持 MSE");
} else {
console.log("瀏覽器不支持 MSE");
}

上述代碼首先檢查是否存在 window.MediaSource 對象，如果存在則代表瀏覽器支持 MSE，反之則代表瀏覽器不支持 MSE。

需要注意的是，雖然瀏覽器可能支持 MSE，但是并不一定支持某個具體的編碼器。因此，我們還需要檢查是否支持當前使用的編碼器。

var mediaMimeType = "video/mp4; codecs=\"avc1.4d401e\"";
if (MediaSource.isTypeSupported(mediaMimeType)) {
console.log("瀏覽器支持該編碼器");
} else {
console.log("瀏覽器不支持該編碼器");
}

上述代碼中，我們首先指定了視頻的類型及對應的編碼器，然后使用 MediaSource.isTypeSupported() 函數來檢查是否支持該編碼器。

除了以上兩種判斷方式，我們還可以用 canPlayType() 函數來檢查瀏覽器是否支持當前編碼器。代碼如下：

var videoElement = document.createElement("video");
var mediaMimeType = "video/mp4; codecs=\"avc1.4d401e\"";
if (videoElement.canPlayType(mediaMimeType)) {
console.log("瀏覽器支持該編碼器");
} else {
console.log("瀏覽器不支持該編碼器");
}

上述代碼中，我們創建了一個 video 元素，并使用 canPlayType() 函數來檢查瀏覽器是否支持當前編碼器。

需要注意的是，canPlayType() 函數不僅可以用于檢查 MSE 是否支持當前編碼器，還可以用于檢查瀏覽器是否支持特定的視頻格式、音頻格式等。

綜上所述，通過 JavaScript 檢查 MSE 兼容性，我們可以在不同瀏覽器中提供更為一致的視頻播放體驗，從而提高用戶的滿意度。