CODEWITHSUNDEEP
javascriptaframewebvr
user6573749
user6573749

Reputation:

<a-videosphere> is not playing in Android browsers

I'm trying to build an aFrame project and attach a 360 video in this project. The problem I faced is that the 360 videos worked on Google Chrome in my desktop. But it is not working in my Android phone either Chrome nor Firefox.

Here is the source code

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>360 Videoss</title>
    <meta name="description" content="360 Video — A-Frame">
    <script src="aframe.js"></script>
	<script src="aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-assets>
		<video id="video" src="vid.mp4"></video> 
      </a-assets>
      <a-videosphere src="#video" rotation="0 180 0" loop webkit-playsinline></a-videosphere>
    </a-scene>
  </body>
</html>

Thank You

Upvotes: 0

Views: 879

Answers (2)

Jon Herrera
Jon Herrera

Reputation: 97

As @ngokevin mentions, browsers are basically not autoplaying anything unless there is prior user interaction.

What's worked for me is to remove autoplay from all media (audio & video) assets, and create a function that triggers everything through a button click.

<head>
    <meta charset="utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <script src="https://aframe.io/releases/0.3.0/aframe.min.js"></script>
    <style>
        #play-button{
          position: fixed;
          top: calc(50% - 1em);
          left: calc(50% - 100px);
          width: 200px;
          height: 2em;
          z-index: 10;
        }
    </style>
  </head>
    <body>
    <button id="play-button">Begin Your Experience</button>
    <a-scene>
         <a-assets>
             <!-- VIDEO AND AUDIO ASSETS -->
             <audio id="n1" src="snd/narration.mp3" autoplay="false"  preload="auto">
             <video id="v1" src="video/sky.mp3" preload="auto" autoplay loop crossorigin webkit-playsinline></video>
         </a-assets>
         <!-- VIDEO AND AUDIO ENTITIES -->
         <a-videosphere id="theVideo" autoplay="false" src="#v1" rotation="0 90 0" radius="400"></a-videosphere> 
         <a-sound id="theAudio" src="#n1" autoplay="false" position="0 0 0" volume="1"></a-sound>
    </a-scene>
</body>
<script>

// Play button, required by browsers to grab user interaction before autoplaying videos.
document.querySelector('#play-button').addEventListener("click", function(e){
startStuff();  // launch the first voice over
this.style.display = 'none';
}, false);

function startStuff(){
    var theVideo = document.querySelector('#n1');
    theVideo.play();

    var theAudio = document.querySelector('#v1');
    theAudio.components.sound.playSound();
}
</script>

Upvotes: 2

ngokevin
ngokevin

Reputation: 13233

Check https://aframe.io/faq/#why-does-my-video-not-play-on-mobile

Mobile browsers have limitations with displaying inline video.

Because of an iOS platform restriction in order to get inline video (with or without autoplay), we must:

Set the metatag. Set the webkit-playsinline attribute to the video element. Pin the webpage to the iOS homescreen. On certain Android devices or browsers, we must:

Require user interaction to trigger the video (such as a click or tap event). These issues are filed on GitHub. We plan on improving the user experience by providing:

Instructions and UI to the user the necessary steps to get mobile video playing (pin-to-homescreen, tap). Out-of-the-box components for routing user-triggered events in order to play videos.

Upvotes: 2

Related Questions