[Question] How should I attempt video? about react-360 HOT 5 CLOSED

A recent release introduced the <Video> tag, which allows you to do all of the things requested above.

https://facebook.github.io/react-vr/docs/video.html

from react-360.

Yes you would need to do it on the native side, either in client.js or in a Native Module. Both audio and 2D video support are highly requested features that are in active development.

from react-360.

Thanks @amberroy ! Right now I successfully created a HTML5 video, then applied to a THREE.VideoTexture and added to the scene in client.js and managed to created a very simple VideoModule boilerplate to handle play(), pause() and so on. The thing is that while it works fine and web and I could reuse the mesh when playing a new video in the scene (supposing i'm only playing one video at any given moment) it doesn't work properly on mobile because the VRButton's onClick who is issuing the play() and pause() methods is not bubbling correctly to the VideoModule, giving me the following DOMException: Uncaught (in promise) DOMException: play() can only be initiated by a user gesture.

To clarify, i'm initializing VideoModule this way: VideoModule.init(video, mesh), video being the HTML5 and the THREE mesh, and the VideoModule.play() just does video.play(), same thing with pause(). So my current workflow for playing a video is:

client.js: Creates HTML5 video, a VideoTexture and the mesh, both added to scene and then initialized in VideoModule.init(video, mesh)

index.vr.js: VRButton.onClick => _handleVideo() => VideoModule.play()

Any ideas on why this might happen? Thank you!

from react-360.

The problem is the limitation of the browsers. As the message states, it needs a user gesture to start a video. It is the same problem as with enabling fullscreen.

In VR the click handling is purely handled by javascript and so the browser can't root the event to a user gesture and fails to play the video.

One solution would be to catch the event which triggers the vr mode and use this to play all videos in the scene and pause them instantly. The resume of the video shouldn't be bound to a user gesture.

Unfortunately it would be not possible to add videos later. So for a more complex scene this use case it not suited.

from react-360.

@Ninerian you mean the "View in VR" button? That's a good suggestion, i'm going to try it right now. I'll post the result here. Thanks

from react-360.