Can't play video texture under a-frame framework on iPhone

We use this framework https://aframe.io/ to develop virual reality site. Our scene contains the sphere with video texture on it. It works well on desktops and some android devices, but we can't start videoplayback on iPhone 6. Mobile Safari shows only first frame of video. Does anybody has any ideas how to solve this problem?

here is the code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Player</title>
    <meta name="description" content="Player">
    <script src="https://aframe.io/releases/latest/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
         <a-camera position="0 0 0" cursor="fuse: true; maxDistance: 30; timeout: 3000" wasd-controls-enabled="true"></a-camera>
         <!-- Creating 360 deg screen --> 
       <a-videosphere src="/images/super_cute_cat.mp4" autoplay="true" loop="true" rotation="0 0 0"></a-videosphere>
       </a-scene>
    </body>
</html>

Solution

This issue is detailed at https://github.com/aframevr/aframe/issues/316#issuecomment-183006679

iOS has restrictions on playing inline video. We need to define webkit-playsinline on the video element. And we need to pin the app to homescreen for that to work.

We are currently working on modals for iOS to help with this experience if and until iOS revisits this restriction.

EDIT: Alternatively, you don't have to pin the app to the homescreen. But the video texture will launch in the iOS video player. The user can close this video, and then scroll up to hide the browser chrome. But this experience is arguably worse than pinning the app to the homescreen, especially if you have more than one video texture.