Javascriptを使用してビデオの背景やCSSを変更する

Question

div（#button）を使用して4つの異なる状態を繰り返し、クリック時に特定のCSSプロパティを変更したいと思います。 JavascriptまたはjQueryを使用することは理にかなっています。

デフォルトの状態は、下に特定のCSSプロパティをそのまま記載した白い背景です。次の3つの州は、バックグラウンドにHTML5ビデオを使用し、CSSプロパティはすべて#fffに切り替える必要があります。したがって、ページはデフォルトで起動し、ボタンdivをクリックすると、vid1、vid2、vid3、デフォルトに戻ります.vid1、vid2、vid3、default ...など。 CSSはデフォルトで＃000、動画では#fffに設定されています。

ビデオ背景のHTML。 MP4とWEBMバージョンの両方へのソースリンク等VID2、VID3、で更新する必要があります

<video playsinline autoplay muted loop id="bgvid"> 
    <source src="videos/vid1.webm" type="video/webm"> 
    <source src="videos/vid1.mp4" type="video/mp4"> 
</video> 

フォローのCSSプロパティは、私はビデオと3つの状態にする場合、変更したいものですバックグラウンド。

h1 {color: #000;} 
p {color: #000;} 
h1 a {color: #000;} 
#button:active {background-color: #000;} 
#nav-icon span {background: #000;} 

Answer 1

私は、CSSクラスと各ステップのビデオソースのリストが含まれて素敵な配列を作成することから始めます。

次に、Arrayのデータに基づいて、必要に応じてvideoタグを作成します。各ステップのビデオタグを最初に作成し、各ステップの適切なタグを表示したり隠したりすることができます。

videoタグを1つ作成し、ボタンをクリックして前のタグを削除することもできます。

各ステップについて、ボタンをクリックした後に親要素（bodyなど）に適用するCSSクラスを作成できます。そうすれば、実際のJavaScriptとスタイルをきれいに分けることができます。コンセプト

$(function(){ 
 
    var steps = [ 
 
    { 
 
     cssClass: 'default' 
 
    }, 
 
    { 
 
     cssClass: 'video', 
 
     sources: [ 
 
     ['videos/vid1.webm', 'video/webm'], 
 
     ['videos/vid1.mp4', 'video/mp4'] 
 
     ] 
 
    }, 
 
    { 
 
     cssClass: 'step3', 
 
     sources: [ 
 
     ['videos/vid2.webm', 'video/webm'], 
 
     ['videos/vid2.mp4', 'video/mp4'] 
 
     ] 
 
    } 
 
    ]; 
 
    
 
    $('button').click(function(){ 
 
    if (steps.length == 0) { 
 
     return; 
 
    } 
 
    
 
    var prevStepIndex = parseInt($(this).data('step') || 0); 
 
    var currentStepIndex = prevStepIndex + 1; 
 
    if (currentStepIndex >= steps.length) { 
 
     currentStepIndex = 0; 
 
    } 
 
    var currentStep = steps[currentStepIndex]; 
 
    
 
    $('body').attr('class', currentStep.cssClass || ''); 
 
    
 
    $(this).data({'step': currentStepIndex}); 
 
    $('#step').text(currentStepIndex); 
 
    }); 
 
});

.default h1, 
 
.default h1 a, 
 
.default p { 
 
    color: #000; 
 
} 
 

 
.default #button:active, 
 
.default #nav-icon span { 
 
    background: #000; 
 
} 
 

 
.video h1, 
 
.video h1 a, 
 
.video p { 
 
    color: #fff; 
 
} 
 

 
.video #button:active, 
 
.video #nav-icon span { 
 
    background: #fff; 
 
} 
 

 
.step3 h1, 
 
.step3 h1 a, 
 
.step3 p { 
 
    color: red; 
 
} 
 

 
.step3 #button:active, 
 
.step3 #nav-icon span { 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<h1>Test header</h1> 
 
<button>Change!</button> 
 
Current step: <span id="step"/>

の

証明