Question

我试图找到一种方法让我的视频只有在视口聚焦后才能开始播放。该视频将包含在文章的大量文本中，我希望它只在用户向下滚动时播放

      <script>
     window.onload = function() {

     // Video
     var video = document.getElementById("video");

     // Buttons
     var playButton = document.getElementById("play-pause");
     var playButtonImg = document.getElementById("playButtonImg");
     var muteButton = document.getElementById("mute");
     var muteButtonImg = document.getElementById("muteButtonImg");

     // Event listener for the play/pause button
     playButton.addEventListener("click", function() {
        if (video.paused == true) {
            // Play the video
            video.play();

            // Update the button text to 'Pause'
            playButtonImg.src = "pause-sm.png";
        } else {
            // Pause the video
            video.pause();

            // Update the button text to 'Play'
            playButtonImg.src = "play-sm.png";
        }
     });

     video.addEventListener("ended", function(){
     playButtonImg.src = "replay-sm.png";
     });

     // Event listener for the mute button
     muteButton.addEventListener("click", function() {
        if (video.muted == false) {
            // Mute the video
            video.muted = true;

            // Update the button text
            muteButtonImg.src = "mute-sm.png";
        } else {
            // Unmute the video
            video.muted = false;

            // Update the button text
            muteButtonImg.src = "volume-sm.png";
        }
     });

     // Pause the video when the seek handle is being dragged
     seekBar.addEventListener("mousedown", function() {
        video.pause();
     });
     }
  </script>

Answer 1

如果您可以使用jQuery，那么您可以寻求路标： http://imakewebthings.com/waypoints/

当它变为焦点时启动视频

1 个答案: