Using Javascript queryselector ‘video’ getattribute ‘src’

Ever wondered how to grab the video URL from a webpage using JavaScript? Maybe you’re building a custom video player. Or you’re just curious about how things work under the hood. Either way—you’re in for a treat!

TL;DR: You can use JavaScript’s querySelector to target the <video> tag and then use getAttribute(‘src’) to get its URL. This is super useful when you want to dynamically access the video source. It’s quick, easy, and works just like magic. Read on to learn how to use it like a pro!

📹 What’s the video tag in HTML?

The <video> tag lets us show videos on web pages. It can have different sources, and it plays videos right in the browser. Here’s an example:

<video src="movie.mp4" controls></video>

Simple, right? This line of HTML is doing a lot more than meets the eye.

👀 So, what is querySelector?

querySelector is a JavaScript method. It lets you grab the first HTML element that matches a given CSS selector.

Want to get the first video on a page? Easy:

const video = document.querySelector('video');

This line says: “Hey browser, bring me the first <video> element you find!”

And now that you have it, you can do cool stuff with it. Like get its source (the URL of the video).

🎯 How to get the ‘src’ of a video

Each HTML element can have attributes. And src is one of them. It tells the video tag where to find the media file.

Here’s the magic trick:

const vid = document.querySelector('video');
const videoSource = vid.getAttribute('src');
console.log(videoSource);

That’s it! You’ve just made the browser tell you where the video file is located.

Note: If the video uses <source> tags inside the <video>, there’s a tiny twist. More on that later!

🧙‍♂️ What if there’s more than one video?

In that case, querySelector only grabs the first one. But you can use querySelectorAll like this:

const allVideos = document.querySelectorAll('video');

allVideos.forEach((vid, index) => {
  console.log(`Video ${index + 1} source:`, vid.getAttribute('src'));
});

You’ll loop through all the videos and grab each one’s source. Powerful, right?

⚠️ The gotcha: source tags inside video

Sometimes the video file isn’t directly on the video tag. It hides inside a nested <source> tag like this:

<video controls>
  <source src="trailer.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

In this case, getAttribute(‘src’) on the video won’t work. It returns null!

What you need to do is dive into the child:

const vid = document.querySelector('video');
const source = vid.querySelector('source');
const videoSource = source.getAttribute('src');
console.log(videoSource);

And there you go! Even when the video file is tucked away inside, you can still grab it.

💥 Real-world scenarios

Here are a few cool things you might want to do with the video URL:

• Show it on the page – for users to copy or download.
• Log it to analytics – find out which videos are being loaded.
• Swap the video source – dynamically load different videos.

Need to change the source too? Yup, you can do that:

const vid = document.querySelector('video');
vid.setAttribute('src', 'new-video.mp4');
vid.load();
vid.play();

Just like that, a new video is playing in your app!

🎨 Combining HTML and JavaScript for a fun tool

Let’s build a mini tool that shows the video URL when you click a button. First, some HTML:

<video id="myVideo" src="funny-cat.mp4" controls></video>
<button id="getSrcBtn">Get Video URL</button>
<p id="output"></p>

And now, the JavaScript magic:

const btn = document.getElementById('getSrcBtn');
const video = document.getElementById('myVideo');
const output = document.getElementById('output');

btn.addEventListener('click', () => {
  const src = video.getAttribute('src');
  output.textContent = `Video Source: ${src}`;
});

Now when you click the button, it shows you the video’s URL. Fun and useful!

🌍 Use cases in the wild

This trick has real web power. Developers use it for:

• Video streaming apps
• Educational platforms
• Custom media players
• Interactive UI elements
• Debugging and testing video availability

You can even extend it to grab subtitles by looking for the <track> tag.

🛠️ Quick troubleshooting tips

If your getAttribute(‘src’) returns null, here are a few things to check:

1. Is there a src attribute on the <video> directly?
2. Is the video using <source> tags instead?
3. Is the tag being loaded dynamically? Maybe your JavaScript runs too early.
4. Use console.log(video) to inspect and see what you’re working with.

✅ Final thoughts

Using JavaScript to get the video URL is simpler than you think. Whether you’re developing a major media site or just tinkering with a personal project, a few lines of code can go a long way.

Here’s a quick recap:

• Use document.querySelector(‘video’) to find the tag
• Use getAttribute(‘src’) to grab the video file URL
• If using <source> tags, just drill one level deeper

JavaScript makes it fun and flexible. You’re now one step closer to mastering web video magic!

Go forth, code cool stuff, and don’t forget to pause for some popcorn. 🍿