javascript - 暂停自动播放的 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>

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();
   }
});