My Web Training

📖 Embedding Video and Audio

HTML5 made it possible to embed video and audio natively in a webpage without relying on third-party plugins or proprietary software. This approach not only streamlines media integration but also ensures broader browser compatibility and a more consistent user experience. By providing multiple file formats—such as MP4, WebM, or Ogg—developers can cater to different browsers' requirements. Meanwhile, attributes like controls, autoplay, and loop enable them to tailor playback behavior, ensuring smooth, interactive multimedia experiences on devices ranging from desktop computers to mobile phones.

HTML5 Video

HTML5 specifies a standard way to include video with the <video> element. There are three main formats you can provide to maximize browser support:

Ogg: Ogg files using Theora (video) and Vorbis (audio). Supported by Firefox, Opera, and Chrome.
MPEG4: MP4 files using H.264 (video) and AAC (audio). Supported by Internet Explorer, Chrome, Safari, iOS, and Android.
WebM: WebM files using VP8 (video) and Vorbis (audio). Supported by Firefox, Opera, Chrome, Internet Explorer, and Android.

To Show a Video File in HTML5

You can find free videos at Pexels.com. Once you have a video (in at least two formats), embed it in your page using the following example:

<video width="640" height="360" controls poster="poster.jpg" preload="none" autoplay loop muted>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <!-- Additional sources if needed -->

  Your browser does not support the video element.
  <a href="video.mp4">Download the video</a>
</video>

The <video> element can contain multiple <source> elements. Each <source> should point to a different file format. The browser will use the first format it recognizes.

It is common to provide MP4 plus one other format (WebM or Ogg) to cover most browsers. If a browser does not support <video>, fallback content (such as a text message or a download link) will appear. Including width and height attributes (or equivalent CSS) helps reserve space on the page to avoid layout shifts while the video loads.

Common Video Attributes Explained

controls: Adds built-in playback controls (play, pause, volume). Recommended if you want user interaction.
autoplay: Starts playback automatically when the page loads. Many browsers block autoplay unless muted is also set to avoid unexpected audio.
loop: Restarts the video automatically after it ends. Useful for background loops or short clips.
muted: Silences the video by default. Often required in conjunction with autoplay due to browser policies.
poster: Displays a placeholder image before playback starts. Helpful for previewing video content.
preload: Hints to the browser how much of the file to download initially. none avoids downloading until the user clicks play; metadata downloads only file info like duration; auto (default) lets the browser decide.

HTML5 Audio

HTML5 includes a standard way to embed audio with the <audio> element. Different formats may be required to support all browsers. Five main formats are:

Ogg Vorbis (.ogg): Supported by Firefox, Opera, Chrome.
MP3 (.mp3): Supported by Internet Explorer, Chrome, Safari, iOS.
Wav (.wav): Supported by Firefox, Opera, Chrome, Safari.
AAC (.aac): Supported by Safari, IE, iOS, Android.
MP4 (.mp4): Supported by IE, Chrome, Safari, iOS.

To Play an Audio File in HTML5

Royalty-free music can be found at Bensound. If you download a free track, please include attribution as required.

<audio controls>
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
  <!-- Additional sources if needed -->

  Your browser does not support the audio element.
  <a href="song.mp3">Download the audio</a>
</audio>

At a minimum, provide an MP3 and an Ogg version to cover most browsers. The controls, autoplay, loop, and preload attributes work similarly to those in the <video> element. If the browser does not support <audio>, the user will see any fallback text or link you provide.

Common Audio Attributes Explained

controls: Displays a built-in audio player with play, pause, and volume controls.
autoplay: Attempts to play audio automatically. Often requires muted or user interaction, depending on the browser.
loop: Repeats the audio track when it finishes.
preload: Gives the browser a hint on whether to preload the file (none, metadata, or auto).

Deployment Considerations

When deploying video or audio to a live site, keep the following in mind:

File Size & Bandwidth: Large media files can slow down page loads. Consider compressing your media or offering lower-resolution/bitrate versions.
Hosting Options: Self-hosting small files is fine for low-traffic sites. For higher volumes or large files, use a Content Delivery Network (CDN) or a dedicated streaming service like YouTube or Vimeo (for video) to reduce bandwidth stress on your server.
Responsive Design: If your layout is responsive, use CSS to adjust video or audio player widths on different screen sizes. Avoid fixed dimensions that break smaller displays.

Conversion Options

Free tools for converting audio or video:

Miro Video Converter – convert video to Ogg, WebM, MP4; or audio to MP3.
HandBrake – convert video to different formats.
media.io – online audio converter.