为什么Javascript不能识别事件监听器中的变量

Question

这是我的带有按钮的简单视频播放器的代码。

var vid = document.getElementById("bgvid");
var playButton = document.querySelector(".playbtn");
var stopButton = document.querySelector(".stopbtn");

playButton.addEventListener("click", function() {
    vid.play();
})

document.addEventListener("click", function() {
    vid.pause();
})

视频正在循环播放但是当我尝试添加这些事件监听器时，我收到了错误...

  

未捕获的TypeError：无法读取null

的属性'addEventListener'

我的变量出了什么问题，为什么它们不被识别？