Skip to content
Related Articles

Related Articles

HTML | DOM Video src Property
  • Last Updated : 05 Aug, 2019

The Video src property is used for setting or returning the value of the src attribute of a video.
The src attribute is generally used to specify the location (URL) of the video file.

Syntax:

  • Return the src property:
    videoObject.src
  • Set the src property:
    videoObject.src = URL

Property Values:

  • URL: It is used to specify the URL of the video file.

Return Value: The Video src property returns a string, which represents the URL of the video file. The src property returns the entire URL, including the protocol.

Below program illustrates the Video src property:



Example: Changing the URL of a video.




<!DOCTYPE html>
<html>
  
<head>
    <title>
        DOM Video src Property
    </title>
</head>
  
<body style="text-align: center">
  
    <h1 style="color: green">GeeksforGeeks</h1>
    <h2 style="font-family: Impact">Video src Property</h2>
    <br>
  
    <video id="Test_Video"
           width="360"
           height="240"
           controls src="sample video.ogg">
    </video>
  
    <p>To change the Url of the video,
      double click the "Change URL" button.
        <br>
  
        <button ondblclick="My_Video()">
          Change URL
      </button>
  
        <p id="test"></p>
  
        <script>
            var v = document.getElementById("Test_Video");
  
            function My_Video() {
                isSupp = v.canPlayType("video/mp4");
                if (isSupp == "") {
                    v.src = "sample2.ogg";
                } else {
                    v.src = "sample2.mp4";
                }
                v.load();
  
                document.getElementById("test").innerHTML = 
                "Video Courtesy - www.geeksforgeeks.org";
            }
        </script>
  
</body>
  
</html>


Output:

  • Before clicking the button:
  • After clicking the button:

Supported Browsers: The browser supported by HTML | DOM Video src Property are listed below:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Apple Safari

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :