Aframe video only plays muted on ios

i try playing a 360-video in aframe and it works fine on android and desktop but on ios it dont work. If i mute the video the starting of the video works but i need the sound. Some ideas how to fix that? Here my code: https://jsfiddle.net/237s96ka/1/

<!DOCTYPE html>
<html>
  <head>

    <title>zoom-showreel</title>
    <meta charset="utf-8">
    <meta author="" inhalt="vr-video">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>

  </head>  
  <body>

  <a-scene cursor="rayOrigin: mouse" raycaster="objects: .clickable" vr-mode-ui="enabled: false">

      <a-assets timeout="0">

        <img id="icon_vid" src="https://cdn.glitch.com/710c25d4-6d3f-48ef-910b-36ddf7e5e6b9%2Fvidiconaframe(background).png?1530002331523" crossorigin="anonymous">


        <video id="video" style="display:none" preload="none"
               loop="true" crossorigin="anonymous" playsinline webkit-playsinline>
          <source type="video/mp4"
               src="https://cdn.glitch.com/c2ca5d0d-ccc4-4d01-a6ce-4d189a914581%2Ftryvid.mp4?1533644255893" />
        </video>
      </a-assets>
<!--------------Szene----------------------------------------->     


      <a-videosphere id="vidsphere" radius="100" src="#video"></a-videosphere>


      <a-image src="#icon_vid" position="-2 2 0" rotation="0 90 0 " onclick="playvideo()" color="red" class="clickable" event-set__enter="_event: mouseenter; color: #33ccff; width: 1.1; height: 1.1;"
           event-set__leave="_event: mouseleave; color: ; width: 1; height: 1;" ></a-image>



<!--------camera---------->    
<a-entity rotation="0 90 0">
  <a-camera user-height="0" wasd-controls-enabled="false" look-controls>
 </a-camera>  
</a-entity>  


    </a-scene>

        <script type = "text/javascript">

    function playvideo() {
        var videoEl_1 = document.querySelector('#video');

            videoEl_1.play();

        }
</script>

  </body>
</html>

Webkit policy only allows video autoplay for silent videos. You need a user gesture like a tap on the screen to play videos with sound. Copying from the Webkit blog post for convenience:

A note about the user gesture requirement: when we say that an action must have happened “as a result of a user gesture”, we mean that the JavaScript which resulted in the call to video.play(), for example, must have directly resulted from a handler for a touchend, click, doubleclick, or keydown event. So, button.addEventListener('click', () => { video.play(); }) would satisfy the user gesture requirement. video.addEventListener('canplaythrough', () => { video.play(); }) would not.

The listener works (fires "it clicks_1") but the video dosnt start and it gives me this error : Unhandled Promise Rejection: NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission. HTML:

<a-image id="playbutton_1" class="clickable" position="-5 0 0" width="2" height="2" rotation="0 -90 0" foo></a-image>

js:

  AFRAME.registerComponent("foo", {
    init: function() {
      var playthisvid_1 = document.querySelector('#playbutton_1');
      var videoEl_1 = document.querySelector('#intro');

  playthisvid_1.addEventListener('click', () => {

        videoEl_1.play();
        console.log("it clicks_1");
      })
    }
  })

来源：https://stackoverflow.com/questions/51878346/aframe-video-only-plays-muted-on-ios

标签

ios

iphone

audio

aframe