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

我正在建立一个WordPress的网站，我试图通过我的仪表板上传一个MP4视频文件，但我无法这样做。所以我只是通过我的filezilla上传。然后，我尝试了一下自动播放和类似的东西，然后在我的Chrome浏览器上尝试了一下，发现它不起作用。奇怪的是，这个视频可以从所有其他浏览器显示：firefox，safari和opera。更奇怪的是，在http://caniuse.com/我发现确实这个扩展应该由铬支持。这里是我的代码：为什么我无法在Chrome上显示mp4视频？

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

和引导作为一个框架。

任何线索为什么它不显示在铬？

UPDATE：

这里是网页的链接，该视频是：http://chickapea.larchedigitalmedia.com/recipes/

另一个更新：

主要有两个问题：我又增加了格式和图像，以创建一个后备，以防浏览器不支持MP4（我下载了一个称为免费MP4转换器的应用程序，以解决这个事实，即我的视频是一个m4v，即使它有一个mp4扩展，即使在这种情况下没有工作），所以现在它可以在谷歌浏览器中看到，但它在手机上不可见（android - nexus 5x）。所以我并不知道它是怎么回事（我的手机无法显示视频，当我向下滚动时，视频中显示的元素有一种奇怪的效果，一个内部带有h2的div ）。

我的代码现在是：

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

来源

2016-05-18 Marco Maffei

什么是视频的完整文件路径？ – user1724434

http://chickapea.larchedigitalmedia.com/recipes/ –

@MarcoMaffei我可以在Chrome中看到视频。 –

对于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>

我做到了无编解码器。运行此代码如果它工作然后自定义。这是全背景视频。

来源

2016-05-20 17:13:29 ihemant360

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

来源

2016-05-19 17:03:33 user1724434

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

回答

相关问题