爲什麼背景視頻不顯示

我想將視頻背景添加到我的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，火狐，Chrome和IE，但沒有顯示:(

所以你知道我應該怎麼辦加載視頻？感謝！

來源

2016-07-21 Pouya

您可以參考這個。https://codepen.io/dudleystorey/pen/knqyK 希望這會可以幫助你。

你充分的源地址SRC？

<video autoplay poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" id="bgvid" loop> 
    <!-- WCAG general accessibility recommendation is that media such as background video play through only once. Loop turned on for the purposes of illustration; if removed, the end of the video will fade in the same way created by pressing the "Pause" button --> 
<source src="http://thenewcode.com/assets/videos/polina.webm" type="video/webm"> 
<source src="http://thenewcode.com/assets/videos/polina.mp4" type="video/mp4"> 
</video> 
<div id="polina"> 
<h1>Polina</h1> 
<p>filmed by Alexander Wagner 2011 
<p><a href="http://thenewcode.com/777/Create-Fullscreen-HTML5-Page-Background-Video">original article</a> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta dictum turpis, eu mollis justo gravida ac. Proin non eros blandit, rutrum est a, cursus quam. Nam ultricies, velit ac suscipit vehicula, turpis eros sollicitudin lacus, at convallis mauris magna non justo. Etiam et suscipit elit. Morbi eu ornare nulla, sit amet ornare est. Sed vehicula ipsum a mattis dapibus. Etiam volutpat vel enim at auctor.</p> 
<p>Aenean pharetra convallis pellentesque. Vestibulum et metus lectus. Nunc consectetur, ipsum in viverra eleifend, erat erat ultricies felis, at ultricies mi massa eu ligula. Suspendisse in justo dapibus metus sollicitudin ultrices id sed nisl.</p> 
<button>Pause</button> 
</div>

來源

2016-07-21 15:33:34 Priyanka

爲什麼背景視頻不顯示

回答

相關問題