VideoSphere not playing video in A-Frame, even after following other guidance

Question

I'm working on an A-Frame VR project and having issues getting video playback on the a-videophere element.

The guidelines I've followed: - Place playsinline or webkit-playsinline inside of video asset and include meta tag in head. - Load video source during window load, then use a button to start the playback. - I'm aware of the autoplay issues for video playing in mobile.

I've looked around all over stack overflow to find solutions, the latest one I tried is here, so please don't flag me for duplicate question. The JS in this question is even a modification of that other question.

Before you guys start tearing my code apart, just understand that I've tried several methods. I've done coy and paste, modified solutions to fit my project, came up with my own, etc. This code does indeed run on desktop. It actual WILL run on mobile when I'm using standard html video tags and buttons OUTSIDE of the a-frame scene, but as soon as I throw it into the scene and use a videosphere, nothing works.

Here's my snippet of my scene:

<a-scene>    

<a-assets>
    <video id="video" src="Videos/video.mp4" webkit-playsinline></video>
</a-assets>

    <a-image id="playButton" src="#buttonImg">
        <a-text value="PLAY" position="-.23 0 0" scale=".8 .8 1"></a-text>
    </a-image>

<a-videosphere id="videoShere" loop="true" src="#video" rotation="0 -90 0"></a-videosphere>

</a-scene>

<script>
      var scene = document.querySelector("a-scene");
      var vid = document.getElementById("video");

      if (scene.hasLoaded) {
        run();
      } else {
        scene.addEventListener("loaded", run);
      }

      function run () {
          scene.querySelector("#playButton").addEventListener("click", function(e){
              vid.play();
          });
      }
</script>

Again, the issue isn't with getting REGULAR html videos to play in a mobile browser. The issue is getting them to play while using a-frame elements.

Answer 1

Your milage may vary, but looks like if you set play from the component videoShere.components.material.material.map.image.play(); it helps (tested on Chrome on Pixel 1). I don't have an iPhone with me to test, but let me know how it goes.

https://glitch.com/edit/#!/a-frame-video-click-play

  document.addEventListener("DOMContentLoaded", function(event) {
    var scene = document.querySelector("a-scene");
    var vid = document.getElementById("video");
    var videoShere = document.getElementById("videoShere");

    if (scene.hasLoaded) {
      run();
    } else {
      scene.addEventListener("loaded", run);
    }

    function run () {
      if(AFRAME.utils.device.isMobile()) {
        document.querySelector('#splash').style.display = 'flex';
        document.querySelector('#splash').addEventListener('click', function () {
          playVideo();
          this.style.display = 'none';
        })
      } else {
          playVideo();
      }
    }

    function playVideo () {
      vid.play();
      videoShere.components.material.material.map.image.play();
    }
  })