To insert audio and video into a web page, use the

In web development, embedding multimedia content has become very simple, and HTML5 provides native <audio></audio> and <video></video> tags, allowing you to play audio and video without relying on third-party plug-ins. This not only improves compatibility, but also simplifies the development process.

How to Insert Audio with HTML5

Want to add background music, voice explanation or sound effects to the webpage? The <audio></audio> tag can easily implement these functions. The basic writing method is as follows:

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

Several practical suggestions:

• Add controls attribute : Only users can see playback controls (play/pause, progress bar, etc.)

• Supports multiple formats : Different browsers support different audio formats, so you can write them like this:

  

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

• Careful for automatic playback : Many browsers restrict automatic playback of audio, especially those with sound. If you really need it, you can add muted attribute to try:

   <audio src="music.mp3" autoplay muted></audio>

How to insert videos into web pages

Video display is an important part of modern websites. For example, product demonstrations, teaching courses and other scenarios can be implemented using the <video> tag. The infrastructure is as follows:

 <video src="movie.mp4" controls width="600"></video>

Some common but easily overlooked setpoints:

• Control size : You can use width or CSS to control the display size, but don't forget the responsive design

• Preload strategy : Use the preload attribute to control whether to preload video (optional value: auto/metadata/none)

• Automatic loop playback : If you want a promotional video to loop, you can add loop and muted :

   <video src="promo.mp4" autoplay loop muted playsinline></video>

Note: Mobile browsers have many restrictions on automatic playback, and usually require mute and add playsinline to play normally.

How to deal with the style and interaction of audio and video elements

Although the default controls are enough, if you want to customize the appearance or add more interactive features, you have to write some JS and CSS yourself.

For example: After hiding the native controls, you can make a play button yourself:

 <video id="myVideo" src="movie.mp4"></video>
<button onclick="document.getElementById(&#39;myVideo&#39;).play()">Play</button>

Other common operations include:

• Listen to playback status changes (such as onplay , onpause )
• Control playback progress (via .currentTime )
• Adjust the volume ( .volume = 0.5 means half the volume)

Of course, in terms of style, you can set beautification effects such as borders, shadows, and rounded corners through CSS, or you can combine JavaScript to create a more complex player interface.

Basically that's it. By mastering the basic usage and precautions of these tags, you can freely embed audio and video content into the web page.

The above is the detailed content of Embedding Multimedia with HTML5 Audio and Video Tags. For more information, please follow other related articles on the PHP Chinese website!