Full screen intro video

I’ve seen that great sample https://www.babylonjs-playground.com/#9FSDC7#13 about using videotextures but I’m wondering if there is a simpler way to play a video introduction without the need of creating a plane, dealing with the camera FOV and so since I only need to play the video in fullscreen.

Thank you in advance.

You could potentially use a layer but you would need to ensure a size matching between the canvas and the video.

https://doc.babylonjs.com/api/classes/babylon.layer

1 Like

It seems that Layer requires a url and that url should be an image so you cannot load a video

forget about that, I can force the .image property but I didn’t manage to use a plain color yet, setting the color4 to black with 1 alpha it seems to show the original background color yet!

You can put a texture in the texture property and leave the url to null.

I’ve tried it … https://www.babylonjs-playground.com/#08A2BS#38 but without luck (I wanted a black background behind the video)

You can trick it with a raw black texture: https://www.babylonjs-playground.com/#08A2BS#40

1 Like

If all you need is fullscreen video, is there a reason you can’t just use an html element that is positioned to cover the canvas?

I’m not sure if it could be easier than using babylon native controls (I need a button to skip the intro)

It’d probably be easier (especially if you want to add any video controls at a later date). You can call any function you like from an event listener on an html button (or any other element for that matter).

1 Like

I’ll check it but to be honest I don’t have any idea about how to start with it!