全屏背景視頻無法自動播放

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文件夾中找到可用的示例以下載。

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>