Ask a New Question
Menu

Recreate the HTML code that will produce the HTML with the first sample video.with example

1 answer

To recreate an HTML code snippet that embeds a sample video, we can use the <video> tag. Here's an example of how to do it:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample Video Example</title>
</head>
<body>
    <h1>My Sample Video</h1>
    <video width="640" height="360" controls>
        <source src="sample-video.mp4" type="video/mp4">
        <source src="sample-video.webm" type="video/webm">
        Your browser does not support the video tag.
    </video>
    <p>This is a sample video embedded in the HTML page.</p>
</body>
</html>

Explanation:

  1. DOCTYPE and HTML structure: We start with the <!DOCTYPE html> declaration to specify the document type and HTML5. The <html> tag wraps all other content.

  2. Head Section:

    • Inside the <head> tag, we set the character encoding to UTF-8 and ensure the viewport is set for responsive design.
    • The <title> tag defines the title of the page that appears in the browser tab.

  3. Body Section:

    • We create a heading (<h1>) that describes the content.
    • The <video> tag is used to embed the video. The controls attribute adds play, pause, and volume control options.
    • Inside the <video> tag, there are <source> tags for different video formats. The browser will choose the format it supports.
    • A fallback message ("Your browser does not support the video tag.") is included for browsers that do not support the HTML5 video tag.
    • Finally, there’s a paragraph providing some additional context.

Note:

  • Replace "sample-video.mp4" and "sample-video.webm" with the actual paths to your video files if you want to test this code with real videos.
  • The video files should be placed in the same directory as your HTML file or use the appropriate relative/absolute path.