React-360: Cannot set a background video ?!

[danbugs]

Description

I was following the documentation here to set a background video to my application.

Expected behavior

I wanted the video I set as the player source to loop in the background.

Actual behavior

I get nothing. Just the black screen we get when there's no background set and this error on my console:

VideoPlayerManager.js:70 Uncaught Error: No registered player supports undefined files.
    at VideoPlayerManager.createPlayerImplementation (VideoPlayerManager.js:70)
    at VideoPlayer.setSource (VideoPlayer.js:92)
    at Object.init (client.js:22)
    at index.html:13

Reproduction

All I did was start a basic application, add a 360 video in static_assets folder and write this in client.js:

const player = r360.compositor.createVideoPlayer('myplayer');
// Set the video to be played, and its format
player.setSource('./static_assets/video.mp4', '2D');
r360.compositor.setBackgroundVideo('myplayer');

[lacson17]

I am also facing the same issue. I've followed the documentation, and even tried different equirectangular video files in mp4 format.

However, @danbugs if this is an option for you, I've had luck setting the video from the React side:

import { Environment, staticAssetURL } from 'react-360';
import VideoModule from 'VideoModule';

const player = VideoModule.createPlayer('myPlayer');
player.play({ source: {url: staticAssetURL('360_video.mp4')}, stereo: '2D' });

// inside class component
componentDidMount() {
Environment.setBackgroundVideo('myPlayer');
}

// render function, styles, etc below...

You can try using setLoop(true) with the player instance, otherwise you can probably try a counter and a setInterval set to your video's length to "restart" the video every time the video ends.

[danbugs]

Hey @lacson17 !

So sorry, I don't know how but your response escaped me and I just noticed it now. Your solution worked for me too. Too bad it seems we'll never know what the problem with doing it in client.js was 🤔. In any case, thanks a ton!

Closing the issue!

[spirival]

Hey @danbugs !

It's not a problem related to the API, but an oversight in the doc ! The VideoPlayer's setSource method requires a 3rd argument (the file format).

You'll find all browser video player's available formats, as keys of the FORMAT const (line 21), there : https://github.com/facebook/react-360/blob/master/React360/js/Compositor/Video/BrowserVideoPlayer.js

The 3rd line of your example should look like the following :

player.setSource('./static_assets/video.mp4', '2D', 'mp4');

Don't forget to play the video just after source initialization :

player.play()

Hope this will help !