寻求Android版Firefox中p5.js视频自动播放的解决方案

你遇到的问题是Android Firefox中p5.js创建的视频无法自动播放，但原生HTML视频正常，核心原因是p5.js对video元素的封装在Firefox的自动播放策略下存在触发时机或事件绑定的差异。以下是可行的解决方法：

关键调整点 #

• 优先通过p5.js的视频加载事件触发播放，而非依赖内联onloadeddata属性
• 直接操作原生video元素确保属性生效
• 严格遵循Firefox自动播放的静音要求

修改后的代码 #

JavaScript部分 #

let videoElement;

function setup() {
  createCanvas(150, 150);
  
  // 创建视频时传入本地资源路径，绑定加载完成回调
  videoElement = createVideo(['your-video.mp4'], videoLoaded);
  videoElement.hide();
  
  // 提前设置自动播放必需的属性
  videoElement.attribute('muted', 'true');
  videoElement.attribute('loop', 'true');
  videoElement.attribute('playsinline', 'true');
  videoElement.volume(0);
}

// 视频加载完成后触发播放
function videoLoaded() {
  // 获取原生video元素直接调用播放，绕过封装层兼容问题
  const nativeVideo = videoElement.elt;
  nativeVideo.play().catch(err => {
    console.error('播放失败:', err);
  });
}

function draw() {
  // 确保视频元数据加载完成后再绘制
  if (videoElement && videoElement.loadedmetadata) {
    image(videoElement, 0, 0, width, height);
  }
}

HTML部分 #

<!-- 确保已引入本地的p5.js库文件 -->
<script src="p5.min.js"></script>
<p>原生HTML视频</p>
<video onloadeddata="this.play();this.muted=true;" playsinline loop muted width="200">
  <source src="your-video.mp4" type="video/mp4" />
  你的浏览器不支持视频标签或该视频格式。
</video>
<p>p5.js视频</p>

改动说明 #

1. 加载回调触发播放：利用createVideo的回调机制，在视频资源完全就绪后再调用播放，避免Firefox因资源未加载完成拦截自动播放请求。
2. 直接操作原生DOM：通过videoElement.elt获取原生video元素，直接调用play()，避免p5.js封装层可能带来的时机延迟或兼容问题。
3. 提前设置核心属性：在视频初始化阶段就设置muted、playsinline等Firefox自动播放必需的属性，确保属性在播放检查前已生效。
4. 错误捕获调试：为play()添加错误捕获，便于排查后续可能出现的播放异常。

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