0

I'm working on some A-frame project, but videosphere is not autoplaying its source. I rendered a sphere video from cinema4d and injected metadata, and I can see the source is loaded, but it is not played.

I originally wanted to play 60MB video locally, but even when I cut the video into less than 1MB, it is still not working so I don't think it's not about the size.

I tried both a video with a sound, and without a sound, and both are not working.

I also tried which worked in other person's project.

Here's the link for the video in case if you can check the video too!

https://drive.google.com/open?id=1F3VLYFTSnnlmRY1-xYxOe2SEWjZDwI9q https://drive.google.com/open?id=1kshs3IqJD0nMi0-fGLibnMDg9wc9lrxx

<!DOCTYPE html>
<html>
  <head>
    <title>Palm to Room</title>
       <link rel="stylesheet" href="style.css" />
   <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>


    </head>

    <body>
     <a-scene>
        <a-assets>
        <video
          id="BankVideo"
          autoplay
          loop="true"
         preload="auto" crossorigin="anonymous"
         src="src/sample-ij.mp4"
        >
        </video>
      </a-assets>

      <a-videosphere
                     id="EnvBank"
        rotation="0 180 0"
        src="#BankVideo">
      </a-videosphere>

      <!-- Define camera with zero user height, movement disabled and arrow key rotation added. -->
      <a-camera
        user-height="0"
        wasd-controls-enabled="false">
        </a-entity>
      </a-camera>

    </a-scene>

    </body>
</html>

***** UPDATE ***** I looked into some issues as @PiotrAdamMilewski suggested on the comment, but still it isn't really working. But I found that when I add this script and use this aframe component to the videosphere, I can play the video. So I assume it is not really browser or OS issue I guess...

So now I'm trying to tweak the component to be something that trigger the video to be played(which autoplay should do originally). I'm really new to Aframe component, so it's really taking a while, but I'd really appreciate if someone can add some advice on this!

AFRAME.registerComponent('play-on-window-click', {
  init: function () {
    this.onClick = this.onClick.bind(this);
  },
  play: function () {
    window.addEventListener('click', this.onClick);
  },
  pause: function () {
    window.removeEventListener('click', this.onClick);
  },
  onClick: function (evt) {
    var video = this.el.components.material.material.map.image;
    if (!video) { return; }
    video.play();
  }
});
seungmee lee
  • 43
  • 6
  • [This glitch](https://glitch.com/~stack-57542229) seems to be working on chrome on windows10, what os are you trying to run it on ? – Piotr Adam Milewski Aug 18 '19 at 11:47
  • I have to run this on macOS, and it seems like the glitch still doesn't work on my device... Were you able to run and play the videosphere? – seungmee lee Aug 18 '19 at 13:19
  • It's working for me, I've added a macos tag, it may be a similar issue to [these](https://stackoverflow.com/questions/20347352/html5-video-tag-not-working-in-safari-iphone-and-ipad), I've added some attributes, let me know if it still didn't help – Piotr Adam Milewski Aug 18 '19 at 13:48
  • It still didn't work, but I found that when I use some aframe component(please look the update I wrote on the original post), I could manage to play the videosphere. I'm now trying to tweak it to make as a autoplay function, and it'd be a great help if you can add some advices on it! – seungmee lee Aug 18 '19 at 17:21

1 Answers1

0

As far as I know (also check this link), macOS, or iOS safari has disabled autoplay. Although autoplay policies seem to vary depending on chrome or safari (and their versions), sometimes muted videos are allowed to autoplay.

You should add any user interaction to play the video

btn.addEventListener('click', function() {
   videoElement.play()
})
// assuming btn is any clickable object, and videoElement is the <video>

As for the component, you can simply call play() on the video element, no need to go deep in the material:

AFRAME.registerComponent('play-on-window-click', {
  init: function () {
    this.onClick = this.onClick.bind(this);
  },
  play: function () {
    window.addEventListener('click', this.onClick);
  },
  pause: function () {
    window.removeEventListener('click', this.onClick);
  },
  onClick: function (evt) {
   var video = document.getElementById('BankVideo')
   if (!video) { return; }
   video.play();
  }
});

glitch here

It seems you also can call play() on the element after it's loaded. It works on macOS Sierra 10.13.6. Same glitch, just the timeout.html
Piotr Adam Milewski
  • 14,150
  • 3
  • 21
  • 42
  • Thank you so much! The timeout method was more suitable for my project and now it's working perfectly! Since it only works when it's muted, I'm trying to find a way to include a sound seperately, but you really saved me! Thanks again! – seungmee lee Aug 19 '19 at 07:19
  • @seungmeelee glad I could help, if its working feel free to mark the anwser. – Piotr Adam Milewski Aug 19 '19 at 07:57