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假设您错过了“和”，Safari假设您错过了逗号。因此，无论设备宽度如何，只要您拥有一个屏幕，该规则就会触发，并且您的视频为display:none。

你可以通过像这样输入“和”来修复它：

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

Html5视频，除了只播放音频的Safari外，效果很好

1 个答案: