Video & Audio Tags

       No comments




<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>





0 Comments:

Post a Comment

Do leave your comments