jquery - HTML5视频。网络无法按预期在Safari上运行

Question

我正在为客户制作简单的登录页面。这是我第一次使用html5视频。

我在不同的浏览器上进行了测试，除了在Safari，iphone和itable中使用外，它都可以正常工作。

视频代码非常简单：

<div class="containerVideo">
    <div class="BtnVidMuteOff" onclick="javascript:Mute(this);">

    </div>
    <div class="BtnVidPlayOn" onclick="javascript:Play(this);">

    </div>
    <video autoplay loop poster="zima/media/VidAlarma.png" id="video">

        <source src="zima/media/VidAlarma.webm" type="video/webm" />
        <source src="zima/media/VidAlarma.mp4" type="video/mp4" />
        <source src="zima/media/VidAlarma.ogv" type="video/ogg" />
    </video>
</div>

和我的CSS：

video#video {
    position: relative; 
    right: 0; 
    top: 0;
    max-width: 100%;
    width: 100%;      
    z-index: -100;    
    background: url(../media/VidAlarma.png) no-repeat;
    background-size: cover;
    background-color:#fff;
    display:block;

}
.contenedorVideo {
    position:relative;
    top:-20px;
    overflow: hidden;
    width:100%;
    height:auto;
} 

您可以在以下临时URL上查看网络：http://www.tualarmasincuotas.es/paginas/video-presentacion。

我不在乎视频是否不会在野生动物园，ipad或iphone中显示，只要您可以看到“海报”图像，并且看起来像在任何android设备上一样。 （如预期）。没错，我看不见。

随着时间的流逝，关于如何解决此问题的任何帮助都会令人感激不已，而且我似乎找不到任何有效的解决方案。任何带有媒体查询，javascript，jquery，css3的解决方案都非常受欢迎。

在此先感谢您，我的英语不好。

Answer 1

您期望它做什么？到底是什么错误而不起作用？

自动播放无法在大多数移动设备上使用，因为没有人希望视频能够自动下载并在其潜在的昂贵网络上播放。但是总的来说，自动播放视频是个坏主意。

循环的支持不是很好。

我建议为video元素设置以下内容，因为它倾向于通过浏览器（尤其是WebKit，它执行某些愚蠢的操作）来解决问题：

video {
   width: 100%;
   height: auto;
}