針對不同視口的HTML5媒體查詢視頻（斷點不工作）

我是新來的stackoverflow，我需要一些HTML5和CSS3的幫助，因爲我是響應式設計/媒體查詢的新手。（我已經使用論壇搜索，但我無法找到我的問題的答案。）針對不同視口的HTML5媒體查詢視頻（斷點不工作）

我想爲不同的視口顯示不同的視頻。難道你們幫我解決以下HTML代碼：

video { 
 
\t width:100%; 
 
\t height:auto; 
 
}

<div id="vid-container"> 
 
    <video id="video" controls> 
 
     <source src="vid/video1.mp4" type="video/mp4" media="all and (min-width: 1024 px)"> 
 
     <source src="vid/video1.webm" type="video/webm" media="all and (min-width: 1024 px)"> 
 
     <source src="vid/video2.mp4" type="video/mp4" media="all and (max-width: 1023 px)"> 
 
     <source src="vid/video2.webm" type="video/webm" media="all and (max-width: 1023 px)"> 
 
    </video> 
 
</div>

謝謝你們了很多提前有益的竅門，技巧和答案。乾杯！

來源

2015-10-19 Pat

寬度查詢拼寫錯誤。在每個「px' –

前刪除空格感謝您的輸入。我已經嘗試刪除空間，但 - 不知何故 - 它仍然無法正常工作。你有其他想法嗎？ – Pat

現在不行。你能把這個片段變成一個完整的工作例子嗎？它目前只顯示黑屏，並且很難看到斷點是否被這種方式擊中！此外，你正在測試什麼瀏覽器和/或平臺？ –

要爲視頻創建不同的質量設置，通常會看到「媒體」屬性包含在源標籤中（可能嵌套在視頻標籤中;如上）。 注意力：這不是由W3C推薦的，也不是由某些瀏覽器（如Google Chrome）支持的。不同的視頻質量設置可以通過使用JavaScript來實現：Chrome not respecting video source inline media queries

來源

2015-10-19 22:49:51 Pat

針對不同視口的HTML5媒體查詢視頻（斷點不工作）

回答

相關問題