javascript - 错误: Cannot set property 'src' of null

Question

当我尝试设置某个元素的源时，它返回一个错误，我不知道为什么这不起作用。 这是 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();

它的 HTML 部分是:

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

这是我收到的错误消息:

Uncaught TypeError: Cannot set property 'src' of null

似乎没有其他东西可以与之交叉。

Answer 1

加载 HTML 页面时，浏览器会在页面完全加载之前尝试执行页面顶部的内容。因此，如果您的 javascript 函数调用 (playVid();) 位于页面顶部，则它会尝试执行 var mp4VID = document.getElementById("videoSRC"); 在加载 videoSRC 之前。因此 mp4VID 为 null，并且您无法在 null 对象上设置属性。如果是这种情况，您有两个选择。

1) 将函数调用移动到页面底部，就在结束 html 标记之前。

2) 使用 jQuery 等框架并安排函数调用在页面加载后执行 $(document).ready(playVid); 例如。

#2 是我的首选方法:

根据我的经验，大多数人不喜欢视频开始自动播放。