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

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