HTML5背景视频全屏

Question

我正在尝试在我的网站中制作HTML5背景视频。但是我在IE和Google Chrome上遇到了一些问题。我已经制作了在线示例HERE

请问有谁能告诉我我的视频有什么问题吗？我发现在Google Chrome中是黑屏的，在IE中也没有反应。

CSS：

<section class="container-1140" id="mast" style="height: 775px;">

        <div style="overflow:hidden; background:url(http://riskeverything.us/wp-content/themes/risky/images/splash-home.jpg) no-repeat; background-size:cover;" id="mast_inner-1">

            <div id="mast_inner-2">

                <video loop="1" autoplay="1" id="mast_inner-2" class="_534g" style="display: block;" controls="true">

                    <source src="video/video.mp4"></source>
                    <source src="video/video.webmhd.webm"></source>
                    <img src="video/poster.jpg">

                </video>

            </div>

                </div>

    </section>

HTML是：

<section class="container-1140" id="mast" style="height: 775px;">

        <div style="overflow:hidden; background:url(http://riskeverything.us/wp-content/themes/risky/images/splash-home.jpg) no-repeat; background-size:cover;" id="mast_inner-1">

            <div id="mast_inner-2">

                <video loop="1" autoplay="1" id="mast_inner-2" class="_534g" style="display: block;" controls="true">

                    <source src="video/video.mp4"></source>
                    <source src="video/video.webmhd.webm"></source>
                    <img src="video/poster.jpg">

                </video>

            </div>

                </div>

    </section>

- Mohamed Samy

---

你尝试过类似 BigVideo.js 这样的东西吗？http://dfcb.github.io/BigVideo.js/ - Mahdi

在我的FreeBSD上，它在Chrome中可以运行。 - Rob

@Mahdi，我认为我们可以不用任何JS来完成它，请查看http://riskeverything.us/。 - Mohamed Samy

出于可访问性的原因，您不应该自动播放视频，无论是在后台还是前台。 - Tsundoku

Answer 1

你可以只使用CSS，这对大多数浏览器都有效。

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

}

- todoslocos

Answer 2

您可以使用这个插件。它很简单，可以解决您的任务。

- Ahmed el-Gendy

---

请勿仅发布链接作为答案。 - ajp15243

这与版权或插件有无无关，而与答案的内容有关。请阅读我在先前评论中链接到的 Meta Stack Overflow 问题的被接受的答案，了解为什么在 Stack Overflow 上不鼓励仅提供链接的答案。相同的信息在Stack Overflow 写好答案的帮助页面的“为链接提供上下文”部分中进行了总结。 - ajp15243

Answer 3

在Chrome中将z-index设置为-100，使其成为背景视频。

- user3137329

Answer 4

你需要在背景中设置想要的视频的嵌入ID。尝试这个：embed ID。

http://jsfiddle.net/bfvopg6p/

- devajay