How Can I Control HTML5 Video Playback Using JavaScript and jQuery?

Controlling HTML5 Video Playback with JavaScript and jQuery

Playing and pausing HTML5 videos using JavaScript and jQuery can be a straightforward task, but requires specific considerations for jQuery usage. To play a video when a specific tab or element is clicked, you can employ the .play() method directly on the video element, as demonstrated in the provided code:

$('#playMovie1').click(function() {
    $('#movie1').play();
});

However, if you need to pause the video when another tab or element is selected, you must use the DOM element's native .pause() method instead of jQuery's .pause() function. This is because video playback control functions, such as .play() and .pause(), operate on the underlying DOM element and not on jQuery objects. Therefore, you must access the DOM video element directly to control its playback.

In jQuery, you can access the native DOM element by using the .get(0) method. So, to pause a video when another tab is clicked, you would write:

$('#movie1').get(0).pause();

By combining these techniques, you can create an effective video player control that enables playing and pausing based on user interactions using both JavaScript and jQuery.

The above is the detailed content of How Can I Control HTML5 Video Playback Using JavaScript and jQuery?. For more information, please follow other related articles on the PHP Chinese website!