Autoplaying videosphere from A-frame is not working on any browser(Safari/Chrome)

问题

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();
  }
});

回答1:

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

来源：https://stackoverflow.com/questions/57542229/autoplaying-videosphere-from-a-frame-is-not-working-on-any-browsersafari-chrome

标签

macos

aframe