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>





Related Posts:

  • Heading Tags The <h1> to <h6> tags create headings in HTML.where <h1> is the biggest and most important, and <h6> is the smallest and… Read More
  • HTML Comments it is used to understand the code written by someone.the browser will ignore the comments Types of Comments in HTMLSingle-line CommentsSing… Read More
  • Anchor Tag <a> tag defines a hyperlink, which is used to link from one page to another page.Key Characteristics of HTML Anchor LinksSpecified by the … Read More
  • Paragraph Horizontal and Line Break Tags The <p> tag defines a paragraph.Browsers automatically add a single blank line before and after each.<p>This is a paragraph.</p&g… Read More
  • HTML Attributes What is an HTML Attribute?HTML attributes provide additional information about HTML elements. Attributes are always specified in the start … Read More

0 Comments:

Post a Comment

Do leave your comments