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) {