0

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
})
funbuns
  • 9
  • 1
  • You'd need to set the `src` and `poster` properties, not `innerText` – Phil Apr 14 '22 at 04:21
  • Hi, I changed it to `document.getElementById("firstvid").setAttribute("src", data.data[0].assets[4].url) document.getElementById("firstthumbnail").setAttribute("poster", data.data[0].thumbnails[0].url)` For some reason my console is giving me this error: `Uncaught (in promise) TypeError: Cannot read properties of null (reading 'setAttribute')` – funbuns Apr 14 '22 at 05:06
  • If you didn't get a similar warning previously for the `innerText` property, then it means you've changed something else – Phil Apr 14 '22 at 05:09
  • I forgot to mention that when I had the `innerText` property, it still gave the same error. I'm not sure why since the ids are the same. I tried removing the hashtags too.. – funbuns Apr 14 '22 at 05:25
  • Probably this ~ [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/q/14028959/283366) – Phil Apr 14 '22 at 05:27

2 Answers2

0

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

Hermanboxcar
  • 418
  • 1
  • 13
0

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

document.getElementById("firstvid").setAttribute("src", data.data[0].assets[4].url);
Eren Özdemir
  • 16
  • 2