How Can I Control HTML5 Video Playback Using jQuery Across Multiple Tabs?

Controlling HTML5 Video Playback with jQuery

This article provides guidance on managing HTML5 video playback using jQuery. Let's delve into the solution to the problem at hand: controlling two video clips in separate tabs of a six-tabbed interface. Each video should start playing when its tab is clicked and pause when another tab is activated.

The original attempt to control video playback was:

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

However, it's crucial to note that play is not a jQuery function. Instead, it's a method of the DOM element. To invoke it using jQuery, you need to target the element itself:

$('#videoId').get(0).play();

Here, get retrieves the native DOM element from the jQuery selection.

Therefore, your code should look like this:

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

By employing this approach, each video clip will commence playback when its tab is selected and cease playing when another tab is clicked.

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