Error: Cannot set property 'src' of null

Question

When I try to set the source of a certain element, it returns an error and I have no clue why this is not working. Here is the javascript:

    function playVid() {
  var videoPlayer = document.getElementById("video");
  var mp4VID = document.getElementById("videoSRC");
  var arrOfVid = ["video/video.mp4","video/video1.mp4"]; //, "video/video2.mp4", "video/video3.mp4"];
  var arrLenVID = arrOfVid.length;
  var randomVID = Math.floor((Math.random() * arrLenVID));
  mp4VID.src = arrOfVid[randomVID]; // mp4VIDSRC.src = arrOfVid[randomVID]
  videoPlayer.load();
  videoPlayer.volume = 0;
  videoPlayer.play();
}
playVid();

The HTML part of it is:

<video id="video" autoplay="" style="" muted="">
<source id="videoSRC" src="video/video.mp4" type="video/mp4"> 
    error: unsupported video format
</video>

Here's the error message I'm receiving:

Uncaught TypeError: Cannot set property 'src' of null

Nothing else seems to cross paths with it.

`Cannot set property 'src' of null` means that you haven't successfully selected an element. You have probably included the script before the HTML. — connexo, Feb 24 '18 at 01:17

score 2 · Accepted Answer · edited Feb 24 '18 at 04:43

2

When an HTML page is loaded, the browser attempts to execute things in the top of the page before the page is completely loaded. So if your javascript function call (playVid();) is at the top of the page, it is trying to execute var mp4VID = document.getElementById("videoSRC"); before the videoSRC is loaded. Therefore mp4VID is null, and you can't set a property on a null object. You have two options if this is the case.

1) move the function call to the bottom of the page, just before the closing html tag.

2) Use a framework like jQuery and schedule the function call to execute after the page is loaded $(document).ready(playVid); for example.

#2 is my preferred method:

In my experience, most people don't like when videos start to automatically play.

edited Feb 24 '18 at 04:43

The Real Fake Admin

35
7

answered Feb 24 '18 at 01:34

bcr666

2,157
1
12
23

Thanks have been digging at this for days! – Ashwin Feb 25 '18 at 04:30
@Ashwin if this is the answer you accepted, could you please mark it as accepted by clicking the check mark by the vote up/down. Thank you. – bcr666 Feb 25 '18 at 18:21

score 1 · Answer 2 · answered Feb 24 '18 at 01:41

1

You can't set it to a value because mp4VID is a child of video: instead set var mp4VID to equal videoPlyr.children["videoSRC"].

Hope this answered your question :)

answered Feb 24 '18 at 01:41

The Real Fake Admin

35
7

Error: Cannot set property 'src' of null

2 Answers2

Linked