How do I store JSON url to JS variable and load the video on HTML page?-CodePudding

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
})

CodePudding user response：

the innerText property of an element decides what is displayed as text in the element. Instead of using .innerText, use .src.

CodePudding user response：

You must set src attribute to your video tag. Try this:

document.getElementById("firstvid").setAttribute("src", data.data[0].assets[4].url);