To control HTML5 video and audio playback using JavaScript, master the following key operations to achieve basic control. 1. Start or pause play can be achieved through the .play() and .pause() methods, and it is recommended to trigger through user interaction to be compatible with mobile browsers; 2. Control the volume and set the value from 0 to 1 through the volume attribute, and switch by setting the muted attribute to true or false; 3. Play to a specific time, use the currentTime attribute, which supports direct assignment or incrementing and decreasing the current time, and it is recommended to add error handling; 4. Listening to the playback status changes can be achieved through events such as play, pause, ended and timeupdate, which facilitates synchronization of the UI or executing callback functions. These methods and events form the core functionality of HTML5 media element control.

Want to use JavaScript to control HTML5 video and audio playback? In fact, it is not difficult. You can achieve basic control by mastering a few key points. Here are some of the ways you might care about the most.

How to start or pause playback?

This is one of the most common needs. <video></video> and <audio></audio> elements of HTML5 both provide .play() and .pause() methods, which can be called directly:

 const media = document.getElementById('myVideoOrAudio');

media.play(); // start playback media.pause(); // pause playback

You can trigger these methods through buttons, such as binding a click event:

 <button onclick="document.getElementById(&#39;myMedia&#39;).play()">Play</button>

It should be noted that some browsers (especially mobile) require users to interact before they can play automatically, otherwise it will prevent the automatic playback behavior.

How to control volume and mute?

To adjust the volume, you can set the volume property, which takes the value range from 0 to 1:

 media.volume = 0.5; // Set to half volume

Muted can be switched with the muted property:

 media.muted = true; // Muted media.muted = false; // Unmute

These two properties are often used in development to provide "silent switch" or "volume slider" functions, and can be used in combination with the input range control.

How to jump to a specific time to play?

Sometimes you want the user to jump to a certain point in time quickly, such as chapter navigation in video tutorials. You can use the currentTime property:

 media.currentTime = 30; // Skip to 30th second

Error handling can also be added to prevent some formats from supporting jumps:

• Listen to error events
• Use try...catch package operation

If you want to implement a function like "retrogression of 10 seconds", you can write it like this:

 media.currentTime -= 10;

How to monitor the playback status changes?

Understanding the current state of the media is important for interaction design. Commonly used events include:

• play : Triggered when playing begins
• pause : Triggered during pause
• ended : Triggered at the end of playback
• timeupdate : frequently triggered when the playback time is updated (can be used for progress bars)

Example:

 media.addEventListener('ended', function() {
    alert('Play is over');
});

These events are very useful if you want to synchronize the player's UI state.

Basically these common operations. JavaScript's support for HTML5 media elements is already perfect, and the key is to understand the usage scenarios of the API and the browser's behavioral limitations.

The above is the detailed content of How to control HTML5 video and audio playback using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!