Javascript - x時間後に複数のdivを同時にフェードインとフェードアウトし、スキップボタンを追加します

Question

javascript/jqueryについてよく分かりません。 私は、フルスクリーンhtml5ビデオを読み込んで、他のコンテンツを消してからx時間後に再生するウェブサイトをやっています。私は、他のコンテンツの遅延fadeIn関数を設定し、ビデオdivの遅延fadeOutを設定しました。このビデオdivはループする別のビデオに置き換えられます（私はsrcを変更する方法を理解できませんでしたので、もう一方がフェードアウトするとこのdivはフェードインします）。フェードインするコンテンツには、固定と表示：なしがあります。私が今行っているコードは動作しますが、遅延時間をスキップしてフェードを直ちに再生するスキップボタンを広告することはできません。私はstackoverflowで見つけた他のソリューションを試してみましたが、（おそらく私のコードがどのように書かれているかによると）完全には機能しませんでした。 私の目標は、ビデオをスキップし、ボタンがクリックされた場合に他のコンテンツをフェードインさせ、遅延がなくなった後にコンテンツがロードされないようにすることです。また、divを切り替える代わりにビデオのsrcを変更することもできます（ただしこれは重要ではありません）。ここで

はHTML相続人

<div id="v1"> 
     <video autoplay poster="screenshot.jpg" id="background" controls> 
      <source src="http://www.ray-gun.pt/clientes/Natal_2016/RayGun_NatalparaTodoAno_sem_nada.mp4" type="video/mp4" width="100%" height="auto"> 
      Your browser does not support HTML5 video. 
     </video> 
    </div> 
    <div id="vloop"> 
     <video autoplay loop poster="screenshot.jpg" id="background" controls> 
      <source src="http://www.ray-gun.pt/clientes/Natal_2016/NATAL_SO_PRODUTO.mp4" type="video/mp4" width="100%" height="auto"> 
      Your browser does not support HTML5 video. 
     </video> 
    </div> 
    <a href="#" id="skipbtn"> 
     <img src="images/skip.png" alt="saltar" /> 
    </a> 
    <div class="row"> 
     <div id="show1" class="content faded"> 
      <div class="wrap"> 
       <div class="social"> 
        <div> 
         <a class=fb href="https://www.facebook.com/RayGun.LX/?fref=ts" target="_blank"></a> 
        </div> 
        <div> 
         <a class="tw" href="https://twitter.com/raygun_lx" target="_blank"></a> 
        </div> 
       </div> 
       <div class="col-md-12"> 
        <div class="header"> 
         <img src="images/header.png" alt="header"/> 
        </div> 
       <row> 
        <div class="btnsCont"> 
         <button class="mrgr" data-toggle="modal" data-target="#squarespaceModal">Doação</button> 
         <input type="button" value="Dúvidas" onclick="window.location.href='mailto:me@anydomainname.com'" /> 
        </div> 
       </row> 
      </div> 
     </div> 
     </div> 
     <div id="show2" class="patrocinios faded"> 
      <ul> 
       <li> 
        <a href="https://www.ray-gun.pt/?page_id=2015&lang=pt"> 
         <img src="images/raygun_logo.png" alt="Ray Gun" /> 
        </a> 
       </li> 
       <li> 
        <a href="http://www.cvidaepaz.pt/site/"> 
         <img src="images/comvidapaz_logo.png" alt="Com Vida e Paz" /> 
        </a> 
       </li> 
       <li> 
        <a href="http://cercizimbra.org.pt"> 
         <img src="images/cercizimbra_logo.png" alt="CERCI" /> 
        </a> 
       </li> 
       <li> 
        <a href="http://www.ajudadeberco.pt/"> 
         <img src="images/ajudaberco_logo.png" alt="Ajuda de Berço" /> 
        </a> 
       </li> 
      </ul> 
     </div> 
    </div> 

適切なCSS

#skipbtn{ 
    z-index: 10; 
    position: fixed; 
    top: 20px; 
    right: 20px; 
} 
#vloop{ 
    display: none; 
} 
.content { 
    position: fixed; 
    top: 10; 
    z-index: 1; 
    margin: 0 auto; 
    width: 100%; 
    display: none; 
} 
.patrocinios{ 
    width: 100%; 
    margin: 0 auto; 
    position: fixed; 
    bottom: 10px; 
    display: none; 
} 

そして今働いているjqueryのです。

function fade() { 
      $('#v1, #skipbtn').delay(50000).fadeOut(100).hide(0); 
      $('#vloop').delay(50000).fadeIn(100); 
     } 
     fade(); 
     $(".faded").each(function(i) { 
      $(this).delay(50000).fadeIn(); 
     }); 

この例：Adding a Skip Button to FastForward a .fadeIn/.fadeOut?は私のために1最も近かったし、それはまったく同じ目標ですが、私は最初の関数のフェードインラインで複数のセレクタをしようとすると、私には動作しません。 私は本当にこれを克服する方法を知らない。私はあなたの助けに感謝します。

Answer 1

友人の助けを借りて、私は目標を達成しました。私は全体の機能を変更しなければならなかった。 誰かが同じ問題に遭遇した場合、私はここに投稿します。

var vid1 = $('#v1').find('video'); 
     var vid2 = $('#vloop').find('video'); 

     $(vid1).on("ended", function() { 
      playVideo2(); 
     }); 

     $(vid2).on("ended", function() { 
      playVideo1(); 
     }); 


     function playVideo2() { 
      $('#v1, #skipbtn').fadeOut(50).hide(0); 
      $('#vloop').fadeIn(50); 
      videoPlaying = "video2"; 
      $(".faded").each(function(i) { 
      $(this).fadeIn(); 
     }); 

      $(vid2)[0].play(); 
      $(vid1)[0].pause(); 
     } 

     function playVideo1() { 
      $('#vloop').fadeOut(50).hide(0); 
      $('#v1').fadeIn(50); 
      $(".faded").each(function(i) { 
      $(this).fadeOut(); 
     }); 

      videoPlaying = "video1"; 
      $(vid1)[0].play(); 
      $(vid2)[0].pause(); 
     } 
     playVideo1(); 


     $('#skipbtn').on('click', function() { 
      if (videoPlaying == "video1") { 
       playVideo2(); 
      } else if (videoPlaying == "video2") { 
       playVideo1(); 
      } 

     });