How to define the URL of the video file in HTML5?

Last Updated : 25 Jul, 2024

In this article, we will learn how to define the URL of a video in HTML. The <video> tag is used to embed video files on a web page. This displays a video player along with the player controls depending on the browser. The source of the video can either be a singular one or it can be made to support multiple formats of the video so that multiple browsers support the video playback.

Approach:

The <video> tag has an attribute src which is used to specify the path from where the video file would be loaded. When multiple sources are to be specified, the src attribute can also be used with each of the <source> tags to define the path of that source video file. We will use this attribute to define the URL of the video file.

Syntax:

<video src="path_to_video.mp4"></video>

<video>
  <source src="path_to_video.mp4" type="video/mp4">
  <source src="path_to_video.ogg" type="video/ogg">
</video>

Example 1: In this example, the attribute is used with the <video> tag. It illustrates the src attribute to define the URL of the video files.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
  
    <title>
      How to define the URL of 
    	the video file in HTML5?
   </title> 
  
</head>
  
<body>
  <h1 style="color: green;">
    GeeksforGeeks
  </h1>
  <h3>
    How to define the URL of 
    the video file in HTML5?
  </h3>
  
  <!-- Specify the source of
  the video file -->
  <video src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210314115545/sample-video.mp4"
        width="480" height="360" controls>
    The browser does not support videos.
  </video>
</body>
 
</html>

Output:

Example 2: In this example, the attribute is used with the <source> tag to define multiple video sources.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>HTML5 Video Example</title>
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
          rel="stylesheet" 
          integrity=
"sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" 
          crossorigin="anonymous">
    <style>
        body {
            background-color: #f8f9fa;
            color: #212529;
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }

        h1 {
            color: #28a745;
            font-size: 2.5rem;
            margin-bottom: 20px;
            text-align: center;
        }

        h3 {
            color: #343a40;
            font-size: 1.5rem;
            margin-bottom: 20px;
            text-align: center;
        }

        .video-container {
            max-width: 100%;
            width: 80%;
            margin: 0 auto;
            background-color: #fff;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            padding: 10px;
        }

        video {
            width: 100%;
            height: auto;
            border-radius: 8px;
        }

        @media (max-width: 768px) {
            .video-container {
                width: 95%;
            }

            h1 {
                font-size: 2rem;
            }

            h3 {
                font-size: 1.25rem;
            }
        }
    </style>
</head>

<body>
    <div class="container text-center">
        <h1>GeeksforGeeks</h1>
        <h3>How to define the URL of the video file in HTML5?</h3>
        <div class="video-container">
            <!-- Specify the source of the video file -->
            <video controls>
                <source src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210314115545/sample-video.mp4" 
                        type="video/mp4">
                <source src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240724194402/demo_trail_course.ogg" 
                        type="video/ogg">
                Your browser does not support the video tag.
            </video>
        </div>
    </div>
</body>

</html>