如何暂停自动播放的HTML视频？

Question

为了更好的表达，我提供了一些（部分）可工作的代码链接： http://jsfiddle.net/StephenMeehan80/mfjtaco3/6/

视频自动播放是由Javascript控制的，并且暂停/播放按钮“有效”，但第一次需要点击两次？

是否有一种方法将 videoAutoPlay 添加到 EventListener中？

document.addEventListener("DOMContentLoaded", function() {

            var video = document.getElementById('videoContent');
            videoAutoPlay = video.play();

            document.getElementById("playVideo").addEventListener("click", function(){              
                
                if(this.className == 'is-playing')
                {
                    this.className = "";
                    this.innerHTML = "Play"
                    video.pause();
                }
                else{
                    this.className = "is-playing";
                    this.innerHTML = "Pause";
                    video.play();
                }
            });
        });



    <button id="playVideo">Pause</button>

- StephenMeehan

Answer 1

由于`className`不是一个有效的属性，所以它无法正常工作。请使用`Element.classList.toggle`。

var video = document.getElementById('videoContent');
videoAutoPlay = video.play();

document.getElementById("playVideo").addEventListener("click", function(){     
   this.classList.toggle('is-playing');     
   if(this.classList.contains('is-playing')) {
       this.innerHTML = "Play"
       video.pause();
   } else {
       this.innerHTML = "Pause";
       video.play();
   }
});

- lissettdm

---

谢谢，现在我大部分都已经解决了。您介意看一下我的更新答案吗？附上一个fiddle链接。 - StephenMeehan

可以运行！非常感谢。我已经更新了这个fiddle，以防对其他人有用。 http://jsfiddle.net/StephenMeehan80/mfjtaco3/11/ - StephenMeehan

是的，这可以帮助其他人 ;) - lissettdm

Answer 2

在按钮点击时将videoPlaying设置为false。而且你的if else语句看起来有问题。 如果videoPlaying为true，则执行某些操作。 否则，如果videoPlaying为false，则将videoPlaying设置为false。

document.addEventListener("DOMContentLoaded", function() {
            document.getElementById("playVideo").addEventListener("click", function(){
                
                var videoPlaying = true;
                var video = document.getElementById('videoContent');
                
                    if(videoPlaying)
                    {
                        
                        this.innerHTML = "Play"
                        video.play();                  
                    }
                    else{
                        this.innerHTML = "Pause";
                        video.pause();
                }
            });
        });
 const pauseResume = () => {
if(videoPlaying){
videoPlaying == false
}else{
videoPlaying == true
}

<button onclick= pauseResume()>pause/resume</button> 

它应该看起来像这样。

- Lygis

---

谢谢，我已经更新了我的问题。我差不多把它搞定了。你能看一下这个JS Fiddle吗？ - StephenMeehan