如何创建自定义视频: Uncaught :无法读取null属性(读取'querySelector')

Question

我看了一段关于如何在Atom中创建自定义视频播放器的视频。我必须先创建不同的const，但是要获得错误消息，需要说const video = player.querySelector('.player-video');的第2行

Uncaught :无法读取空(读取'querySelector')的属性

当用户单击play视频按钮时，我希望用户观看视频：

我有我的类名：<video controls class="player-video" height="369px" width="610px" class="video" id="video" preload="metadata" poster="assets/img/photo.jpg">

​

const player = document.querySelector('.player');
const video = player.querySelector('.player-video');
const progress = player.querySelector('.progress');
const progressFilled = player.querySelector('.filled-progress');
const toggle = player.querySelector('.toggle-play');
const skippers = player.querySelectorAll('[data-skip]');
const ranges = player.querySelectorAll('.player-slider');

function togglePlay() {
  const playState = video.paused ? 'play' : 'paused';
 }

function updateButton() {
  const togglePlayBtn = document.querySelector('.toggle-play');

  if(this.pause) {
    togglePlayBtn.innerHTML + `<svg class="" width="16" height="16" viewBox="0 0 16 16"><title>play</title><path d="M3 2l10 6-10 6z"></path></svg>`;
  } else {
    togglePauseBtn.innerHTML + `<svg class="" width="16" height="16" viewBox="0 0 16 16"><title>pause</title><path d="M3 2l10 6-10 6z"></path></svg>`
  }
}

video.addEventListener('click', togglePlay);
video.addEventListener('play', updateButton);
video.addEventListener('pause', updateButton);
video.addEventListener('timeupdated', progressUpdate);

toggle.addEventListener('click', togglePlay);
skippers.forEach(button => button.addEventListener('click', skip));
ranges.forEach(range => range.addEventListener('change', rangeUpdate));
range.forEach(range => range.addEventListener('mousemove', rangeUpdate));

let mousemove = false;

progress.addEventListener('click', scrub);
progress.addEventListener('mousemove', (e) => mousedown && scrub(e));
progress.addEventListener('mousedown', () => mousedown = true);
progress.addEventListener('mouseup', () => mousedown = false);

<div class="hero">
  <div class="container">
      <div class="wrapper">
          <div class="row">
          <div class="video player">
            <video controls class="player-video" height="369px" width="610px" class="video" id="video" preload="metadata" poster="assets/img/photo.jpg">
                <source src="/assets/video/bjp__video.mp4" type="video/mp4">
                <source src="/assets/video/bjp__video.webm" type="video/webm">
            </video>

            <div class="name">
                <img draggable alt="name" src="assets/img/bjp_title.png">
            </div>
          </div>


          <div class="info__hero__content">
              <p>I help  <span><b>people with disabilities</b></span> and <span><b>entrepreneurs</b></span>  to find there hide abilities and resources for there businesses.</p>
          </div>
      </div>
      </div>
  </div>
</div>

<div>
  <div class="play__btn">
     <button class="player-btn toggle-play" title="Toggle Play" id="play">
          <svg class="" width="16" height="16" viewBox="0 0 16 16"><title>play</title><path d="M3 2l10 6-10 6z"></path></svg>
     </button>
  </div>
  <div class="line"></div>
</div>

​

​

​

Answer 1

错误告诉您不能在对象.querySelector上调用player，因为player是null而不是对象。这意味着您试图在player变量中存储引用的节点在当时的文档中没有找到。您确定元素在存储引用时是存在的，还是有可能是异步呈现的？

/e:参考上面的评论:打印给console.log的值稍后会评估(Chrome用于显示提示，因为它有点误导)。您可以尝试console.log任何属性或其他形式的变量。对于对象可以是JSON.stringify()，例如，对于可能是父容器的.innerHTML的节点。