Video & Audio Tags

<video> Tag

• The <video> HTML element embeds a media player that supports video playback into the document.

• The <video> tag creates a container for the video content. It also supports audio content but for better control of audio content, use the <audio> tag.

<video src="URL" height="value" width="value" controls>
  This text is used for the browser which does not support the video element.
</video>

Attributes for <video> Tag

• src: Specifies the path to the video file.
• controls: Adds video controls, like play, pause, and volume.
• autoplay: Automatically starts playing the video when the page loads.

    <video height="225" width="400" controls autoplay>

        <source src="night-sky.mp4" type="video/mp4">

        Your browser doesn't support video element.

    </video>

• loop: Repeats the video once it ends.

    <video height="225" width="400" controls autoplay loop>

        <source src="night-sky.mp4" type="video/mp4">

        Your browser doesn't support video element.

      </video>

• muted: Mutes the video by default.

    <video height="225" width="400" controls autoplay muted>

        <source src="night-sky.mp4" type="video/mp4">

        Your browser doesn't support video element.

      </video>

• poster: Specifies an image to be displayed before the video starts playing.

    <video height="225" width="400" controls poster="night-sky.jpg">

        <source src="night-sky.mp4" type="video/mp4">

        Your browser doesn't support video element.

      </video>

• width and height: Specifies the dimensions of the video.

• preload: attribute is used to specify if and how the video should be loaded when the page loads.

 <video height="225" width="400" controls preload="auto">

        <source src="night-sky.mp4" type="video/mp4">

        Your browser doesn't support video element.

      </video>

     

      <video height="225" width="400" controls preload="metadata">

        <source src="night-sky.mp4" type="video/mp4">

        Your browser doesn't support video element.

      </video>

     

      <video height="225" width="400" controls preload="none">

        <source src="night-sky.mp4" type="video/mp4">

        Your browser doesn't support video element.

      </video>

Video Multiple Source

 <video height="225" width="400" controls>

        <source src="night-sky.mp4" type="video/mp4">

        <source src="night-sky.ogg" type="video/ogg">

        Your browser doesn't support video elements.

      </video>




<audio> Tag

• Audio (<audio>): The <audio> element is used to embed audio content in a webpage. It supports various audio formats and provides controls for playback.

<audio src="audio.mp3" controls></audio>

Attributes:

• controls: Adds playback controls (play, pause, volume, etc.).
• autoplay: Starts playback automatically. loop: Repeats the media indefinitely.
• preload: Specifies if the media should be loaded when the page loads. poster:
• Displays an image before the media loads. 

<audio controls autoplay muted>

        <source src="./audio/ambient-inspiration-136110.mp3"

type="audio/mp3" />

        Your browser does not support the audio element.

    </audio>