实现HTML5视频滚动至视口时自动播放

我看了你的现有代码，要实现滚动到视口自动播放且兼容现有逻辑，用Intersection Observer API是最靠谱的方案，它能高效检测元素是否进入视口，而且不会和你现有的播放/暂停、重播按钮逻辑冲突。下面是修改后的完整代码和关键说明：

关键修改点 #

1. 移除视频标签的autoplay属性——现在我们要滚动触发播放，不是页面加载就自动播
2. 添加Intersection Observer监听逻辑，检测视频容器进入视口时自动播放
3. 确保和现有事件监听（播放、暂停、结束）完美兼容

修改后的HTML代码 #

<div class="spacer"> </div> 
<div class="video-wrapper"> 
  <video id="bVideo" muted> <!-- 移除了autoplay属性 -->
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" /> 
  </video> 
  <div id="playButton" class="playButton" onclick="playPause()"></div> 
  <div class="replayButton" id="replayButton" onclick="playPause()">REPLAY ↻</div> 
</div> 
<script>
var bunnyVideo = document.getElementById("bVideo");
var el = document.getElementById("playButton");
var replay = document.getElementById("replayButton");
replay.style.visibility = "hidden";

function playPause() {
  if (bunnyVideo.paused) {
    bunnyVideo.play();
    replay.className = "replayButton";
    replay.style.visibility = "hidden";
  } else {
    bunnyVideo.pause();
    el.className = "playButton";
    replay.className = "";
  }
}

function playPauseControls() {
  if (!bunnyVideo.paused) {
    el.className ="";
    replay.className = "";
  } else {
    el.className = "playButton";
    replay.className = "";
  }
}

function videoEnd() {
  replay.className = "replayButton";
  replay.style.visibility = "visible";
  el.className = "";
}

function showControls(){
  bunnyVideo.setAttribute("controls","controls");
}

function hideControls(){
  bunnyVideo.removeAttribute("controls","controls");
}

// 新增：Intersection Observer 监听逻辑
const videoWrapper = document.querySelector('.video-wrapper');
const observerOptions = {
  root: null, // 用视口作为根元素
  rootMargin: '0px',
  threshold: 0.5 // 视频50%进入视口时触发
};

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    // 只有当视频进入视口，且视频未播放、未结束时才自动播放
    if (entry.isIntersecting && bunnyVideo.paused && !bunnyVideo.ended) {
      bunnyVideo.play();
    }
    // 可选：如果需要离开视口暂停，取消下面注释
    // else if (!entry.isIntersecting && !bunnyVideo.paused && !bunnyVideo.ended) {
    //   bunnyVideo.pause();
    // }
  });
}, observerOptions);

observer.observe(videoWrapper);

// 原有事件监听保留
bunnyVideo.addEventListener("play", playPauseControls, false);
bunnyVideo.addEventListener("pause", playPauseControls, false);
bunnyVideo.addEventListener("mouseout", hideControls, false);
bunnyVideo.addEventListener("ended", videoEnd, false);
</script>

CSS代码（无需修改） #

.spacer { height: 400px; }
.video-wrapper { position: relative; max-width: 680px; }
.video-wrapper > video { width: 100%; max-width: 100%; box-sizing: border-box; vertical-align: middle; cursor: pointer; }
/* Hide iOS Play Button */
video::-webkit-media-controls-start-playback-button { display: none!important; -webkit-appearance: none; }
.playButton { border-radius: 100px; border: 8px solid #fff !important; height: 100px; position: absolute; width: 100px; margin: auto; top: 0; bottom: 0; right: 0; left: 0; cursor: pointer; display: block; opacity: 0.95; transition: opacity 400ms; }
.playButton:before { content: ""; display: block; width: 0; height: 0; border-style: solid; border-width: 25px 0 25px 50px; border-color: transparent transparent transparent #fff; position: absolute; top: 0; left: 0; right: -10px; bottom: 0; margin: auto; }
.replayButton { color: black; position: relative; text-align: center; margin: auto; margin-top: 0px; cursor: pointer; display: block; opacity: 0.95; transition: opacity 150ms; }
.replayButton:hover, .replayButton:focus { color: #ea7200; }
.replayButton:before { height: 45px; width: 45px; position: absolute; top: 18px; left: 18px; content: ''; display: block; border-color: transparent white white white; border-radius: 50%; border-style: solid; border-width: 8px; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); }
.replayButton:after { border-color: transparent transparent transparent white; border-style: solid; border-width: 0 45px 22px 22px; height: 0; position: absolute; top: 40px; left: 15px; bottom: 0; right: 0; width: 0; content: ""; display: block; margin: auto; }

逻辑说明 #

• Intersection Observer：这个API会异步监听视频容器和视口的交集状态，比传统的scroll事件监听性能好很多，不会造成页面卡顿
• 播放触发条件：只有当视频进入视口、处于暂停状态且未播放结束时，才会自动播放——这样避免了视频已经结束后滚动进来又自动播放的问题，符合你“仅播放一次”的需求
• 兼容性：Intersection Observer支持所有现代浏览器，包括Chrome、Firefox、Edge和Safari 12.1+，如果需要兼容旧版浏览器，可以加个polyfill

内容的提问来源于stack exchange，提问作者MBrown