Open In App

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

Last Updated : 17 Mar, 2021
Improve
Improve
Like Article
Like
Save
Share
Report

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>

Or

<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




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




<html>
<body>
  <h1 style="color: green;">
    GeeksforGeeks
  </h1>
  <h3>
    How to define the URL of the
    video file in HTML5?
  </h3>
  <video width="480" height="360" controls>
      
    <!-- Specify the source of
    the video file -->
    <source src="sample-video.mp4"
            type="video/mp4">
    <source src="sample-video.ogg" 
            type="video/ogg">
    The browser does not support videos.
  </video>
</body>
</html>


Output:



Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads