Question

var playPauseBtn = document.getElementById("play-pause");
var player = document.getElementById("header-video");
player.removeAttribute("controls"); // <--- error is here
playPauseBtn.onclick = function() {
  if (player.paused) {
    player.play();
    this.innerHTML = '<i class="fa fa-pause" aria-hidden="true"></i>';
  } else {
    player.pause();
    this.innerHTML = '<i class="fa fa-play" aria-hidden="true"></i>';
  }
};

<div id="header-container" role="banner">
  <div class="top-image test-top"></div>
  <!-- top image at the bottom of header -->
  <div id="header-video-container" class="zoom">
    <img id="header-fallback" src="yourimage.jpg" alt="" />
    <!-- fallback image for header video -->
    <video id="header-video" controls loop muted playsinline width="1280" height="720" role="img">
                <source src="<?php echo get_stylesheet_directory_uri(); ?>/videos/nb-show-reel.mp4" type="video/mp4" />
                <!-- if adding track/subtitle see https://developer.mozilla.org/en-US/docs/Learn/Accessibility/Multimedia -->
            </video>
  </div>

  <a id="play-pause" class="hover-anim" aria-hidden="true"><i class="fa fa-play" aria-hidden="true"></i></a>
  <!-- video player control -->
</div>

大家好，我正在使用此脚本进行视频播放。但是，当我们检查事物时，它会显示TypeError。你们可以帮我解决这个问题吗？谢谢：）

此行显示错误：player.removeAttribute("controls");

Answer 1

可能的原因是：

1-您没有将此ID“标头视频”分配给任何标签。要么 2-该JS代码在html实际在浏览器DOM中呈现之前运行。

解决方案：

1-检查您是否分配了相同的ID，且没有拼写错误。 2-DOM完全加载后，请使用您的JS。

document.addEventListener("DOMContentLoaded", function() {
  // all of your js code.
});

注意：将您的script标签放在正文末尾也应该可以。

Javascript-显示TypeError：玩家为null

1 个答案: