修改滚动代码适配视频后，appendChild致自动播放失效求助

我之前也踩过类似的坑，其实核心问题大多是浏览器的自动播放安全限制在作祟，再结合你动态添加元素的场景，给你几个针对性的解决思路：

1. 先满足浏览器自动播放的基础条件 #

现在所有现代浏览器都对自动播放有严格限制，只有静音的视频或者经过用户交互（点击、触摸等）的视频才能自动播放。所以你在创建视频元素的时候，一定要先开启静音模式，同时加上适配移动端的playsinline属性：

// 创建视频元素时的关键设置
const video = document.createElement('video');
video.muted = true; // 必须开启静音，满足浏览器自动播放策略
video.playsinline = true; // 适配移动端，避免视频强制全屏播放
video.src = '你的视频资源地址';

这是最基础的前提，没满足这个的话，调用play()大概率会被浏览器直接拦截。

2. 确保视频加载完成后再调用播放 #

动态添加视频后，视频资源还在加载中，直接调用play()很可能失败。最好监听视频的loadeddata事件（表示视频已加载足够帧可以播放），或者用异步方式处理play()返回的Promise：

// 把视频添加到容器后
par.appendChild(video);

// 方式一：监听加载完成事件再触发播放
video.addEventListener('loadeddata', () => {
  video.play().catch(err => {
    console.log('自动播放失败:', err);
  });
});

// 方式二：直接调用并捕获错误（适合快速测试）
video.play().catch(err => {
  console.log('播放被阻止，可能需要用户交互:', err);
  // 兜底方案：生成一个播放按钮，让用户手动触发
  const playBtn = document.createElement('button');
  playBtn.textContent = '点击播放视频';
  playBtn.onclick = () => {
    video.play();
    playBtn.remove();
  };
  par.appendChild(playBtn);
});

play()方法会返回一个Promise，一定要用catch捕获错误，不然控制台会抛出未处理的Promise异常，而且你能从错误信息里明确知道是浏览器策略拦截还是资源加载问题。

3. 处理视频可见性的影响 #

如果你的滚动容器中，新添加的视频一开始处于不可见区域（比如被滚出视口），浏览器也会阻止自动播放来节省资源。可以监听视频的visibilitychange事件，当视频进入可见区域时再触发播放：

video.addEventListener('visibilitychange', () => {
  if (!video.hidden) { // 视频变为可见时
    video.play().catch(err => console.log(err));
  }
});

整合后的代码片段参考 #

结合你的滚动逻辑，把上述要点整合进去大概是这样：

(function(){ 
  var top=0; 
  var par = document.getElementById('par') 
  var scroll = function() { 
    top++; 
    if( top>=par.firstElementChild.offsetHeight ) { 
      // 创建并配置视频元素
      const video = document.createElement('video');
      video.muted = true;
      video.playsinline = true;
      video.src = 'your-video-url.mp4';
      video.style.width = '100%'; // 适配容器宽度
      video.style.height = 'auto';

      // 添加到滚动容器
      par.appendChild(video);

      // 尝试自动播放
      video.play().catch(err => {
        console.log('自动播放失败原因:', err);
        // 兜底：添加居中的手动播放按钮
        const playBtn = document.createElement('button');
        playBtn.style.position = 'absolute';
        playBtn.style.top = '50%';
        playBtn.style.left = '50%';
        playBtn.style.transform = 'translate(-50%, -50%)';
        playBtn.textContent = '点击播放';
        playBtn.onclick = () => {
          video.play();
          playBtn.remove();
        };
        par.appendChild(playBtn);
      });

      // 重置滚动top（根据你的业务逻辑调整）
      top = 0;
    }
    par.scrollTop = top;
    requestAnimationFrame(scroll);
  }
  requestAnimationFrame(scroll);
})();

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