仅用于视频的 Javascript 播放/暂停按钮暂停答案

【问题标题】：Javascript play/pause button for video only pauses仅用于视频的 Javascript 播放/暂停按钮暂停
【发布时间】：2020-08-31 03:32:35
【问题描述】：

我在 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>

【问题讨论】：

if (video.play) 测试视频是否具有 .play 属性（它确实，函数），而不是当前是否正在播放。见这里：stackoverflow.com/questions/6877403/…
这能回答你的问题吗？ How to tell if a <video> element is currently playing?

标签： javascript if-statement html5-video

【解决方案1】：

video.play 引用了video 的play 方法。在 Javascript 中，每个非 null（分别为非零等）都算作 true。因为存在play 方法，所以它永远不会去else 部分。相反，请使用if (!video.paused)。

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

【讨论】：

我担心使用 (video.paused) 作为 if 会停止功能工作，因为顺序是倒退的......我不必担心。感谢您的帮助。

【解决方案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)'
}

});

【讨论】：