Videos, Audio, and Embedding Simplified

Hey Devs!

Today, we’re diving into essential HTML concepts to wrap up your basics. We’ll explore how to work with media (videos and audio), understand the difference between embedding and hosting.
If you want to learn more about HTML basics or images you can refer to my blog [here](link to previous blog) or check out more topics on my profile.

List of Contents

1. Videos in HTML
2. Audios in HTML
3. Attributes in iframe tag
4. Attributes in video tag
5. Compatibility of Media Formats
6. The <source> Tag

Videos in HTML

When adding videos to your webpage, you can include them using the <video> tag. Videos can either be hosted locally on your server or device or referenced from an external URL. Here's how each approach works:

1. Locally Hosted Videos:
   In this case, you upload the video to your own server or device and use the <video> tag to reference it. This gives you more control over the file but requires server storage and bandwidth.

   Example:

   <video controls width="600">
     <source src="example.mp4" type="video/mp4">
     Your browser does not support the video tag.
   </video>
   

2. Externally Referenced Videos (via <video>):
   The <video> tag can also reference a video hosted on an external server through its URL. This is similar to embedding but still uses the browser's native video player for playback.

   Example:

   <video controls width="600">
     <source src="https://example.com/video.mp4" type="video/mp4">
     Your browser does not support the video tag.
   </video>
   

3. Embedded Videos (via <iframe>):
   For videos hosted on platforms like YouTube or Vimeo, you typically use an iframe to embed the platform’s video player directly into your page. This method streams the video through their player and includes additional features like subtitles, sharing, and recommendations.

   Example:

   <iframe 
     width="560" 
     height="315" 
     src="https://www.youtube.com/embed/example-video-id" 
     frameborder="0" 
     allowfullscreen>
   </iframe>
   

Clarifying the Difference

• Using <video> (Local or External):
  Videos played with the <video> tag use the browser's native video player. Whether the video is stored locally or on an external server, you have control over how it’s presented (e.g., controls, autoplay, etc.).

• Embedding via <iframe>:
  Embedding (as it’s commonly used in web development) refers to integrating external content directly from a platform like YouTube, Vimeo, or Google Maps. The platform provides the player, and you have limited control over its appearance and behavior.

Why Use External Links in <video>?

Using an external link with the <video> tag can be useful when:

• You want to share a video file hosted on a CDN (Content Delivery Network) or external server without embedding it via iframe.
• You still want to use the browser's native player instead of a third-party player like YouTube.

Example Use Case: Hosting a video on a dedicated media server or cloud storage like google drive, then linking it to your webpage using <video>.

Attributes in iframe tag

The iframe tag uses the following attributes to render videos:

1. src: Specifies the URL or source of the content to embed, such as a YouTube video or a webpage.

   <iframe src="https://www.youtube.com/embed/example-video-id"></iframe>
   

2. width and height: Define the dimensions of the iframe (in pixels).

   <iframe src="https://www.youtube.com/embed/example-video-id" width="560" height="315"></iframe>
   

3. frameborder: Specifies whether to display a border around the iframe.

   • Values:
     • 0 for no border
     • 1 to display a border

4. allowfullscreen: Allows the embedded content to be viewed in full-screen mode.

5. allow: Provides fine-grained control over permissions for the embedded content.
   Example (allow autoplay):

   <iframe src="https://www.youtube.com/embed/example-video-id" allow="autoplay"></iframe>
   

6. loading: Controls iframe loading behavior.

   • Values:
     • lazy: Loads the iframe only when it is visible in the viewport (saves bandwidth and improves performance).
     • eager: Loads the iframe immediately.

   <iframe src="https://www.youtube.com/embed/example-video-id" loading="lazy"></iframe>
   

You can use the loading attribute with other media tags too, like <video>, <img>, and <audio>.

Attributes in video tag

The video tag uses the following attributes to render videos:

1. controls: Adds playback controls like play, pause, volume, etc.

   <video src="example.mp4" controls></video>
   

2. autoplay: Starts playing the video as soon as it loads.

   <video src="example.mp4" autoplay muted></video>
   

3. muted: Ensures the video starts muted.

   <video src="example.mp4" autoplay muted></video>
   

4. loop: Causes the video to start again once it finishes.

   <video src="example.mp4" loop controls></video>
   

5. poster: Specifies an image to display as a placeholder before the video starts playing.

   <video src="example.mp4" poster="poster-image.jpg" controls></video>
   

6. preload: Defines how the browser should handle loading the video when the page loads.

   • Values:
     • auto: Preloads the entire video.
     • metadata: Loads only metadata (e.g., duration, dimensions).
     • none: Does not preload the video.
       Example:

   <video src="example.mp4" preload="metadata" controls></video>
   

