1

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.

C. West
  • 27
  • 1
  • 6

1 Answers1

2

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();
    }
  })
Noam Almosnino
  • 866
  • 1
  • 6
  • 8
  • This works great when if I copy over my index.html with the file that's in the link you shared, but when adding in my own video file, I still get nothing. I'm beginning to believe the issue is much deeper than I thought, being my video source. Does the video HAVE to come from an external source ( – C. West Feb 07 '18 at 19:22
  • So I think I figured it out. Although my video was already in .mp4 format, I ran it through a video converter to make it again, .mp4. I also used a .webm file. I would have never really figured that out though if it wasn't for that link you shared. Thanks! – C. West Feb 07 '18 at 19:57