HTML Tutorial: Introduction of the Video Tag

HTML Tutorial: Introduction of the Video Tag

byRAYS CODING -
0
In this HTML tutorial, we will discuss the HTML Video tag. Let's see what an HTML video tag is and how to use it.

HTML TUTORIAL


If you want to add video content to the web pages on your website, So you can do it with the help of the HTML video tag.

What is a Video Tag

That Video tag is an HTML tag, used to add video content on the web pages of any website. This HTML video tag supports the multiple attributes for controlling the video, How to display the video, and interacting with it by users. 

Syntax of the video tag

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Video Example</title>
    </head>
    <body>
        <video src="video1.mp4" controls width="640" height="360"></video>
    </body>
    </html>

Explain the code

<Video>: This HTML tag defines the video element.

SRC attribute: In this attribute, we can define the path of the video file.

Controls: With the help of this attribute we can control the pause, volume, and play of the video.

Attributes Description Basic Syntax Type Note
src Specifies the URL of the video file to be played. <video src="movie.mp4"></video> This attribute can be omitted if you use the <source> tag to define multiple video formats.
controls Adds playback controls like play, pause, volume, etc., to the video player. <video controls src="movie.mp4"></video> Boolean attribute Does not require a value; simply adding it enables controls.
autoplay The video automatically starts playing as soon as it is ready. <video autoplay src="movie.mp4"></video> Boolean attribute Some browsers may block autoplay, especially if the video has sound.
loop The video will start over again, looping indefinitely, once it reaches the end. <video loop src="movie.mp4"></video> Boolean attribute
muted The video will be muted by default when it starts playing. <video muted src="movie.mp4"></video> Boolean attribute
poster Specifies an image to be shown while the video is loading, before the user plays it, or if the video fails to load. <video poster="image.jpg" src="movie.mp4"></video> The poster image will be replaced by the first frame of the video once it starts playing.
preload Provides a hint to the browser about whether the video data should be preloaded or not. <video preload="auto" src="movie.mp4"></video>
  1. auto: The entire video file should be downloaded when the page loads (default behavior).
  2. metadata: Only metadata (e.g., video duration, dimensions) should be loaded.
  3. none: The video file should not be preloaded (This is the default value).
width & height Specifies the width and height of the video player in pixels. <video width="640" height="360" src="movie.mp4"></video> Number (pixels) If not specified, the video will use its intrinsic dimensions.
playsinline Ensures that the video plays inline within the webpage, instead of in fullscreen, on mobile devices. <video playsinline src="movie.mp4"></video> Boolean attribute Especially useful on iOS devices.
crossorigin Specifies how the video file should be handled in terms of CORS (Cross-Origin Resource Sharing). <video crossorigin="anonymous" src="movie.mp4"></video>
  1. anonymous: The video can be fetched without credentials.
  2. use-credentials: The video should be fetched with credentials such as cookies and HTTP authentication.
 This attribute is particularly useful when the video is hosted on a different domain.

Use all attributes

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Video Example</title>
    </head>
    <body>
        <video
            src="video1.mp4"
            controls
            width="640"
            height="360"
            autoplay
            loop
            muted
            poster="poster-image.jpg"
            preload="auto"
            playsinline
            crossorigin="anonymous">
            Your browser does not support the video tag.
        </video>
    </body>
    </html>

Conclusion

The HTML `<video>` tag is very important for embedding video content on a web page. This tag lets you display the video directly on the website and includes a variety of controls and options, such as playing the video automatically, muting it, or repeating it. Overall, the `<video>` tag can help you make your web page even more interactive and engaging.
Tags

You may like these posts

Post a Comment

Previous Post Next Post

Recent in Technology

Responsive Advertisement