全屏背景視頻不會自動播放

Question

我正在製作一個簡單的網頁，並且我希望第一個窗口具有全屏播放視頻。我試圖把它嵌入到這樣的：

<div class="section active"> 
<video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0"> 
<source src="videos/Space.mp4" type="video/mp4"> 
<source src="videos/Space.webm" type="video/webm"> 
Video not supported 
</video> 

和

#video_background { 
    position: absolute; 
    bottom: 0px; 
    right: 0px; 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
    z-index: 69; 
    overflow: hidden; 
} 

第一幀顯示出來，但它並沒有開始播放。這些文件位於適當的位置。爲什麼會這樣呢？如果它有任何區別，我正在使用fullPage.js。

Answer 1

請檢查此鏈接： https://github.com/alvarotrigo/fullPage.js/issues/267

你將不得不利用回調afterRender或afterLoad它的。

$.fn.fullpage({ 
    afterRender: function(){ 
     $('#video')[0].play(); 
    } 
}); 

現在，你還可以找到一個可用的例子在插件的examples folder下載。

Answer 2

試試這個

<div class="section active"> 
<video id="video_background" autoplay loop muted preload="auto"> 
<source src="videos/Space.mp4" type="video/mp4"> 
<source src="videos/Space.webm" type="video/webm"> 
Video not supported 
</video>