Question

我正在尝试在html和CSS中制作自定义视频。当我尝试单击“播放”按钮时，弹出以下错误：未捕获的TypeError：无法读取null的“暂停”属性

我也尝试使用document.getReady而不是window onload，但是仍然发生错误。知道为什么吗？

window.onload = function() {
  //video
  var video = document.getElementById("video-container__video");
  //Buttons 
  var playButton = document.getElementById("video-controls__play-pause");
  var muteButton = document.getElementById("video-controls__mute");
  var fullScreenButton = document.getElementById("video-controls__full-screen");

  //sliders
  var seekbar = document.getElementById("video-controls__seek-bar");
  var volumebar = document.getElementById("video-controls__volume-bar");

  //event listener for the play and pause button

  playButton.addEventListener("click", function() {
    if (video.paused == true) {
      video.play();

      //button text will change to Pause
      playButton.innerHTML = "Pause";
    } else {
      //pause the video
      video.pause();
      //button will update its text to play
      playButton.innerHTML = "Play";
    }
  });
}

<div class="video-container">
    <!-- Video -->
    <video class="video-container__video" width="640" height="365">
      <source src='_assets/media/big_buck_bunny.mp4' type='video/mp4'>
    </video>
<div id="video-controls">
  <button type="button" id="video-controls__play-pause">Play</button>
  <input type="range" id="video-controls__seek-bar" value="0">
  <button type="button" id="video-controls__mute">Mute</button>
  <input type="range" id="video-controls__volume-bar" min="0" max="1" step="0.1" value="1">
  <button type="button" id="video-controls__full-screen">Full-Screen</button>
</div>

Answer 1

问题是，当您尝试通过ID访问它时，您的视频元素具有类video-container__video。

这导致video为null，并且在尝试读取其paused属性时会收到错误消息。

解决问题的方法：

将类更改为ID！旨在创建相似元素的“组”的类，而不是用于标识单个元素的类。或者：

如果该类只有一个元素，请更改此行：

var video=document.getElementById("video-container__video")

到以下任一：

var video=document.getElementByClassName("video-container__video")[0]

或者：

var video=document.querySelector(".video-container__video")

如果该类中有多个元素，则必须使用循环（但事实并非如此……）：

var videos=document.getElementByClassName("video-container__video")

for(video of videos){
    //Do something with each element
}

Answer 2

问题是您试图通过ID获取video，但是它有一个类。尝试：

var video = document.querySelector(".video-container__video");

window.onload = function() {
  //video
  var video = document.querySelector(".video-container__video");
  console.log(video);
  //Buttons 
  var playButton = document.getElementById("video-controls__play-pause");
  var muteButton = document.getElementById("video-controls__mute");
  var fullScreenButton = document.getElementById("video-controls__full-screen");

  //sliders
  var seekbar = document.getElementById("video-controls__seek-bar");
  var volumebar = document.getElementById("video-controls__volume-bar");

  //event listener for the play and pause button

  playButton.addEventListener("click", function() {
    if (video.paused == true) {
      video.play();

      //button text will change to Pause
      playButton.innerHTML = "Pause";
    } else {
      //pause the video
      video.pause();
      //button will update its text to play
      playButton.innerHTML = "Play";
    }
  });
}

<div class="video-container">
  <!-- Video -->
  <video class="video-container__video" width="640" height="365">
      <source src='_assets/media/big_buck_bunny.mp4' type='video/mp4'>
    </video>
  <div id="video-controls">
    <button type="button" id="video-controls__play-pause">Play</button>
    <input type="range" id="video-controls__seek-bar" value="0">
    <button type="button" id="video-controls__mute">Mute</button>
    <input type="range" id="video-controls__volume-bar" min="0" max="1" step="0.1" value="1">
    <button type="button" id="video-controls__full-screen">Full-Screen</button>
  </div>

Answer 3

您应该将视频html元素class="video-container__video"更改为id="video-container__video"，因为您不能将类传递给getElementById，而只能将Id传递给它。这说明了空引用错误

Answer 4

您是否尝试过打印playButton的内容？它表示存在类型错误，并且一定缺少某些内容，即访问错误的ID /类。只需尝试打印其中包含的内容，然后检查要从中访问元素的变量和元素。 Try change the class to id in the main video element

无法读取null的属性“已暂停”

4 个答案: