響應式網頁設計 - 在iPad上顯示視頻

Question

我有一個關於響應式網頁設計的簡單問題。基本上，我有這將在計算機上運行視頻的代碼：

<object width="480" height="360"> 
<param name="allowScriptAccess" value="sameDomain"></param> 
<param name="allowFullScreen" value="true"></param> 
<embed src="FileLocationAndName.mp4" width="560" height="469" allowscriptaccess="sameDomain" 
allowfullscreen="true" type="application/x-shockwave-flash"></embed> 
</object> 

和這個代碼，它將在iPad上運行它。

<video width="480" height="360" x-webkit-airplay="allow" controls="true" 
autoplay="autoplay"> 
<source src="FileLocationAndName.mp4/playlist.m3u8" type="video/mp4" /> 
</video> 

代碼正常爲每（我刪除了實際的文件位置了，所以如果它看起來不正確，這就是原因。）我只需要每塊顯示相應的機器上，並且隱藏在對面塊頁。搜索「響應式網頁設計」正在迴歸自己的​​博客，瞭解爲什麼RWD要麼是革命性的，要麼是完全浪費時間。

我只是需要它的工作。我需要包括什麼？我可以用CSS或其他方法做到嗎？顯示：無;還是一些這樣的？ （我不想寫&保持第二個網站。）

感謝您的幫助！

Answer 1

是的。使用媒體查詢來檢測瀏覽器的寬度。可以使用媒體查詢來檢測iPad（快速谷歌搜索應該會告訴你如何）。然後，就像你說的那樣，在你想隱藏的東西上使用display: none;。因此，例如，將class="desktop"添加到您的桌面視頻中，並將class="ipad"添加到您的iPad視頻中。在iPad媒體查詢中，您將有.desktop { display: none; }和.ipad { display: block; }。媒體查詢之外，您將有.ipad { display: none; }和.desktop { display: block; }。我希望這是有道理的。您還可以考慮使用更通用的視頻插件，如VideoJS。