Hi @tokuyama,
Thanks everyone for getting involved - this is really exciting to see and hopefully we will see more and more developers collaborate in the future! This is definitely more of a mobile browser/A-Frame issue - that said, I have some thoughts on the topic which may be helpful!
As you may know, some modern mobile browsers (especially iOS) require a user interaction before certain things can be done, such as the playing of media. In the case of projects created by ZapWorks Studio, it appears as if this is not the case. However, the Launch button on the splash screen is our way of getting that user interaction, as they must consent to launching the experience.
We’ve actually got a video example for Universal AR for A-Frame on the way. In fact, it just needs to go through some final checks before it goes on the Example Project Library; but as I developed it, I thought it wouldn’t hurt to provide you with one of the approaches I went with, which is pretty much pure Javascript.
I previously mentioned the Launch button - with Universal AR, we need to implement our own approach, as we do not get these splash screens by default, and if you’d like a splash screen, you will need to make your own within your project itself. We do have a handy package for that though if you’re curious.
In the case of the example that is (hopefully!) coming out soon, I simply include my video as an asset as usual, making sure to make autoplay false
(otherwise it may not play at all):
<!-- ...assets... -->
<!-- Video -->
<video id="bigBuckBunnyVideo" preload="auto" autoplay="false" loop="false" src="https://cdn.aframe.io/videos/bunny.mp4" crossorigin="anonymous" muted></video>
<!-- ...assets... -->
Add it to my scene:
<a-video id="bigBuckBunny" src="#bigBuckBunnyVideo" scale="1.35 1 1"></a-video>
And then use buttons to play or pause the video. In the example, I use a-frame entities with a raycaster class to make them clickable and a custom component, but because the functionality is done with Javascript (we turn muted
to false
):
// Initialise our video in a variable
const bigBuckBunnyVideo = document.getElementById('bigBuckBunnyVideo');
// Register our play component
// This component will play the video when an entity holding it is clicked
AFRAME.registerComponent('play', {
init: function () {
this.el.addEventListener('click', () => {
bigBuckBunnyVideo.muted = false;
bigBuckBunnyVideo.play();
});
},
});
It wouldn’t surprise me if you could do this with HTML elements as well, as I am targeting the video DOM element, rather than an a-entity.
Hopefully this shows an example of how we can play videos in our A-Frame experiences. Unfortunately with the browser restrictions put on us, it’s up to developers to find their own workarounds.
I think the best solution here would be for your experience to have a welcome or splash screen to your experience if possible, as this can be a quick way of unmuting your video without your users suspecting anything.
Hopefully that was helpful!
Have a nice day!
Francesca