is not playing in Android browsers

Question

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

score 2 · Accepted Answer · answered Jul 13 '16 at 17:55

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.

Jon Herrera · Answer 2 · 2016-10-31T14:41:40.947

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>

is not playing in Android browsers

2 Answers2