Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Video src Property
The HTML DOM Video src property returns or sets the URL of the video file for a video element. This property corresponds to the src attribute of the HTML <video> element and allows you to dynamically change or retrieve the video source using JavaScript.
Syntax
Following is the syntax for getting the video source −
videoObject.src
Following is the syntax for setting the video source −
videoObject.src = "URL"
Parameters
URL − A string representing the absolute or relative URL of the video file to be loaded.
Return Value
The property returns a string containing the complete URL of the currently loaded video file, or an empty string if no source is set.
Example − Getting Video Source URL
Following example demonstrates how to retrieve the video source URL using the src property −
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Video src Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Get Video Source URL</h2>
<video id="myVideo" width="320" height="240" controls>
<source src="sample-video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video><br><br>
<button onclick="getVideoSrc()">Get Video URL</button>
<p id="result"></p>
<script>
function getVideoSrc() {
var video = document.getElementById("myVideo");
var url = video.src;
document.getElementById("result").innerHTML = "Video URL: " + url;
}
</script>
</body>
</html>
The output displays the complete URL of the video file −
Video URL: file:///path/to/your/sample-video.mp4
Example − Setting Video Source Dynamically
Following example shows how to change the video source using the src property −
<!DOCTYPE html>
<html>
<head>
<title>Set Video Source Dynamically</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Change Video Source</h2>
<video id="dynamicVideo" width="320" height="240" controls>
<source src="video1.mp4" type="video/mp4">
Your browser does not support the video tag.
</video><br><br>
<button onclick="changeVideo('video1.mp4')">Load Video 1</button>
<button onclick="changeVideo('video2.mp4')">Load Video 2</button>
<button onclick="changeVideo('video3.mp4')">Load Video 3</button>
<p id="currentVideo"></p>
<script>
function changeVideo(videoUrl) {
var video = document.getElementById("dynamicVideo");
video.src = videoUrl;
video.load(); // Reload the video element
document.getElementById("currentVideo").innerHTML = "Current video: " + videoUrl;
}
</script>
</body>
</html>
Each button loads a different video file by updating the src property and calling load() to refresh the video element.
Example − User Authentication for Video Access
Following example demonstrates controlling video access based on user authentication −
<!DOCTYPE html>
<html>
<head>
<title>Video Access Control</title>
<style>
.container {
width: 70%;
margin: 0 auto;
text-align: center;
padding: 20px;
}
input[type="button"] {
border-radius: 5px;
padding: 8px 16px;
margin: 5px;
}
input[type="text"] {
padding: 8px;
margin: 5px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<div class="container">
<h2>Video Access Control</h2>
<video id="secureVideo" width="320" height="240" controls>
<source src="protected-video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video><br><br>
<input type="text" id="username" placeholder="Enter username"><br>
<input type="button" onclick="checkAccess()" value="Get Video URL">
<div id="message" style="margin-top: 15px; font-weight: bold;"></div>
</div>
<script>
function checkAccess() {
var username = document.getElementById("username").value;
var video = document.getElementById("secureVideo");
var messageDiv = document.getElementById("message");
if (username === 'admin') {
messageDiv.innerHTML = 'Video URL: ' + video.src;
messageDiv.style.color = 'green';
} else {
messageDiv.innerHTML = 'Access denied. Unauthorized user.';
messageDiv.style.color = 'red';
}
}
</script>
</body>
</html>
The output shows different messages based on the username entered −
For username 'admin': Video URL: file:///path/to/protected-video.mp4 (green text) For other usernames: Access denied. Unauthorized user. (red text)
Key Points
The
srcproperty always returns the complete absolute URL, even if a relative URL was originally set.When changing the
srcproperty, callvideo.load()to reload the video element with the new source.The property returns an empty string if no source is currently set.
Setting a new
srcvalue will stop the current video and prepare to load the new one.
Browser Compatibility
The Video src property is supported by all modern browsers that support the HTML5 video element, including Chrome, Firefox, Safari, Edge, and Opera.
Conclusion
The HTML DOM Video src property provides a simple way to get or set the video source URL dynamically. It is essential for creating interactive video applications where you need to switch between different video files or implement access control mechanisms based on user authentication.
163 Views
