HTML5ビデオがロードされていません

私は現在、開発中のウェブサイトでビデオをバックグラウンドとして使用する方法を学んでいます。私が持っている問題は、私が実際にビデオを表示することができないということです。私はそれがフォルダに保存されている方法と関係があると信じていますが、ファイルにアクセスする複数の異なる方法を試した後も、表示することはできません。目標は、ビデオを「ビデオ」フォルダに保存してページの背景として表示させることです。私の質問は、これがうまくいかない要素は何か？私はCSSを数回調整するだけでなく、メインフォルダにファイルを移動しようとしました。両方とも結果は得られなかった。HTML5ビデオがロードされていません

以下のように私の現在の設定は次のとおりです。 File Hierarchy

backgroundVideo { 
 
    min-width: 100%; 
 
    min-height: 100%; 
 
    width: auto; 
 
    height: auto; 
 
    background: URL(images/resBackground.jpg); 
 
    background-size: cover; 
 
}

<body> 
 

 
    <video autoplay loop class="backgroundVideo"> 
 
     <source src="videos/resVideoBackground.mp4" type="videos/mp4"/>Your browser does not support the video tag! Please upgrade your broswer! 
 
     <source src="videos/resVideoBackground.webm" type="videos/webm"/>Your browser does not support the video tag! Please upgrade your broswer! 
 
     <source src="videos/resVideoBackground.ogv" type="videos/ogv"/>Your browser does not support the video tag! Please upgrade your broswer! 
 
     </video> 
 

 
</body>

どれ：

私のファイルは、この（私はまだ画像を埋め込むことができない、リンクについて謝罪）のように保存されていますビデオをどのように動かすかについての指導は大変ありがたいです！

出典

2017-05-11 wpursell

注：cssのクラスを参照するには '.backgroundVideo'を' .'と使用する必要があります –

あなたのサイトに私たちをリンクさせることはできますか？ブラウザのコンソールに何かエラーがありますか？ –

現在作業中のサイトはローカルにホストされていますが、現時点ではコンソールにエラーが表示されていません。 @MichaelCoker – wpursell

あなたのファイル階層と、CSSとHTMLからあなたのファイルを参照している方法は私にとってうまく見えます。

私はバットからすぐにいくつかのことが分かりました。 1つは、source要素には、video/mp4、video/webm、およびvideo/ogvという単数型があります。

バックグラウンドのビデオをウェブサイトに実装する際のもう1つの一般的な方法は、autoplay属性が嫌いなブラウザでそれらを「キック」する小さなJavaScriptを追加することです。たとえば、（あなたはこれが機能するためにあなたのvideo要素にid="backgroundVideo"を追加する必要があります）：

<script type="text/javascript"> 
    // Play the background video on Android devices that support the 
    // "canplay" event listener 
    var backgroundVideo= document.getElementById('backgroundVideo'); 
    backgroundVideo.addEventListener('canplay', function() { 
     backgroundVideo.play(); 
    }); 
</script>

が、私は体の一番最後に、いずれかの外部またはインライン、このスクリプト要素を追加します。

出典

2017-05-11 15:04:13 Treebasher

「video/mp4」、「video/webm」、または「video/ogv」のいずれかのソースタグを1つだけ持つことをお勧めしますか？それとも同じタイプの3つを持っていると言っていますか？また、私はscripts.jsファイルを作成し、 ''を使用して、閉じたbodyタグの直前にリンクしました。これはあなたが提案したものですか？ @Treebasher – wpursell

@Japurは正確ではありません。ブラウザが複数の異なるタイプの複数の 'source'要素を持つことで、ブラウザがどれが最適なものかを選択できるようになります。私は単純に、あなたの 'source'要素の' type'パラメータには、 'video'が複数ではないというタイプの型があると言っていました。はい、それは私が提案したものです:) – Treebasher

HTML5ビデオがロードされていません

答えて

関連する問題