Javascript - fadein 및 fadeout x 시간 후 동시에 여러 divs 및 건너 뛰기 단추 추가

Question

나는 javascript/jquery를 많이 알지 못하므로 실제로 도움이 필요합니다. 로드 할 때와 다른 콘텐츠가 사라질 때까지 전체 화면 html5 비디오를 재생하는 웹 사이트를 만들고 있습니다. 그 다른 내용에 대한 지연 fadeIn 함수를 설정하고 비디오 div에 대해 fadeOut을 지연시킵니다. 이 비디오 div는 루프하는 다른 비디오로 대체됩니다 (src를 변경하는 방법을 알 수 없으므로 다른 div가 사라질 때이 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> 

을 heres 관련 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? 내 것이 하나의 가장 가까운이었고, 정확히 같은 목표입니다,하지만 난 그것이 작동하지 않는 첫 번째 함수의 fadeIn 라인에서 여러 선택기를하려고 할 때. 나는 이것을 극복하는 방법을 정말로 모른다. 도와 주셔서 감사합니다.

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(); 
      } 

     });