Html5 视频，除了只播放音频的 Safari 之外，工作正常答案

【问题标题】：Html5 video, works fine except in Safari where only audio playsHtml5 视频，除了只播放音频的 Safari 之外，工作正常
【发布时间】：2014-07-24 16:02:55
【问题描述】：

我似乎在 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>

另一个奇怪的事情是，如果我直接浏览视频，它可以正常播放。有什么想法吗？

【问题讨论】：

标签： jquery html video-streaming html5-video h.264

【解决方案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，当您有多个规则条件时，您需要使用“and”或逗号连接这些条件。 “和”显然是“和”的意思。逗号表示“或”。我的猜测是浏览器处理您的语法错误的方式不同。 Chrome 假设您错过了一个“and”，而 Safari 假设您错过了一个逗号。因此，只要您有屏幕，无论设备宽度如何，并且您的视频为 display:none，都会触发该规则。

你可以像这样在里面加上一个“and”来修复它：

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

【讨论】：

很棒的家伙，工作起来就像一个魅力，但这是一个多么奇怪的错误。