Webpages can include not only images but also videos and audio.

<video>

The <video> tag is a block-level element used for embedding video. If the browser supports the video format, it displays a player; otherwise, it shows the content inside the <video> tag.

Here’s an example code snippet:

1
2
3
<video src="example.mp4" controls>
  <p>Your browser does not support HTML5 video. Please download the <a href="example.mp4">video file</a>.</p>
</video>

In this example, if the browser does not support the video format, it will display the text inside the <video> tag.

The <video> tag has several attributes:

  • src: URL of the video file.
  • controls: Displays the player controls. This is a boolean attribute, so simply including it will enable the controls. If you prefer a custom player, omit this attribute.
  • width: Width of the video player in pixels.
  • height: Height of the video player in pixels.
  • autoplay: Whether the video should play automatically. This is a boolean attribute.
  • loop: Whether the video should loop. This is a boolean attribute.
  • muted: Whether the video is muted by default. This is a boolean attribute.
  • poster: URL of the image to show as a placeholder before the video starts.
  • preload: Determines how the video should be buffered before playing. Values are none (no buffering), metadata (only metadata), or auto (buffer the entire file).
  • playsinline: Prevents iPhone’s Safari browser from automatically playing the video fullscreen. This is a boolean attribute.
  • crossorigin: Specifies whether to use cross-origin loading. Values are anonymous (no credentials) or use-credentials (send credentials).

Here’s an example with attributes:

1
2
3
4
<video width="400" height="400"
       autoplay loop muted
       poster="poster.png">
</video>

This sets a video player with a size of 400x400 pixels, autoplay, loop, and mute enabled, with a placeholder image. This is typical for background videos on a homepage.

HTML standards don’t specify which video formats browsers must support, so it’s up to browser vendors. To ensure compatibility, you can use the <source> tag to specify multiple formats:

1
2
3
4
5
<video controls>
  <source src="example.mp4" type="video/mp4">
  <source src="example.webm" type="video/webm">
  <p>Your browser does not support HTML5 video. Please download the <a href="example.mp4">video file</a>.</p>
</video>

In this code, the type attribute of the <source> tag specifies the video MIME type. The browser will try to load the first format it supports. If neither format is supported, it will show the fallback message.

<audio>

The <audio> tag is a block-level element used to embed audio content. Its usage is similar to the <video> tag.

Here’s an example of how to use the <audio> tag:

1
2
3
4
5
<audio controls>
  <source src="foo.mp3" type="audio/mp3">
  <source src="foo.ogg" type="audio/ogg">
  <p>Your browser does not support HTML5 audio. Please download the <a href="foo.mp3">audio file</a> directly.</p>
</audio>

In the code above, the <audio> tag includes <source> elements specifying two audio formats: MP3 and Ogg. The browser will use the first format it supports; if neither is supported, it will provide a download link.

The attributes of the <audio> tag are similar to those of the <video> tag, as described previously:

  • autoplay: Whether the audio should play automatically. This is a boolean attribute.
  • controls: Whether to display the playback controls. If not set, the browser will not show any controls, which is typically used for background audio.
  • crossorigin: Whether to use cross-origin requests.
  • loop: Whether the audio should loop continuously. This is a boolean attribute.
  • muted: Whether the audio should be muted by default. This is a boolean attribute.
  • preload: How the audio file should be buffered.
  • src: The URL of the audio file.

<track>

The <track> tag is used to specify subtitles for videos in the WebVTT format (.vtt files) and is placed inside the <video> tag. It is a self-closing tag without an end tag.

Here’s an example:

1
2
3
4
<video controls src="sample.mp4">
   <track label="English" kind="subtitles" src="subtitles_en.vtt" srclang="en">
   <track label="Chinese" kind="subtitles" src="subtitles_cn.vtt" srclang="cn" default>
</video>

In this example, the video includes English and Chinese subtitles.

The <track> tag has the following attributes:

  • label: The name of the subtitles displayed in the player for user selection.
  • kind: The type of track. The default value is subtitles, which translates foreign text (e.g., providing Chinese subtitles for an English video). Another common value is captions, which provides a textual description of the audio, often in the same language as the video (e.g., English captions for an English video).
  • src: The URL of the VTT subtitle file.
  • srclang: The language of the subtitles, which must be a valid language code.
  • default: Whether this track should be enabled by default. This is a boolean attribute.

<source>

The <source> tag is used within <picture>, <video>, and <audio> elements to specify external resources. It is a self-closing tag, meaning it does not have an end tag.

Its attributes include:

  • type: Specifies the MIME type of the external resource.
  • src: Defines the source file for <video> and <audio>.
  • srcset: Lists image files to be loaded under different conditions for <picture>.
  • media: Specifies media query expressions for <picture>.
  • sizes: Indicates the display sizes for different devices in <picture>, and must be used with srcset.

<embed>

The <embed> tag is used to embed external content controlled by browser plugins. Since default plugins vary between browsers, not all users may access this content. Use it with caution.

Here is an example of embedding a video player:

1
2
3
4
<embed type="video/webm"
       src="/media/examples/flower.mp4"
       width="250"
       height="200">

If the browser lacks an MP4 plugin, the video will not play. The <embed> tag has the following attributes:

  • height: Display height in pixels (percentages not allowed).
  • width: Display width in pixels (percentages not allowed).
  • src: URL of the embedded resource.
  • type: MIME type of the embedded resource.

The browser uses the type attribute to determine the MIME type and activate the appropriate plugin.

Here’s an example of using QuickTime to play MOV files:

1
<embed type="video/quicktime" src="movie.mov" width="640" height="480">

And an example for Flash:

1
2
3
4
5
<embed src="whoosh.swf" quality="medium"
       bgcolor="#ffffff" width="550" height="400"
       name="whoosh" align="middle" allowScriptAccess="sameDomain"
       allowFullScreen="false" type="application/x-shockwave-flash"
       pluginspage="http://www.macromedia.com/go/getflashplayer">

If Flash is not installed, users will be prompted to visit the URL in the pluginspage attribute.

<object>, <param>

The <object> tag, similar to <embed>, inserts external resources for browser plugins to handle. It is a standardized alternative, recommended for its consistency and fewer legacy issues.

Here’s an example of embedding a PDF file:

1
2
3
4
5
<object type="application/pdf"
    data="/media/examples/In-CC0.pdf"
    width="250"
    height="200">
</object>

If the browser has a PDF plugin, it will display the PDF within the page.

The <object> tag includes:

  • data: URL of the embedded resource.
  • form: ID of a related form in the current page (if any).
  • height: Display height in pixels (percentages not allowed).
  • width: Display width in pixels (percentages not allowed).
  • type: MIME type of the resource.
  • typemustmatch: Boolean attribute indicating if data and type must match.

Here’s an example for Flash content:

1
2
<object data="movie.swf"
  type="application/x-shockwave-flash"></object>

The <object> tag can also contain <param> tags to specify parameters needed by the plugin:

1
2
3
<object data="movie.swf" type="application/x-shockwave-flash">
  <param name="foo" value="bar">
</object>

Link to original article:

https://wangdoc.com/html/multimedia