3

我有一页有几个视频。可以单击缩略图来播放每个视频。问题在于，对于超过 2 个视频，单击第 3 个缩略图不会暂停第 2 个视频，因此我会同时播放 2 个视频。我还使用 afadeOut()来切换每个视频的可见性，无论视频数量如何，这都可以正常工作。因此，我认为问题在于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>
4

3 回答 3

11

当您执行以下操作时：

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

我刚刚从我的脑海中输入了这个，但希望它能让你朝着正确的方向前进。

于 2012-04-04T21:37:12.907 回答
3

感谢 P1aincloth3sM4n，我按照您所说的重置所有视频并制定更通用的解决方案，对于那些感兴趣的人，请参阅以下工作 jsfiddle：http: //jsfiddle.net/trpeters1/EyZdy/52

于 2012-04-04T21:46:18.303 回答
0

使用 JQUERY 在页面上仅播放一个 HTML5 视频元素的简单解决方案：

$(function() {
$("video").each(function() {
    this.pauseOthers = function(event) {
        $('video').addClass('stopvideo');
        $(this).removeClass('stopvideo');
        $('.stopvideo').each(function() {
            this.pause();
        });
    };
    this.addEventListener("play", this.pauseOthers.bind(this), false);
});
});
于 2015-10-30T05:34:04.513 回答