Media Attributes

Media elements, such as `<video>` and `<audio>`, have several attributes that allow you to control their behavior and appearance. Here are some common attributes for both `<video>` and `<audio>` elements:

  1. `src`: Specifies the URL of the media file. This attribute can be used directly on the media element, but it's recommended to use the `<source>` element to provide multiple formats for better compatibility.
<video src="movie.mp4" controls></video>
  1. `controls`: Adds native playback controls to the media element, such as play, pause, and volume control.
<video src="movie.mp4" controls></video>
  1. `autoplay`: Specifies that the media should start playing automatically as soon as it is ready. Note that some browsers may block autoplay for usability reasons, especially when the media has an audio track.
<video src="movie.mp4" autoplay></video>
  1. `loop`: Specifies that the media should loop back to the beginning and start playing again once it reaches the end.
<video src="movie.mp4" loop></video>
  1. `muted`: Specifies that the media should be muted by default.
<video src="movie.mp4" muted></video>
  1. `preload`: Provides a hint to the browser about how the media file should be preloaded. It accepts three values: `auto` (preload the entire media file), `metadata` (preload only metadata), and `none` (do not preload).
<video src="movie.mp4" preload="metadata"></video>
Additionally, the `<video>` element has some specific attributes:
  1. `width`: Specifies the width of the video element.
<video src="movie.mp4" width="320" controls></video>
  1. `height`: Specifies the height of the video element.
<video src="movie.mp4" height="240" controls></video>
  1. `poster`: Specifies an image to be displayed as a placeholder before the video starts playing.
<video src="movie.mp4" poster="poster.jpg" controls></video>
These attributes provide you with greater control over the behavior and appearance of media elements in your web pages. It's important to note that some attributes and behaviors may vary across different browsers due to their implementation or user settings.
Was this page helpful?