pausing and playing multiple HTML5 videos using jQuery get(0) indexing?

前端 未结 3 1322
后悔当初
后悔当初 2021-02-11 01:44

I have a page of several videos. One can click a thumbnail to play each video. The problem is for that for greater than 2 videos, the clicking on the 3rd thumbnail doesn\'t paus

相关标签:
3条回答
  • 2021-02-11 01:55

    thanks P1aincloth3sM4n, i followed what you said about reseting all videos and making a more generalizable solution, for those interested please see the following working jsfiddle: http://jsfiddle.net/trpeters1/EyZdy/52

    0 讨论(0)
  • 2021-02-11 02:05

    When you do the following:

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

    the "get(0)" returns the first element that matches the selector - in this case, just the first element that matches ".video_2". The rest of the videos are ignored. To do an action on all of the selected elements, check out jQuery's "each()" method. Also, you can simplify your code down to a more generic approach by doing something like this:

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

    And then hooking up JS by doing something like this:

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

    I've just typed this from my head, but hopefully it will put you in the right direction.

    0 讨论(0)
  • 2021-02-11 02:08

    Easy solution to play only one HTML5 video element on page using JQUERY:

    $(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);
    });
    });
    
    0 讨论(0)
提交回复
热议问题