爲什麼我無法在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視頻？

回答

相關問題