使用jQuery get(0)索引暂停和播放多个HTML5视频？

Question

我有几个视频的页面.可以单击缩略图来播放每个视频.问题是对于超过2个视频,点击第3个缩略图不会暂停第2个视频,所以我同时播放了2个视频.我也使用a fadeOut()来切换每个视频的可见性,无论视频的数量如何,这都可以正常工作.因此,我认为问题在于get(0)代码的一部分.

这是一个显示问题的jsfiddle:http: //jsfiddle.net/trpeters1/EyZdy/28/

此外,这里有一个更详细的代码块,可以解决问题:

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

和HTML:

<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>

Answer 1

执行以下操作时:

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

"get(0)"返回与选择器匹配的第一个元素 - 在这种情况下,只是匹配".video_2"的第一个元素.其余视频将被忽略.要对所有选定的元素执行操作,请查看jQuery的" 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();
});

我刚从头脑中输入了这个,但希望它会让你朝着正确的方向前进.