HTML5 provides convenient audio and video embedding capabilities without third-party plug-ins. 1. Use the

Adding audio and video content to web pages, HTML5 provides very convenient tags and features. You don't need to rely on third-party plugins, such as Flash, to embed audio and video directly. This not only improves compatibility, but also simplifies the development process.

Embed audio using <audio></audio> tag

HTML5's <audio></audio> tag allows you to easily play audio files on web pages. Common usage methods are as follows:

 <audio src="music.mp3" controls></audio>

• src specifies the audio file path.
• controls means displaying the browser's own control bar (play, pause, volume, etc.).
• Supported formats include MP3, WAV, OGG, etc.

If you want to be compatible with more browsers, you can provide multiple formats:

 <audio controls>
  <source src="music.mp3" type="audio/mpeg">
  <source src="music.ogg" type="audio/ogg">
  Your browser does not support audio playback.
</audio>

Recommendation: Try to provide multiple formats to ensure that all users can play normally.

Embed video using <video> tag

Video embedding is similar to audio, using the <video> tag:

 <video src="movie.mp4" controls width="640"    style="max-width:90%"></video>

• src is the video address.
• controls display the control bar.
• width and height control the player size.

Similarly, for compatibility with different browsers, you can specify multiple video sources:

 <video controls width="640" height="360">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  Your browser does not support video playback.
</video>

Notes:

• It is recommended to use MP4 and WebM formats to cover mainstream browsers.
• When the video file is large, you should consider loading speed, and you can consider compression or using CDN acceleration.

Automatic playback and mute settings

Sometimes we want video or audio to play automatically, but modern browsers prohibit automatically playing audio content by default for user experience. If you need to implement automatic playback, it is recommended to add muted attribute:

 <video src="intro.mp4" autoplay muted loop controls></video>

• autoplay means automatic playback.
• muted is set to mute to avoid being blocked by the browser.
• loop lets the video playback loop.

In actual applications, some websites will first mute and automatically play, and then provide users with a "unmute" button, which not only complies with the specifications but also improves the experience.

Other practical properties

In addition to the above mentioned, there are some commonly used properties that can be added according to your needs:

• preload : controls whether content is preloaded. The optional values ??are "auto" , "metadata" and "none" .
• poster ( <video> only): Set the cover image before the video is played.
• crossorigin : used for cross-domain resource requests, especially when you load audio and video from other domain names, you should pay attention to this property.

For example:

 <video 
  src="demo.mp4" 
  Controls 
  poster="preview.jpg"
  preload="auto"
></video>

Basically that's it. It is actually not difficult to add audio and video with HTML5, but there are several points that are easy to ignore, such as format compatibility, automatic playback restrictions, load optimization, etc. Just pay attention to these aspects and it will work smoothly on most modern browsers.

The above is the detailed content of Adding audio and video content to webpages using HTML5 tags.. For more information, please follow other related articles on the PHP Chinese website!