Html5視頻，工作正常，除了Safari只有音頻播放

Question

我似乎有一個問題，特別是Safari的視頻拒絕播放，而是隻播放音頻。

的代碼非常簡單

<video id="bgvid" preload="auto"> 
       <source src="video.m4v" type="video/mp4" /> 
       <source src="video.webm" type="video/webm" /> 
       <source src="video.ogv" type="video/ogg" /> 
      </video> 

另一個奇怪的事情是，如果我直接瀏覽視頻，它起着罰款。有任何想法嗎？

Answer 1

的問題似乎是與你的CSS媒體查詢這裏：

@media only screen (max-device-width : 1024px) { 
    video#bgvid{display:none;} 
    .mobile-vid {display:block !important; position:absolute;overflow:hidden;z-index: -1;} 
} 

按照media query syntax guide on MDN，當你有一個規則的多個條件，你需要加入這些條件「和」或一個逗號。 「和」顯然意味着「和」。「逗號的意思是「或」。我的猜測是瀏覽器不同地處理你的語法錯誤。 Chrome假定您錯過了「and」，Safari假定您錯過了逗號。因此，無論設備寬度如何，規則都會觸發規則，並且您的視頻是display:none。

@media only screen and (max-device-width : 1024px) {