Когда я нажимаю кнопку воспроизведения на своем видеоплеере, он воспроизводит оба видео на странице

Question

Я пытаюсь настроить видеоплеер в HTML5, и когда я нажимаю кнопку воспроизведения на верхнем видео, он воспроизводит оба видео на странице.

Вот мой jsfiddle: http://jsfiddle.net/BannerBomb/U4MZ3/27/

Вот мой HTML:

<!--Video 1--> 
<section id="wrapper"> 
    <div class="videoContainer"> 
     <video id="myVideo" controls preload="auto" poster="http://s.cdpn.io/6035/vp_poster.jpg" width="380" > 
      <source src="http://html-testing.github.io/2/videos/mikethefrog.mp4" type="video/mp4" /> 
      <p>Your browser does not support the video tag.</p> 
     </video> 
     <div class="caption">Video1</div> 
     <div class="control"> 
      <div class="btmControl"> 
       <div class="btnPlay btn" title="Play/Pause video"><span class="icon-play"></span></div> 
       <div class="progress-bar"> 
        <div class="progress"> 
         <span class="bufferBar"></span> 
         <span class="timeBar"></span> 
        </div> 
       </div> 
       <!--<div class="volume" title="Set volume"> 
       <span class="volumeBar"></span> 
       </div>--> 
       <div class="sound sound2 btn" title="Mute/Unmute sound"><span class="icon-sound"></span></div> 
       <div class="btnFS btn" title="Switch to full screen"><span class="icon-fullscreen"></span></div> 
      </div> 
     </div> 
    </div> 
</section> 

<!--Video 2--> 
<section id="wrapper"> 
    <div class="videoContainer"> 

     <video id="myVideo" controls preload="auto" poster="http://s.cdpn.io/6035/vp_poster.jpg" width="380" > 
      <source src="http://html-testing.github.io/2/videos/mikethefrog.mp4" type="video/mp4" /> 
      <p>Your browser does not support the video tag.</p> 
     </video> 
     <div class="caption">Video2</div> 
     <div class="control"> 
      <div class="btmControl"> 
       <div class="btnPlay btn" title="Play/Pause video"><span class="icon-play"></span></div> 
       <div class="progress-bar"> 
        <div class="progress"> 
         <span class="bufferBar"></span> 
         <span class="timeBar"></span> 
        </div> 
       </div> 
       <!--<div class="volume" title="Set volume"> 
       <span class="volumeBar"></span> 
       </div>--> 
       <div class="sound sound2 btn" title="Mute/Unmute sound"><span class="icon-sound"></span></div> 
       <div class="btnFS btn" title="Switch to full screen"><span class="icon-fullscreen"></span></div> 
      </div> 

     </div> 
    </div> 
</section> 

Если вы посмотрите в jsfiddle ссылке, которую я условии, что вы можете увидеть CSS и JavaScript, который я написал.

Answer 1

Существует так много кода для изменения, что потребуется очень много времени, поэтому я объясню, что происходит.

Практически во всех ваших мероприятиях вы выполняете классы и анимации элементов (элементов), которые вы выбираете с помощью селектора классов. Вы выбираете элементы, разделяемые обоими видео, когда вы это делаете, поэтому затрагиваете оба видео, когда только один щелчок/зависание.

например.

$('.btnPlay').on('click', function() { playpause(); }); 

Здесь вы вызываете функцию паузы, когда либо .btnPlay (или из видео) нажата.

Необходимо выбрать только видео, нажав либо с помощью $(this), либо this и комбинацию селекторов parent/child, чтобы убедиться, что вы выполняете действия только для видео, которое нажато/зависло.

Пара вещей, которые вы делаете неправильно:

1. идентификаторы уникального, вы не можете дать и videoid="myVideo", они нужны разным идентификаторы или же класс.
2. В вашем JS вы пишете video[0] после video = $("#myVideo"), что невозможно сделать, потому что идентификаторы уникальны, поэтому вы только хватаете первый элемент с этим идентификатором. video[0] работает для вас в некотором коде, но он нигде не подходит для селекторов id.

Я рекомендую использовать селекторы parent/child, чтобы убедиться, что вы выбираете правильное видео или можете просто скопировать код и выполнить его отдельно для второго видео (при условии, что вы исправили код для первого и создали другой селектор не используется #myVideo).

Если вы посмотрите на эту скрипку, я добавил «2» после каждого класса во втором .videoContainer, чтобы ваши команды не выбирали его.

http://jsfiddle.net/U4MZ3/30/