ビデオの背景のみ再生1ビデオ

Question

私はウェブサイトを構築しており、フルスクリーンのビデオ背景を実装しました。問題は、次のビデオを再生することができないということです。それは最初に見られるビデオのみを再生します。私は勝つことのない他のビデオフォーマットを試しました。助けてください！

/*CSS*/ 
 

 
video#full-screen { 
 
      position: absolute; 
 
      right: 0; 
 
      bottom: 0; 
 
      min-width: 100%; 
 
      min-height: 100%; 
 
      width: auto; 
 
      height: auto; 
 
      z-index: -1; 
 
      filter: hue(100%); 
 
      }

<!--HTML--> 
 

 
<video playsinline autoplay muted loop poster="assets/Logo.png" id="full-screen"> 
 
      <source src="video/home-video.webm" type="video/webm"/> 
 
      <source src="video/home-video.mp4" type="video/mp4"/> 
 
    </video>

Answer 1

ソースのリストは、プレイリストが、代替ソースのセットではありません。サポートされているブラウザが見つかると、残りは無視されます。 1つまたは2つのビデオタグで独立させるために、JavaScriptを使用して必要なものを実現する必要があります。

は、JavaScriptの配列での動画のリストを持っているし、代わりに直接ビデオの下に複数のソースを持つのに応じて映像ソースを更新することができます：

は、スクリプトタグ内に以下を追加し、それはあなたのために働く必要があります。

var myvid = document.getElementById('full-screen'); 
var myvids = [ 
    "http://www.w3schools.com/html/mov_bbb.mp4", 
    "http://www.w3schools.com/html/movie.mp4" 
    ]; 
    //replace this array with the videos you would like to play next 

var activeVideo = 0; 

myvid.addEventListener('ended', function(e) { 
    // update the new active video index 
    activeVideo = (++activeVideo) % myvids.length; 

    // update the video source and play 
    myvid.src = myvids[activeVideo]; 
    myvid.play(); 
}); 

このJavaScriptスニペットは、自動的にビデオsrcを配列の次のものに変更します。

あなたがこのJSFiddleに取り組んで見ることができます - http://jsfiddle.net/2976jx1s/

・ホープ、このことができます！