背景视频为何不显示

时间:2016-07-21 15:22:13

标签: html css video

我正在尝试为HTML文档添加视频背景。我在Youtbue上看到了关于如何做到这一点的教程..我复制了所有内容并添加到我的文档中,包含视频等必要文件,但问题是它没有加载我的视频。这是我的文档的完整代码:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Video Background</title>



<style>

video#bgvid{
    min-width:100%;
    min-height:100%;
    width:auto;
    height:auto;
    background: url(the_desert-wide2.png) no-repeat top center; /* replace **image link** with your own file*/
    background-size:cover;
     -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

</style>


</head>

<body>

<video id="bgvid" autoplay poster="img/bg.png"> <!-- replace **image link** with your own file -->

<source src="video.ogv" type="video/ogv" /><!-- replace **video link** with your own file -->

<source src="video.webm" type="video/webm" /><!-- replace **video link** with your own file -->

<source src="video.mp4" type="video/mp4" /><!-- replace **video link** with your own file -->

</video>
</body>
</html>

根本不会显示视频,而是显示bg.png文件。我在Opera,Firefox,Chrome和IE上打开了文档,但没有显示任何内容:(

所以你知道我应该怎么做才能加载视频吗?谢谢!

1 个答案:

答案 0 :(得分:0)

你可以参考这个。 https://codepen.io/dudleystorey/pen/knqyK 希望这会对你有所帮助。

您是否在src中提供了完整的源地址?

<25