AUDIO TAG IN HTML

Audio files can be embedded in HTML using a <audio></audio> usually .mp3 files are used and so it's a best practice to use audio tags nested inside a figure tag and using figcaption for adding meta data about the embedded audio file.

<figure>
      <figcaption>Listen to the T-Rex:</figcaption>
      <audio controls src="/media/cc0-audio/t-rex-roar.mp3">
        <a href="/media/cc0-audio/t-rex-roar.mp3"> Download audio </a>
      </audio>
</figure>

Just adding src attribute to <audio> tag does not make things visible on the target page, but in the above example as we can see we used an attribute called controls which adds buttons for the audio playback controls and also gives a visual appearance for our embedded audio tag.

Attributes : -

Auto Play

autoplay A Boolean attribute: if specified, the audio will automatically begin playback as soon as it can do so, without waiting for the entire audio file to finish downloading.

Loop

Loop means repeating the same thing again and again and this attribute exactly does the same. A Boolean attribute: if specified, the audio player will automatically seek back to the start upon reaching the end of the audio.

Muted

The audio file will not be played automatically upon loading of the web page. A Boolean attribute that indicates whether the audio will be initially silenced. Its default value is false.

Preload

The preload attribute specifies if and how the author thinks that the audio file should be loaded when the page loads. The preload attribute allows the author to provide a hint to the browser about what he/she thinks will lead to the best user experience. This attribute may be ignored in some instances.

Video Tag in HTML

The video tag in html is used to embed raw videos(Present locally in the system) into web pages. In a similar manner to the <img> element, we include a path to the media we want to display inside the src attribute; we can include other attributes to specify information such as video width and height, whether we want it to autoplay and loop, whether we want to show the browser's default video controls, etc.

<video controls width="250">

    <source src="/media/cc0-videos/flower.webm"
            type="video/webm">

    <source src="/media/cc0-videos/flower.mp4"
            type="video/mp4">

    Download the
    <a href="/media/cc0-videos/flower.webm">WEBM</a>
    or
    <a href="/media/cc0-videos/flower.mp4">MP4</a>
    video.
</video>

Attributes : -

Autoplay

A Boolean attribute; if specified, the video automatically begins to play back as soon as it can do so without stopping to finish loading the data. To disable video autoplay, autoplay="false" will not work; the video will autoplay if the attribute is there in the <video> tag at all. To remove autoplay, the attribute needs to be removed altogether.

Auto picture-in-picture

A Boolean attribute which if true indicates that the element should automatically toggle picture-in-picture mode when the user switches back and forth between this document and another document or application.

Controls

Just like with the audio tag controls attributes allow the media to be controlled like pause/play and previous/fastforward. If this attribute is present, the browser will offer controls to allow the user to control video playback, including volume, seeking, and pause/resume playback.

Height

The height of the video's display area, in CSS pixels (absolute values only; no percentages).

Loop

A Boolean attribute; if specified, the browser will automatically seek back to the start upon reaching the end of the video.

Muted

A Boolean attribute that indicates the default setting of the audio contained in the video. If set, the audio will be initially silenced. Its default value is false, meaning that the audio will be played when the video is played.

Playsinline

A Boolean attribute indicating that the video is to be played "inline", that is within the element's playback area. Note that the absence of this attribute does not imply that the video will always be played in fullscreen mode.

Poster

A URL for an image to be shown while the video is downloading. If this attribute isn't specified, nothing is displayed until the first frame is available, then the first frame is shown as the poster frame.

Preload

This enumerated attribute is intended to provide a hint to the browser about what the author thinks will lead to the best user experience regarding what content is loaded before the video is played. It may have one of the following values:

• none: Indicates that the video should not be preloaded.
• metadata: Indicates that only video metadata (e.g. length) is fetched.
• auto: Indicates that the whole video file can be downloaded, even if the user is not expected to use it.
• empty string: Synonym of the auto value. The default value is different for each browser. The spec advises it to be set to metadata.

Src

The URL of the video to embed. This is optional; you may instead use the <source> element within the video block to specify the video to embed.

Width

The width of the video's display area, in CSS pixels (absolute values only; no percentages).

Reference MDN Web Docs