时间戳

首页 > 解决方案 > 适用于 iOS 和 iPad 的 Safari 上的 AR.js 视频播放问题

javascript - 适用于 iOS 和 iPad 的 Safari 上的 AR.js 视频播放问题

问题描述

因此，我正在使用 AR.js Studio 创建一个基于标记的简单 AR 项目，该项目可以加载视频，在适用于 iOS 和 iPad 的 Chrome 和 Safari 上，只要我在自动播放时将视频静音，只要我删除静音 Safari，它就可以正常工作不会玩。（Chrome 还是可以的）

我在网上查了一下，好像 Safari 在触发自动播放时不允许播放音频，所以我现在有 2 个选项：

1.- 删除自动播放并添加点击播放事件。2.- 一旦用户单击音量控件或屏幕上的任何位置，就添加取消静音事件。

问题是我不知道如何添加这些，因为我以前没有使用过这些类型的文件，我知道需要做什么，但在网上找不到任何东西来帮助我知道要删除哪些行以及在哪里添加新的。

这是 AR.js Studio 生成的代码，它只给了我这个 html 文件和一个文件夹，里面有标记和它播放的视频。

<html>
    <head>
        <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
        <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
        <script src="https://raw.githack.com/AR-js-org/studio-backend/master/src/modules/marker/tools/gesture-detector.js"></script>
        <script src="https://raw.githack.com/AR-js-org/studio-backend/master/src/modules/marker/tools/gesture-handler.js"></script>
        <script>
            AFRAME.registerComponent('videohandler', {
                init: function () {
                    var marker = this.el;
                    this.vid = document.querySelector("#vid");

                    marker.addEventListener('markerFound', function () {
                        this.toggle = true;
                        this.vid.play();
                    }.bind(this));

                    marker.addEventListener('markerLost', function () {
                        this.toggle = false;
                        this.vid.pause();
                    }.bind(this));
                },
            });
        </script>
    </head>

    <body style="margin: 0; overflow: hidden;">
        <a-scene
            vr-mode-ui="enabled: false"
            loading-screen="enabled: false;"
            arjs='sourceType: webcam; debugUIEnabled: false;'
            id="scene"
            embedded
            gesture-detector
        >
            <a-assets>
                <video
                    id="vid"
                    src="https://mobileappstarter.com/ARtest/assets/asset.mp4"
                    preload="auto"
                    response-type="arraybuffer"
                    loop
                    crossorigin
                    webkit-playsinline
                    autoplay
                    muted
                    playsinline
                ></video>
            </a-assets>

            <a-marker
                type="pattern"
                preset="custom"
                url="https://mobileappstarter.com/ARtest/assets/marker.patt"
                videohandler
                smooth="true"
                smoothCount="10"
                smoothTolerance="0.01"
                smoothThreshold="5"
                raycaster="objects: .clickable"
                emitevents="true"
                cursor="fuse: false; rayOrigin: mouse;"
                id="markerA"
            >
                <a-video
                    src="#vid"
                    scale="1 1 1"
                    position="0 0.4 0"
                    rotation="-90 0 0"
                    class="clickable"
                    gesture-handler
                ></a-video>
            </a-marker>

            <a-entity camera></a-entity>
        </a-scene>
    </body>
</html>

任何帮助将不胜感激，因为我不知道在编辑此文件时我在做什么。

标签： javascriptiossafariaugmented-reality

解决方案

推荐阅读