无法让我的自定义播放按钮在我的视频播放器上工作答案

【问题标题】：Unable to get my custom play button to work on my video player无法让我的自定义播放按钮在我的视频播放器上工作
【发布时间】：2019-03-05 21:49:36
【问题描述】：

我正在尝试制作自定义视频播放器，但在尝试使用 Javascript 播放和暂停视频时遇到了问题。我收到此错误：

Uncaught TypeError: Cannot read property 'pause' of null at togglePlayPause

这是我的 Javascript。 “.video”是我的视频播放器，“.orange-juice”是我的进度/时间栏，“play-pause”是我的播放和暂停按钮。

我还要提到我用 alert() 进行了测试，它似乎工作，所以我不太确定我错了什么。

// VIDEO

var video = document.querySelector(".video");
var juice = document.querySelector(".orange-juice");
var btn = document.getElementById("play-pause");

function togglePlayPause() {
  if (video.paused) {
    btn.className = "pause";
    video.play();
  } else {
    btn.className = "play";
    video.pause();
  }
}

btn.onclick = function() {
  togglePlayPause();
};

【问题讨论】：

你的video变量，指向一个没有pause()函数的dom元素。

标签： javascript video custom-controls video-player

【解决方案1】：

无法找到您列出的元素。本质上，它没有点击任何内容。您需要处理这些元素及其各自的类/ID。

<video class="video orange-juice" />
<button id="play-pause">Play/Pause</button>

【讨论】：

【解决方案2】：

谢谢大家，但我明白了。原来我在我的 html 中错过了我的 .video 类（总是那件小事）。现在一切正常。谢谢！

【讨论】：