I'm new to HTML, JS and JSON and I'm having some trouble loading a video url from JSON file. I downloaded the JSON file from https://ign-apis.herokuapp.com/videos?startIndex=30&count=5. When I use console.log(data.data[0].assets[4].url), it displays the correct url and I'm able to view the video on the new window but I can't seem to get it to display and run on my html page.
index.html
<video width="1100px" height="555px" poster id="firstthumbnail">
<source src id="firstvid" type="video/mp4"> <!--First video-->
</video>
<script src="script.js"></script>
script.js
fetch("videos.json")
.then(response => response.json())
.then(data => {
console.log(data)
document.querySelector("#firstvid").innerText = data.data[0].assets[4].url
document.querySelector("#firstthumbnail").innerText = data.data[0].thumbnails[0].url
})
the innerText property of an element decides what is displayed as text in the element. Instead of using .innerText, use .src.
You must set src attribute to your video tag. Try this:
document.getElementById("firstvid").setAttribute("src", data.data[0].assets[4].url);