網站特定部分的移動檢測

Question

我是網絡開發的初學者，我在解決這個問題時遇到了麻煩。

我拍攝了一段視頻，並將其編碼成一個mp4文件和一個ism文件。我有兩個不同的視頻標籤 - 一個會播放每個文件。對於我正在處理的網站，如果在移動設備上查看網站，我希望它使用其中一個視頻標記，如果不是，則另一個。目前該網站是HTML5。感謝您給予的任何幫助！

Answer 1

，你既可以使用基於UserAgent的檢測來決定要顯示的內容（不推薦，因爲你必須保持它）或canPlayType()與您所使用的瀏覽器是否支持它（更好的選擇）編解碼器

Answer 2

的視頻標籤已經支持備用來源。文章here描述瞭如何爲視頻包含多個源（因爲某些瀏覽器不支持某些編解碼器）。像這樣：

<video width="320" height="240" controls> 
    <source src="movie.mp4" type="video/mp4"> 
    <source src="movie.ogg" type="video/ogg"> 
Your browser does not support the video tag. 
</video> 

對於移動臺檢查，你可以使用JavaScript CSS媒體查詢：

function isMobile() { 
    return window.matchMedia("(max-width: 320px)"); 
} 

見this article