Note: Some browsers require the muted attribute to autoplay.

Compatibility of Media Formats

When working with media, it’s important to consider the compatibility of file formats. Different browsers support different formats, and some formats may not render properly across all platforms.

For example, videos are commonly found in formats like:

• MP4 (.mp4): Widely supported across all modern browsers.
• WebM (.webm): Optimized for web use; supported by most modern browsers.
• Ogg (.ogv): Open-source but less commonly used.

Choosing the right formats ensures your videos play smoothly for all users. To maximize compatibility, always include multiple formats when adding media to your webpage.

Pro Tip: To check which formats are widely supported, you can refer to this website: caniuse.

The <source> Tag

Sometimes, finding a particular format for your video may be challenging. This is where the <source> tag is a lifesaver.

Using the <source> tag, you can include multiple formats of a video to ensure compatibility across different browsers. If the browser doesn’t support the first format, it will automatically try the next format until it finds one that works.

Benefits of the <source> Tag

1. Ensures Compatibility:
   Multiple formats ensure your video works seamlessly across all browsers.

2. Bandwidth Optimization:
   Browsers will render the most efficient format. For example:

   • WebM: Smaller file size, less bandwidth usage.
   • MP4: Universally compatible but may have a larger file size.

   By including both formats, the browser can choose the most suitable one, ensuring optimal performance and saving bandwidth.

Fallback Content

You can define a fallback message or alternative content for browsers that do not support the <video> tag. This is useful to provide a better user experience.

Example: Using <source> with <video>

Here’s how to use the <source> tag with the <video> tag:

<video controls width="600" autoplay muted>
  <source src="example.webm" type="video/webm">
  <source src="example.mp4" type="video/mp4">
  Your browser does not support the video tag. Please update your browser.
  <a href="link to video">Or follow this link to download the video</a>
</video>

In this example:

1. The browser will first try to load the WebM version.
2. If WebM is not supported, it will fall back to the MP4 version.
3. If none of the formats work, the fallback text will display.

Audios in HTML

To render audio in HTML, we use the <audio> tag. This tag allows you to embed and play audio files directly in the browser.

Just like videos, audio files may encounter compatibility issues across different browsers. As a lifesaver, the <source> tag can be used with the <audio> tag. This allows you to specify multiple formats of the same audio file, ensuring broader compatibility.

The <audio> tag supports most attributes used with the <video> tag, such as:

• src: Specifies the audio file location (local or external).
• autoplay: Automatically plays the audio when the page loads.
• muted: Ensures the audio starts muted.
• controls: Adds playback controls (play, pause, volume, etc.).
• preload: Determines how the browser loads the audio file.
• loop: Replays the audio once it finishes.

Example: Audio Tag with Attributes and Fallback

Below is an example of how to use the <audio> tag with attributes and fallback content. The <source> tag is used here to provide multiple file formats for compatibility.

<audio controls autoplay loop preload="metadata" muted>
  <source src="example.ogg" type="audio/ogg">
  <source src="example.mp3" type="audio/mpeg">
  Your browser does not support audio playback.
</audio>

Explanation:

1. controls: Displays playback controls for user interaction.
2. autoplay: Starts playback automatically when the page loads.
3. loop: Repeats the audio once it finishes.
4. preload="metadata": Loads only metadata (e.g., duration) to optimize performance.
5. muted: Starts the audio in a muted state.

The fallback message ("Your browser does not support audio playback.") will appear if the browser does not support the <audio> tag.

Quick Note on Audio with <video>

While the <video> tag can be used to play audio files, it is better to use the <audio> tag for audio-specific purposes. The <audio> tag is lighter and optimized for handling sound, making it a better choice for audio-only content.

And this wraps up our discussion on handling media in HTML. If you're interested in learning how to use images, check out this blog: Images, Tables, and Forms in HTML: Build a Basic Milk Selling Site.

With this, we've completed the HTML basics series. I hope you've followed along and found the information helpful. In the future, we'll create many awesome websites together and delve into CSS, so stay tuned!

Here is a list of all the blogs in the HTML series:

1. Introduction to HTML, CSS, and JavaScript: Learn how a website and webpage work, the roles of HTML, CSS, and JavaScript, and how to set up a development environment for creating simple websites.

2. A Beginner's Guide to HTML: Understand and learn the syntax of HTML, including inline and block elements. Also, discover why accessibility is important by learning the difference between semantic and non-semantic elements.

3. Images, Tables, and Forms in HTML: Build a Basic Milk Selling Site: Build a personal project and learn how to include images, tables, and forms in a webpage. Also, learn about IDs and labels for accessibility.

I hope you practice and hone your basics because we'll be moving towards the next hurdle soon: CSS. Until then, keep practicing and happy learning!