title: Aframe video only plays muted on ios
body: <p>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: <a href="https://jsfiddle.net/237s96ka/1/" rel="nofollow noreferrer">https://jsfiddle.net/237s96ka/1/</a> </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
  
      &lt;title&gt;zoom-showreel&lt;/title&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta author="" inhalt="vr-video"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;meta name="apple-mobile-web-app-capable" content="yes"&gt;
      &lt;script src="https://aframe.io/releases/0.8.2/aframe.min.js"&gt;&lt;/script&gt;
  
    &lt;/head&gt;  
    &lt;body&gt;
  
    &lt;a-scene cursor="rayOrigin: mouse" raycaster="objects: .clickable" vr-mode-ui="enabled: false"&gt;
  
        &lt;a-assets timeout="0"&gt;
  
          &lt;img id="icon_vid" src="https://cdn.glitch.com/710c25d4-6d3f-48ef-910b-36ddf7e5e6b9%2Fvidiconaframe(background).png?1530002331523" crossorigin="anonymous"&gt;
  
  
          &lt;video id="video" style="display:none" preload="none"
                 loop="true" crossorigin="anonymous" playsinline webkit-playsinline&gt;
            &lt;source type="video/mp4"
                 src="https://cdn.glitch.com/c2ca5d0d-ccc4-4d01-a6ce-4d189a914581%2Ftryvid.mp4?1533644255893" /&gt;
          &lt;/video&gt;
        &lt;/a-assets&gt;
  &lt;!--------------Szene-----------------------------------------&gt;     
  
  
        &lt;a-videosphere id="vidsphere" radius="100" src="#video"&gt;&lt;/a-videosphere&gt;
  
  
        &lt;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;" &gt;&lt;/a-image&gt;
  
  
  
  &lt;!--------camera----------&gt;    
  &lt;a-entity rotation="0 90 0"&gt;
    &lt;a-camera user-height="0" wasd-controls-enabled="false" look-controls&gt;
   &lt;/a-camera&gt;  
  &lt;/a-entity&gt;  
  
  
      &lt;/a-scene&gt;
  
          &lt;script type = "text/javascript"&gt;
  
      function playvideo() {
          var videoEl_1 = document.querySelector('#video');
  
              videoEl_1.play();
  
          }
  &lt;/script&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>