To handle HTML5 media playback events, you need to listen to play, pause, ended, timeupdate and other events and respond with JavaScript. Pay attention to the browser's automatic playback restrictions when controlling playback behavior, and use timeupdate to synchronize progress. For example: 1) Update the UI or record duration through addEventListener by binding play, pause and other events; 2) When calling .play()/.pause() to control the play state, errors need to be captured to deal with user gestures or mute requirements; 3) Listen to the timeupdate event to realize time display or progress bar update to improve the interactive experience.

In web development, handling HTML5 video and audio playback events is an important part of implementing an interactive media experience. Whether it is automatic playback, pause listening, or control playback progress, JavaScript needs to respond to these events and make corresponding actions.

Listen to common playback events

HTML5 media elements ( <video></video> or <audio></audio> ) provide multiple standard events for developers to use. Some of the most commonly used events include:

• play : Triggered when media starts playing
• pause : fired when media pause
• ended : Triggered when media playback ends
• timeupdate : Triggered when the current playback position changes (such as fast forward or during playback)

You can add event listeners like this:

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

media.addEventListener('play', function() {
  console.log('Video starts playing');
});

media.addEventListener('pause', function() {
  console.log('Video Paused');
});

These events can be used to update the UI status, such as toggling the "Play/Pause" button icon, or recording the user's viewing time.

Things to note when controlling playback behavior

Although HTML5 provides .play() and .pause() methods to control playback status, modern browsers have restricted automatic playback for user experience, especially automatic playback with sound.

Common restrictions include:

• There must be a user gesture (such as a click) to trigger playback
• The volume must be muted during automatic playback
• Some browsers (such as Safari) are more stringent in autoplay

Therefore, it is recommended to handle errors when calling .play() :

 media.play().catch(error => {
  console.error('Play failed:', error);
});

This error capture can help you determine whether the playback fails due to permission issues and prompt the user to perform manual operations.

Use timeupdate to achieve progress synchronization

If you need to display the current time, remaining time or update progress bar in real time during playback, you need to listen to timeupdate event.

This event will not fire every frame by default, but will be executed at a certain interval (usually several hundred milliseconds), so it is suitable for UI updates without affecting performance.

 media.addEventListener('timeupdate', function() {
  const currentTime = media.currentTime;
  const duration = media.duration;

  console.log(`Played ${currentTime.toFixed(1)} seconds/Total duration ${duration.toFixed(1)} seconds`);
  // You can update the progress bar or time display here});

If you want to get play time more often, you can manually control the refresh frequency via requestAnimationFrame , but this is usually not required.

Basically that's it. By mastering these core events and control methods, you can meet the basic interactive needs of video or audio in most web pages.

The above is the detailed content of Handling media playback events in HTML5 video/audio.. For more information, please follow other related articles on the PHP Chinese website!