Question

我已经在javascript中设置了播放/暂停视频按钮，该按钮可以正常工作，但是现在不起作用，我也不知道为什么。现在它只发射一次，暂停但不播放。

基本上，我的playButton函数的“ if”部分可以正常工作，但是“ else”部分似乎无法正常工作。以前已经做过，所以我认为某个地方只是缺少一个元素。我什至在代码验证器中检查了它并通过了。该怎么办？

请在下面查看我的代码...

window.onload = function() {
  const video = document.getElementById('intro-video');
  const playPause = document.getElementById('play-button');
  const enlarge = document.getElementById('full-screen');
  const progressBar = document.getElementById('progress-bar');

  playPause.addEventListener('click', function playButton() {
    if (video.play) {
      video.pause()
      playPause.innerHTML = 'Play Video'
      playPause.style.backgroundImage = 'url(https://alcove.bensmiles.com/wp-content/uploads/Alcove-Icon_Play.svg)'
    } else {
      video.play()
      playPause.innerHTML = 'Pause Video'
      playPause.style.backgroundImage = 'url(https://alcove.bensmiles.com/wp-content/uploads/Alcove-Icon_Pause.svg)'
    }
  });

  enlarge.addEventListener('click', function enlarge() {
    if (video.requestFullscreen) {
      video.requestFullscreen();
    } else if (video.mozRequestFullScreen) {
      video.mozRequestFullScreen(); // Firefox
    } else if (video.webkitRequestFullscreen) {
      video.webkitRequestFullscreen(); // Chrome and Safari
    }
  });

  progressBar.addEventListener('change', function progressBar() {
    const time = video.duration * (progressBar.value / 100);
    video.currentTime = time;
  });

  video.addEventListener('timeupdate', function progressTime() {
    const value = (100 / video.duration) * video.currentTime;
    progressBar.value = value;
  });

  progressBar.addEventListener('mousedown', function progressPause() {
    video.pause();
  });

  progressBar.addEventListener('mouseup', function progressPlay() {
    video.play();
  });
};

<!doctype html>
<html lang='en-ZA'>

  <head>
    <meta charset='UTF-8'>
	  <title>Alc&ocirc;ve – Discover Opulence</title>
    <link rel='dns-prefetch' href='//fonts.googleapis.com'>
    <link rel='fonts' href='https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600;700&display=swap'>
    <link rel='stylesheet' href='Style.css'>
    <script rel='javascript' src='Controls.js'></script>
  </head>

  <body>
    <div id='container'>
      <div id='top' class='section dark'>
        <div id='row1' class='row'>
          <div id='main-menu'>
            <ul>
              <li><a href='https://alcove.bensmiles.com'>About Us</a></li>
              <li><a href='https://alcove.bensmiles.com/committee'>Executive Committee</a></li>
              <li><a href='https://alcove.bensmiles.com/news'>The Opulent News</a></li>
              <li><a href='https://alcove.bensmiles.com/foundation'>Foundation</a></li>
              <li><a href='https://alcove.bensmiles.com/contact'>Contact</a></li>
            </ul>
          </div>
          <div class='column left'>
            <div id='logo'>
              <img src='https://alcove.bensmiles.com/wp-content/uploads/Alcove-Logo.svg'>
            </div>
            <div id='header-headline'>
              <p>Alc&ocirc;ve Holdings</p>
              <h1>Discover<br>Opulence</h1>
            </div>
          </div>
          <div class='column right'>
            <div id='menu-block'>
              <img id='header-image' src='https://alcove.bensmiles.com/wp-content/uploads/Alcove-Header.png'>
              <div id='header-copy'>
                <p>Alc&ocirc;ve finds satisfaction in establishing an atmosphere where excellence is celebrated, and confidence is originated. We inspire the youth to lead with precision and passion by igniting their desire to discover opulence through Alc&ocirc;ve.</p>
              </div>
              <div id='video-console'>
                <div id='video-player'>
                  <video autoplay muted id='intro-video'poster='https://alcove.bensmiles.com/wp-content/uploads/Alcove-Video_Poster.png' width='214px' height='120px'>
                    <source src='https://alcove.bensmiles.com/wp-content/uploads/Alcove-Video_Intro.mp4' type='video/mp4'>
                    <source src='https://alcove.bensmiles.com/wp-content/uploads/Alcove-Video_Intro.ogv' type='video/ogv'>
                    <source src='https://alcove.bensmiles.com/wp-content/uploads/Alcove-Video_Intro.webm' type='video/webm'>
                  </video>
                  <div id='video-details'>
                    <button id='full-screen' type='button'><img src='https://alcove.bensmiles.com/wp-content/uploads/Alcove-Icon_Enlarge.svg'></button>
                    <div id='video-headline'>
                      <p>Headline of the video playing</p>
                    </div>
                  </div>
                </div>
                <div id='video-controls'>
                  <button id='play-button' type='button'>Pause Video</button>
                  <input id='progress-bar' type='range' value='0'>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Answer 1

video.play引用了play的{{1}}方法。在Javascript中，每个非null（分别为非零等）都计为video。因为true方法存在，所以它永远不会进入play部分。而是使用else。

还有一件事：决定是否使用分号。如果您同时使用两种样式，则会使代码有些奇怪。

Answer 2

尝试一下：

playPause.addEventListener('click', function playButton() {
if (video.paused || video.ended) {
   video.play()
  playPause.innerHTML = 'Pause Video'
  playPause.style.backgroundImage = 'url(https://alcove.bensmiles.com/wp-content/uploads/Alcove-Icon_Pause.svg)'

} else {
  video.pause()
  playPause.innerHTML = 'Play Video'
  playPause.style.backgroundImage = 'url(https://alcove.bensmiles.com/wp-content/uploads/Alcove-Icon_Play.svg)'
}

}）;

仅视频暂停播放的Javascript播放/暂停按钮

2 个答案: