带有eventListener的Javascript代码不'；不适用于视频按钮控制系统

有人给我发了一个代码，我试着运行它。问题是Javascript文件工作不正常。结果是我的视频有一个按钮控制系统。我希望有人能看看

HTML:

JAVASCRIPT:

// Reference button and container
var btn1 = document.getElementById('b1');
var pyr1 = document.getElementById('p1');

// When button is clicked...
btn1.addEventListener('click', function(event) {

  // Reference video
  var vid1 = document.getElementById('v1');

  // Conditions based on state: paused
  if (vid1.paused) {
    vid1.play();
  } else {
    vid1.pause();
  }
  /* Whatever the new state is doesn't matter if...
  || we have either .play or .pause class on button
  || previously and that both classes will toggle
  || at the same time.
  */
  btn1.classList.toggle('play');
  btn1.classList.toggle('pause');
}, false);

// If the mouse leaves the area of container...
pyr1.addEventListener('mouseout', function(event) {

  // If the button has the class .pause...
  if (btn1.classList.contains('pause')) {

    // set it's opacity to 0
    btn1.style.opacity = 0;

    // and make it fade away
    btn1.style.transition = '1s ease';
  }
}, false);

// If the mouse enters the container's area...
pyr1.addEventListener('mouseover', function(event) {

  // if the button has the class .pause...
  if (btn1.classList.contains('pause')) {

    // set it's opacity to 1  
    btn1.style.opacity = 1;

    // and make it fade in
    btn1.style.transition = '1s ease';
  }
}, false);

---

您上传的代码工作正常（）

正如Andreas提到的，移动脚本标记

---

到html文件的结尾。

什么不起作用？在DOM准备就绪之前执行脚本。将

标记移动到页面底部

标记的正前方

/* This container wraps neatly around 
|| the video's width
*/

#p1 {
  position: relative;
  display: table-cell;

}


/* This is to make the button an overlay */

#b1 {
  font-size: 100px;
  color: rgba(0, 255, 255, .3);
  position: absolute;
  z-index: 1;
  height: 100px;
  width: 100px;
  top: calc(50% - 50px);
  left: calc(50% - 50px);
  text-decoration: none;
}


/* These two rulsets use  simple HTML entities
|| for play/pause buttons
*/

.play::after {
  content: '\25b6';
}

.pause::after {
  content: '\23f8';
}

// Reference button and container
var btn1 = document.getElementById('b1');
var pyr1 = document.getElementById('p1');

// When button is clicked...
btn1.addEventListener('click', function(event) {

  // Reference video
  var vid1 = document.getElementById('v1');

  // Conditions based on state: paused
  if (vid1.paused) {
    vid1.play();
  } else {
    vid1.pause();
  }
  /* Whatever the new state is doesn't matter if...
  || we have either .play or .pause class on button
  || previously and that both classes will toggle
  || at the same time.
  */
  btn1.classList.toggle('play');
  btn1.classList.toggle('pause');
}, false);

// If the mouse leaves the area of container...
pyr1.addEventListener('mouseout', function(event) {

  // If the button has the class .pause...
  if (btn1.classList.contains('pause')) {

    // set it's opacity to 0
    btn1.style.opacity = 0;

    // and make it fade away
    btn1.style.transition = '1s ease';
  }
}, false);

// If the mouse enters the container's area...
pyr1.addEventListener('mouseover', function(event) {

  // if the button has the class .pause...
  if (btn1.classList.contains('pause')) {

    // set it's opacity to 1  
    btn1.style.opacity = 1;

    // and make it fade in
    btn1.style.transition = '1s ease';
  }
}, false);