全屏背景视频不自动播放答案

【问题标题】：Full-screen background video does not autoplay全屏背景视频不自动播放
【发布时间】：2014-03-19 15:34:56
【问题描述】：

我正在制作一个简单的网页，我希望第一个窗口有一个全屏播放视频。我试着像这样嵌入它：

<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。

【问题讨论】：

标签： html css html5-video fullpage.js

【解决方案1】：

请查看此链接： https://github.com/alvarotrigo/fullPage.js/issues/267

您将不得不为此使用回调 afterRender 或 afterLoad。

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

现在您还可以在插件的examples folder 中找到可供下载的示例。

【讨论】：

【解决方案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>

【讨论】：