video doesn't appear on IOS

[AdemKab]

Description:

• A-Frame Version: 1.0.4
• Platform / Device: IOS
• Reproducible Code Snippet or URL:

< a-scene vr-mode-ui="enabled: false" embedded arjs="sourceType: webcam; debugUIEnabled: false;">

    <a-assets>
        <img id="alpha" src="mask.png">
        <video id="vid" autoplay playsinline webkit-playsinline muted loop="true"></video>
    </a-assets>

    <a-entity id="entityToShow" position="0 50 0" rotation="0 0 0">

        <!-- Textured plane parallel to trex. -->
        <a-plane id="videoPlane" material="shader:grid-glitch; map: #vid; map2: #alpha ; myOpacity : 0.5" height="6"
            width="3.4" rotation="0 0 0" scale="2 2 2" look-at="#camera">
        </a-plane>

    </a-entity>

    <a-camera id="camera" gps-camera look-controls-enabled='false' arjs-look-controls='smoothingFactor: 0.1'
        rotation-reader>
    </a-camera>

</a-scene>

I’m working with A-frame and arjs and I did a location based web app it’s working fine on android the issue is on IOS safari exactly the video doesn’t show up even the first frame doesn’t appear the video src attribute is set with js the “gps-entity-place” attribute is set also with js

[dmarcos]

Probably autoplay policies. Explained in FAQ:

Video autoplay policies are getting more and more strict and rules might vary accross browsers. Mandatory user gesture is now commonly enforced. For maximum compatibility, you can offer a button that the user can click to start video playback. Simple sample code can be found in the docs. Pay particular attention to the play-on-click component

We can reopen if necessary