2016-07-21 9 views
1

私は自分の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ファイルが表示されます。私は、オペラ、FirefoxやChromeとIE上で文書を開いたが、何も?ありがとう

だからあなたは、私がビデオをロードするために何をすべきかを知っています:(表示されません!

答えて

0

あなたはこれを参照することができます。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> 
関連する問題