A-Frame+AR.js场景下iOS端视频无法播放的最新解决方案咨询

以下是针对你代码问题的具体修复点：

• 视频编码不兼容：你当前使用的VP9编码WebM视频不受iOS Safari原生支持，需替换为H.264编码的MP4格式视频，音频编码建议使用AAC。
• 播放触发逻辑不符合Safari规则：Safari要求视频play()方法必须在用户交互事件的同步回调中直接调用，你当前将播放逻辑放在tick函数中异步执行，会被浏览器的自动播放策略拦截。可以先在点击事件回调中触发一次视频播放完成授权，后续再通过可见性控制暂停/恢复即可。
• 第三方库未初始化：你引入了iphone-inline-video库但未对目标视频节点执行初始化调用，需要在页面加载完成后对<video>元素执行enableInlineVideo(videoElement)方法完成配置。
• 遗漏必要配置项：需要在head中添加viewport元标签<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">，同时给<video>标签添加muted属性，若需要音频可以在用户交互完成后再手动取消静音。

核心代码修改示例 #

调整后的vidhandler组件 #

AFRAME.registerComponent('vidhandler', {
  schema: {
    videos: { type: 'string' }
  },
  init: function () {
    this.videoNodes = document.querySelectorAll(this.data.videos)
    // 直接在用户点击回调中完成播放授权
    document.body.addEventListener("click", e => {
      for (let i = 0; i < this.videoNodes.length; i++) {
        this.videoNodes[i].play().catch(err => console.log("播放初始化错误：", err))
        // 初始化iphone-inline-video
        enableInlineVideo(this.videoNodes[i])
      }
    });
  },
  tick: function () {
    if (this.el.object3D.visible === true) {
      if (!this.toggle) {
        this.toggle = true;
        for (let i = 0; i < this.videoNodes.length; i++) {
          // 已完成授权，直接恢复播放不会被拦截
          this.videoNodes[i].play().catch(err => console.log("恢复播放错误：", err))
        }
      }
    } else {
      if (this.toggle) {
        for (let i = 0; i < this.videoNodes.length; i++) {
          this.videoNodes[i].pause();
        }
        this.toggle = false;
      }
    }
  }
});

调整后的video标签 #

<video
  id="bunny-vid"
  loop="true"
  crossorigin="anonymous"
  src="替换为H.264编码的MP4视频地址"
  playsinline 
  webkit-playsinline
  muted
></video>

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