如何在MindAR目标上正确控制视频播放（兼容Android/iOS）

要实现仅在识别到MindAR目标时播放视频、丢失目标时暂停，同时兼容Android和iOS设备，可按以下步骤修改代码：

1. 配置视频初始属性 #

给<a-video>添加属性，避免自动播放并适配iOS的媒体播放规则：

• autoplay="false"：阻止页面加载后视频自动启动
• playsinline：强制视频在页面内播放（iOS默认会全屏播放视频，该属性可避免此行为）
• muted：绕过iOS的自动播放限制（iOS要求带音频的媒体必须由用户交互触发，静音状态下可自动播放，后续再通过交互取消静音）

2. 监听MindAR目标事件 #

通过监听目标实体的targetFound和targetLost事件，控制视频的播放与暂停：

• 目标被识别时（targetFound）：触发视频播放
• 目标丢失时（targetLost）：触发视频暂停

3. 处理iOS音频播放限制 #

iOS需要用户主动交互才能播放带音频的媒体，因此添加屏幕点击事件，点击后取消视频静音，确保音频正常播放。

修改后的完整代码 #

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/mind-ar@1.2.1/dist/mindar-image-aframe.prod.js"></script>
    <script src="https://cdn.rawgit.com/mayognaise/aframe-chromakey-material/v1.2.0/dist/aframe-chromakey-material.min.js"></script>
  </head>
  <body>
    <a-scene mindar-image="imageTargetSrc: https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.2.1/examples/image-tracking/assets/card-example/card.mind;" color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">
      <a-camera position="0 0 0" look-controls="enabled: false"></a-camera>
      <a-entity mindar-image-target="targetIndex: 0">
        <a-video src="https://cdn.glitch.global/aac91519-95ff-4996-8909-e5c41f3cfff9/mov_bbb.mp4?v=1680745936939" position="0 0 0" height="1" width="1" rotation="0 0 0" id="vid" autoplay="false" muted playsinline></a-video>
      </a-entity>
    </a-scene>

    <script>
      document.addEventListener('DOMContentLoaded', () => {
        const targetEntity = document.querySelector('[mindar-image-target]');
        const videoEl = document.querySelector('#vid');

        // 识别到目标时播放视频
        targetEntity.addEventListener('targetFound', () => {
          videoEl.play().catch(error => {
            // 兼容iOS：若直接播放失败，静音后重试
            videoEl.muted = true;
            videoEl.play();
          });
        });

        // 丢失目标时暂停视频
        targetEntity.addEventListener('targetLost', () => {
          videoEl.pause();
        });

        // 点击屏幕取消静音，满足iOS音频播放的交互要求
        document.body.addEventListener('click', () => {
          if (videoEl.muted) {
            videoEl.muted = false;
            // 若视频正在播放，重新启动确保音频生效
            if (!videoEl.paused) {
              videoEl.play();
            }
          }
        });
      });
    </script>
  </body>
</html>

关键说明 #

• targetFound/targetLost事件：MindAR的目标实体自带这两个事件，是控制视频播放状态的核心触发点
• iOS适配细节：playsinline避免视频强制全屏，muted绕过自动播放限制，点击取消静音则满足iOS对音频播放的交互要求
• 错误处理：play()方法返回Promise，捕获失败情况可确保在iOS设备上正常启动视频播放

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