Question

我在wordpress上建立一个网站，我试图通过我的仪表板上传一个mp4视频文件，但我无法这样做。所以我只是通过我的filezilla上传。然后我做了一点风格，在我处理了自动播放之类的东西之后，我尝试使用我的Chrome浏览器，当我发现它不起作用时。奇怪的是，这个视频可以从所有其他浏览器中显示：firefox，safari和opera。更奇怪的是，在http://caniuse.com/上，我发现确实这种扩展应该由chrome支持。这是我的代码：

 <div class="video-container">
                <video autoplay loop id="bgvid">
                    <source src="<?php bloginfo('template_directory'); ?>/images/ChickapeaRecipesPageHeader3.mp4" type="video/mp4"> 
                </video>
            </div>

这里是css：

video#bgvid { 
    position: relative;
    width: 100%;
}
.video-container {
    width: 100%;
    max-height: 400px;
    overflow: hidden;
    z-index: -100;
}

和bootstrap作为框架。

为什么它没有显示在chrome上？

更新：

以下是视频所在网页的链接：http://chickapea.larchedigitalmedia.com/recipes/

另一个更新：

有两个主要问题：我添加了另一种格式和图像以便创建后备，以防浏览器不支持mp4（我下载了一个名为free mp4 converter的mac应用来解决问题事实上我的视频是一个m4v，即使它有一个mp4扩展名，即使在那种情况下它也没有工作）所以现在它在谷歌浏览器上可见，但它在我的手机上看不到（android - nexus 5x ）。所以我真的不知道它发生了什么（我的手机无法显示视频，当我向下滚动时，我对视频的元素产生了奇怪的影响， div里面有一个h2）。

我的代码现在是：

<div class="out">
                    <div id="in">
                        <h2>Chickapea Blog</h2>
                    </div>
                </div>
            <div class="video-container">
                <video autoplay loop id="bgvid">
                    <source src="<?php bloginfo('template_directory'); ?>/images/ChickapeaRecipesPageHeader.webm" type='video/webm;codecs="vp8, vorbis"'/>
                    <source src="<?php bloginfo('template_directory'); ?>/images/ChickapeaRecipesPageHeader.mp4" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/>
                    <img src="<?php bloginfo('template_directory'); ?>/images/background-faq.jpg" title="Your browser does not support the <video> tag">
                </video>
            </div>

而css是：

.recipes .out {
    text-align: center;
    z-index: 2;
    position: absolute;
    width: 60%;
    height: 29%;
    margin-left: 20%;
    margin-right: 20%;
    top: 50%;
    border: 3px solid white;
}
.recipes #in {
    position: relative;
    width: 80%;
    height: 70%;
    margin-left: auto;
    margin-right: auto;
    top: 15%;
    background-color: rgba(141,198,63,0.6);
    padding: 4%;
}
.recipes #in h2 {
    font-family: 'Knewave', cursive;
    color: white;
}

视频：

video#bgvid { 
    position: relative;
    width: 100%;
}
.video-container {
    width: 100%;
    max-height: 400px;
    overflow: hidden;
    z-index: -100;
}

Answer 1

视频实际上在移动设备上可见，但由于内置移动浏览器过滤器，您无法自动播放视频，因为它可能会消耗蜂窝数据的带宽。在移动设备上播放视频的唯一方法是使用用户交互，这意味着如果用户想要观看它们，则必须单击播放按钮，当然如果他们不在WiFi上，则消费他们的蜂窝数据。也就是说，当我访问您的网站时，我能够在我的iPhone上看到视频播放器，但由于您的z-index值，我无法点击播放。您应该增加移动设备上视频容器的z-index堆栈顺序，以便用户可以单击播放按钮，或者将视频容器替换为移动设备上的图像或滑块，这是大多数网站所做的，包括Airbnb.com， paypal.com等。你可以用@media类做到这一点。

Answer 2

适用于CSS

.bgvideo{
        position:fixed;
        right:0;
        bottom:0;
        min-width: 100%;
        min-height: 100%;
        width:auto;
        height:auto;
        z-index: -989; 
        -webkit-filter: brightness(.5);
        filter: brightness(.5);

}

HTML中的

<video autoplay loop muted class="bgvideo">
    <source src="<?php bloginfo('template_directory'); ?>/images/ChickapeaRecipesPageHeader.mp4" type="video/mp4">
</video>

我没有编解码器。运行此代码，如果它工作，然后自定义。这是完整背景视频。

为什么我无法在Chrome上显示mp4视频？

2 个答案: