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;
}

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

我不在乎视频是否在safari，ipad或iphone中显示，只要你能看到“海报”图片，它就像在任何Android设备上一样。（如预期）。对那个我什么都看不见。

任何有关我如何解决这个问题的帮助都会得到很好的解释，因为我已经没时间了，我似乎无法找到任何可行的解决方案。任何有媒体查询，javascript，jquery，css3 ...的解决方案都非常受欢迎

提前致谢并原谅我可怜的英语。

Answer 1

你有什么期望呢？什么是错误的，不起作用？

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

循环并非得到很好的支持。

我建议为视频元素设置以下内容，因为它倾向于通过浏览器修复内容（特别是WebKit，它做了一些愚蠢的事情）：

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

HTML5视频。 Web没有按预期在Safari上工作

1 个答案: