Вопрос по html5, javascript, jquery – приостанавливать и воспроизводить несколько видео HTML5 с помощью индексации jQuery get (0)?

3

У меня есть страница с несколькими видео. Можно нажать на миниатюру, чтобы воспроизвести каждое видео. Проблема в том, что для более чем 2-х видео нажатие на 3-е миниатюру не приостанавливает 2-е видео, поэтому у меня одновременно воспроизводятся 2 видео. Я также используюfadeOut(), чтобы переключать видимость каждого видео, и это прекрасно работает независимо от количества видео. Поэтому я думаю, что проблема сget(0) часть кода.

вот jsfiddle, который отображает проблему:http: //jsfiddle.net/trpeters1/EyZdy/28

Кроме того, вот более подробный кодовый блок b, который должен прояснить проблему:

<code>$(function(){
      $('#video_1,#video_2,#video_3,#video_4,#video_5,#video_6').hide();

      $('.icon_1').click(function(){
            $('#video_2,#video_3,#video_4,#video_5,#video_6').fadeOut(function(){
                  $('#video_1').fadeIn();
            $('.video_2,.video_3,.video_4,.video_5,.video_6').get(0).pause();
            $('.video_2,.video_3,.video_4,.video_5,.video_6').get(0).currentTime = 0;
            $('.video_1').get(0).play();
            });
      });


      $('.icon_2').click(function(){
            $('#video_1,#video_3,#video_4,#video_5,#video_6').fadeOut(function(){
                  $('#video_2').fadeIn();
            $('.video_1,.video_2,.video_4,.video_5,.video_6').get(0).pause();
            $('.video_1,.video_2,.video_4,.video_5,.video_6').get(0).currentTime = 0;
            $('.video_2').get(0).play();
            });
      });

      $('.icon_3').click(function(){
            $('#video_1,#video_2,#video_4,#video_5,#video_6').fadeOut(function(){
                  $('#video_3').fadeIn();
            $('.video_1,.video_2,.video_4,.video_5,.video_6').get(0).pause();
            $('.video_1,.video_2,.video_4,.video_5,.video_6').get(0).currentTime = 0;
            $('.video_3').get(0).play();
            });
      });
});
</code>

и HTML:

<code><div id="video_1">
<div id="mediaplayer">cadillac</div>
    <video class="video_1" width="100%" height="100%" controls="controls">
        <source src="videos/cadillac_x264.mp4" type="video/mp4" />
    <object data="videos/cadillac_x264.mp4" width="100%" height="100%">
</object> 
</video>
</div>

<div id="video_2">
<div id="mediaplayer2">nike</div>
    <video class="video_2" width="100%" height="100%" controls="controls">
    <source src="videos/Nike_Pretty - Computer_x264.mp4" type="video/mp4" />
<object data="videos/Nike_Pretty - Computer_x264.mp4" width="100%" height="100%">
</object> 
</video>
</div>

<div id="video_3">
<div id="mediaplayer3">russian standard</div>
    <video class="video_3" width="100%" height="100%" controls="controls">
    <source src="videos/Russian_Standard.mp4" type="video/mp4" />
<object data="videos/Russian_Standard.mp4" width="100%" height="100%">
</object> 
</video>
</div>
</code>

Ваш Ответ

1   ответ
11

Когда вы делаете следующее:

$('.video_2,.video_3,.video_4,.video_5,.video_6').get(0)

the «get (0)» возвращает первый элемент, который соответствует селектору - в данном случае, просто первый элемент, который соответствует «.video_2». Остальные видео игнорируются. Чтобы выполнить действие со всеми выбранными элементами, проверьте jQuery's "@"each () ". Кроме того, вы можете упростить свой код до более общего подхода, выполнив что-то вроде этого:

<a href="#" class="video-thumbnail" data-video-id="video-1">Video 1</a>
<a href="#" class="video-thumbnail" data-video-id="video-2">Video 2</a>

<video id="video-1"> ... </video>
<video id="video-2"> ... </video>

А затем подключите JS, выполнив что-то вроде этого:

$('.video-thumbnail').on('click', function () {
    // Just go ahead and pause/reset all the video elements
    $('video').each(function () {
        this.pause();
        this.currentTime = 0;
    });

    $('#' + $(this).data('video-id')).get(0).play();
});

Я только что набрал это у себя в голове, но, надеюсь, это укажет тебе правильное направление.

Похожие вопросы