Search code examples
javascriptjqueryhtmlvideopause

Automatically pausing html5 video as the 'next' button is pressed (javascript/ jquery)

I have designed an i-phone-like screen on a web browser where I am testing this application I am in the process of building. None of the videos have auto-play; the user can play the video by clicking on the video area.The user can navigate to the next video by clicking on the top right button.

enter image description here

THE PROBLEM: The problem is if I pressed on a video and it is playing,if I press the 'next' button, if I have not clicked back on, the video continues to play as the new one advances, and I can hear the sound of it playing in the background.

I HAVE TRIED TO MUTE THE VIDEOS BUT IT DID NOT WORK I have tried muting the video if the user clicks on the 'next' button, and it works to mute it, BUT, the problem is that if I press the return button, the video is completely muted and unless I refresh the page, the sound will not play again at all*.

This is the jquery code I used to try and mute the video if the 'next' button is pressed: 

$("#nextButtonTop, #prevButtonTop ").click( function (){
if( $("#topVid video:visible").prop('muted') ) {
        $("#topVid video:visible").prop('muted', true);

  } else {
    $("#topVid video:visible").prop('muted', true);


  }
});

The basic html code for this section:

<div class="topVid channel1960s">
  <div class="testMarqueeLeft"><div>CHANNEL 1960s: Jackie Kennedy at JFK's service</div></div>
      <video loop onclick="this.paused? this.play() : this.pause()" >
      <source src="videos/1960s_Jackie_mourning_VERT.mp4" type="video/mp4">
      Your browser does not support the video tag.
      </video> </div>

IDEAL SOLUTION: PAUSING AS SOON AS THE 'NEXT' BUTTON IS PRESSED ultimately, I realized that muting is not the ideal solution because of performance issues (the hidden video will keep playing even without the sound). What is the best way to pause (instead of muting) the video as soon with this 'next' button pressed? There is already inline javascript code on the html that will play and pause if the user clicks on it but I am not sure how add this other part, where it pauses if the next button is pressed and it can be played once it is visible.

I tried this to make the video pause but it did not work

$("#nextButtonTop, #prevButtonTop ").click( function (){
  if ($('.topVid.video').is(":hidden")) {
      $('.topVid.video').pause();
  }
});

I tried this as well and nothing

$('video').each(function(){
    if ($(this).is(":in-viewport")) {
        $(this)[0].play();
    } else {
        $(this)[0].pause();
    }
})

the use of

 "this.paused ? this.play() : this.pause();"

was suggested on another answer but I am not sure how this could work given that the pausing would be triggered by clicking on another element (the 'next' button, not the video itself.

Solution

  • Unless your jQuery is at the end of the document, remember to wrap it in jQuery(function($) {...}).

    Attach all event handlers in javaScript, not HTML. This is not essential, but allows you to see all your interactive code in a single glance.

    Stay aware that .play() and .pause() are <video> element methods, not jQuery methods.

    Try this :

    HTML

    <div class="topVid channel1960s">
    <div class="testMarqueeLeft">
        <div>CHANNEL 1960s: Jackie Kennedy at JFK's service</div>
    </div>
    <video loop> <!-- remove onclick="..." -->
        <source src="videos/1960s_Jackie_mourning_VERT.mp4" type="video/mp4" />
        Your browser does not support the video tag.
    </video>
</div>

    JavaScript

    jQuery(function($) {
    // Attach click handler to both <video> elements
    $('video').on('click', function() {
        this.paused? this.play() : this.pause();
    });

    // Attach click handler to top video's prev/next buttons
    $("#nextButtonTop, #prevButtonTop").on('click', function(e) {
        e.preventDefault(); // maybe not required but does no harm.
        var $video = $('.topVid video');
        if ($video.is(':hidden')) {
            $video.get(0).pause(); // .pause() is a method of the <video> element, not a jQuery method.
        }
    });
});