使用Barba.js页面切换后视频自动播放失效问题求助

开发者阿泽

2026-6-18

解决方案

Barba.js 页面切换后，浏览器不会重新触发视频元素的 autoplay 属性行为——这个属性仅在元素首次插入DOM时生效。即使你保留了autoplay、muted、loop属性，返回页面时也需要手动触发播放。

你可以通过监听Barba的页面进入钩子，在目标页面加载完成后主动调用视频的play()方法：

通用实现（适配所有带自动播放视频的页面）

// 监听Barba的afterEnter钩子，每次页面切换完成后执行
barba.hooks.afterEnter(() => {
  // 定位当前页面中符合条件的视频元素
  const autoPlayVideo = document.querySelector('video[autoplay][muted]');
  
  if (autoPlayVideo) {
    // 避免重复触发播放
    if (!autoPlayVideo.paused) return;
    
    // 手动触发播放，捕获可能的错误（比如浏览器播放限制）
    autoPlayVideo.play().catch(err => {
      console.error('视频自动播放失败:', err);
    });
  }
});

精准匹配企业页面（推荐）

如果只有企业页面有这个视频，可以通过页面容器的类名或ID精准触发：

barba.hooks.afterEnter((data) => {
  // 检查当前进入的页面是否是企业页面（假设容器类名为page-enterprise）
  if (data.next.container.classList.contains('page-enterprise')) {
    const video = data.next.container.querySelector('video');
    
    if (video) {
      // 可选：重置视频到开头，确保从头播放
      video.currentTime = 0;
      video.play().catch(err => console.error(err));
    }
  }
});