Управление HTML5 видео в слайдере

Question

Я создал пользовательский слайдер для видео, который перемещается по 4 видео. У меня есть пользовательская кнопка воспроизведения по каждому видео и некоторому оверлейному контенту по каждому из них. При воспроизведении видеоизображения отображаются как содержимое наложения, так и кнопка воспроизведения, и отображаются элементы управления видео по умолчанию. Моя проблема заключается в том, что независимо от того, какая кнопка воспроизведения видео нажата. Он воспроизводит только первое видео в слайдере. Я знаю, что мне нужно настроить таргетинг на кнопку воспроизведения каждого видео и связать ее с этим видео, я просто не могу для жизни понять, как это сделать. Вот мой HTML:

<div class="video-slider"> 
     <div class="main-wrap"> 
      <div class="slides-view"> 
       <div class="slides"> 
        <div class="slide-gallery"> 
         <div class="slide"> 
          <video id="slider-video" poster=""> 
           <source src="" type="" > 
          </video> 
          <div class="overlay-content"> 
          </div> 
          <div class="play"> 
           <a class="play-button"><img src="" /></a> 
          </div> 
         </div> 
         <div class="slide"> 
          <video id="slider-video" loop poster=""> 
           <source src="" type="" > 
          </video> 
          <div class="overlay-content"> 
          </div> 
          <div class="play"> 
           <a class="play-button"><img src="" /></a> 
          </div> 
         </div> 
         <div class="slide"> 
          <video id="slider-video" loop poster=""> 
           <source src="" type="" > 
          </video> 
          <div class="overlay-content"> 
          </div> 
          <div class="play"> 
           <a class="play-button"><img src="" /></a> 
          </div> 
         </div> 
         <div class="slide"> 
          <video id="slider-video" loop poster=""> 
           <source src="" type="> 
          </video> 
          <div class="overlay-content"> 
          </div> 
          <div class="play"> 
           <a class="play-button"><img src="" /></a> 
          </div> 
         </div> 
        </div><!--end slide-gallery--> 
       </div><!--end slides--> 
      </div><!--end slides-view--> 
     </div><!--end main-wrap--> 
     <div class="slide-arrow left"> 
      <a><img src="/sites/all/themes/merge/img/video-arrow-left.png" /></a> 
     </div> 
     <div class="slide-arrow right"> 
      <a><img src="/sites/all/themes/merge/img/video-arrow-right.png" /></a> 
     </div> 
    </div><!--end video-slider--> 

И мой JavaScript/JQuery:

$(document).ready(function() { 

     var sliderVideo = document.getElementById('video-slider'); 
     var sliderVideo = $('#slider-video').get(0); 
     var sliderVideo = $('#slider-video'); 
     var sliderOverlay = $('.video-slider .overlay-content'); 

     $('.play-button').on('click', function() { 
      sliderVideo[0].play(); 
      sliderOverlay.fadeOut('fast'); 
      $(this).hide() 
     }); 

     sliderVideo.on('play', function(e) { 
      $(this).attr('controls', 'true'); 
     }) 

    }); 

Answer 1

Я взял на себя смелость упрощая HTML немного:

<div class="video-slider"> 
    <!-- SLIDE 1 --> 
    <div class="slide"> 
     <video class="slider-video" poster=""> 
      <source src="" type="" /> 
     </video> 
     <div class="overlay-content"> 
      <div class="play-button"></div> 
     </div> 
    </div> 
    <!-- SLIDE 2 --> 
    <div class="slide"> 
     <video class="slider-video" poster=""> 
      <source src="" type="" /> 
     </video> 
     <div class="overlay-content"> 
      <div class="play-button"></div> 
     </div> 
    </div> 
    <!-- END OF SLIDES --> 
    <div class="slide-arrow left"></div> 
    <div class="slide-arrow right"></div> 
</div> 

А вот способ сделать то, что вы хотите сделать (согласно новой структуре HTML):

$('.play-button').on('click', function() { 
    $(this).hide(); 
    $(this).parent().fadeOut(); 
    $(this).parent().siblings('.slider-video')[0].play(); 
}); 

$('.slider-video').on('play', function() { 
    $(this).attr('controls', '1'); 
}); 

JS Fiddle Demo

Примечание: я нашел только один годный к употреблению видео размещается в Интернете, так что ползун содержит 2 одинаковых видео.

Редактировать

Если вы хотите сохранить ваш HTML, как это, это должно работать:

$('.play-button').on('click', function() { 
    $(this).hide(); 
    $(this).siblings('.overlay-content').fadeOut(); 
    $(this).siblings('.slider-video')[0].play(); 
}); 

$('.slider-video').on('play', function() { 
    $(this).attr('controls', '1'); 
});