HTML5视频背景和Safari玩得不好

safari遇到问题。由于某种原因，页脚会消失在视频下面，直到你将鼠标悬停在它应该在的位置。一旦你这样做了，它就会弹出到位并正常工作。要复制它，请将页脚移出视图，然后重新加载页面，或者单击backpage并单击back to home（返回主页）

在使用所有浏览器的多台Mac电脑（MacPro使用1080p显示器、Macbook Air和Macbook Pro）上进行了测试，视频在Opera、Chrome、Firefox甚至IE（parallels）中都能正常工作，但在safari中则不行。Windows机器在使用所有浏览器Chrome、Firefox、Opera和IE时都没有问题

视频背景被构建到WordPress网站上，使用下划线作为我正在构建的主题的基础

下面的网址是什么给我适合

以下是如何在HTML中设置背景：

<?php if(is_front_page() ) { ?>
    <div id="videoContainer">
        <video autoplay loop id="videoBackground" preload="auto">
            <source src="http://yokellocalhosting.com/freddy/wp-content/uploads/2014/03/Fabulous_Freddys_Background_MP4.mp4" type="video/mp4" />
            <source src="http://yokellocalhosting.com/freddy/wp-content/uploads/2014/03/Fabulous_Freddys_Background_OGG.ogg" type="video/ogg" />
            <source src="http://yokellocalhosting.com/freddy/wp-content/uploads/2014/03/Fabulous_Freddys_Background_WEBM.webm" type="video/webm" />
        </video>
    </div>
<?php } ?>

---

我知道我已正确设置了服务器的MIME类型。只是不知道问题是什么，为什么要这么做。

你是如何解决的？我找不到解决办法，我认为这是苹果在safari 7.X上实现Webkit的一个缺陷。作为一种解决方法，我使用浏览器检测来定位safari，并设置一个静态图像而不是视频。几周前我自己也遇到了同样的问题。我也做了同样的事情——嗅探了浏览器并禁用了笨重的旧Safari上不受支持的功能。看到苹果把webkit搞得一团糟，真令人失望。这是一个非常好的渲染引擎。

#videoContainer{
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 9;
    width: 100%;
    height: 100%;
}
#videoBackground{
    position: relative;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 9;
}