Catch SRC value from Source tag with JS

Question

I have to get the SRC value of the Source tag of this code:

<video id="vp1_html5_FC" preload="auto" width="100%" height="100%" controls=""><source src="http://www.blogger.com/video-play.mp4?contentId=23bfbcf30d33ff96" type="video/mp4"></video>

I tried with the following script:

var el = document.getElementById("vp1_html5_FC");
var tag= el.document.getElementByTagName("source")[0].src;
alert(tag);

Answer 1

You don’t need all this if you only have one video on the page:

var tag= document.querySelector("video source").src;
alert(tag);

<video id="vp1_html5_FC" preload="auto" width="100%" height="100%" controls=""><source src="http://urldeexemplo.com/video=1" type="video/mp4"></video>

If you have more than one video on the page

let tags = document.querySelectorAll("video source");
tags.forEach(function(item) {
  alert(item.src);
});

<video id="vp1_html5_FC" preload="auto" width="100%" height="100%" controls=""><source src="http://urldeexemplo.com/video=1" type="video/mp4"></video>
<video id="vp1_html5_FC" preload="auto" width="100%" height="100%" controls=""><source src="http://urldeexemplo.com/video=2" type="video/mp4"></video>
<video id="vp1_html5_FC" preload="auto" width="100%" height="100%" controls=""><source src="http://urldeexemplo.com/video=3" type="video/mp4"></video>
<video id="vp1_html5_FC" preload="auto" width="100%" height="100%" controls=""><source src="http://urldeexemplo.com/video=4" type="video/mp4"></video>

Reference

• querySelector
• querySelectorAll