VideoStreamPlayer Intro

Help
1

Godot Version 4.7.1

I try that my video of 800px by 600px be centered and auto ajust to the screen resolution keeping it’s properties. Auto ajust if it is a 4:3 or 16:9. for a game i’m building that i’m sure gonna be fantastic. it is my first game and i’m a beginner. I have search before posting as "VideoStreamPlayer and AspectRatioControl but did not find step by step indications.

Here are all the steps i have done for the video.

First i have created a video of 800px by 600px, i have converted with vlc media player v3.0.21. Created a profil that i named “For GodotEngine”, with the options (Methode Encapsulation) choosen the radio button “ogg/ogm”, Codec Video that is “Theora”, debits 5000kb/s. Codec Audio that is “Vorbis” debits 128kb/s, frequency 48000hz. Then i have exported the video. With the windows explorer of file, i have then choosen the option (show the extension), i have then changed manually the .ogg file to the .ogv. After i have choosen the option (hide the file extension).

After still from the window explorer, i have simply (mouse-click-drag) the video file from the explorer to the bottom left side of GodotEngine 4.7, where there is the directory where you see (res://). Godot have automaticly recordnize the video with no problems.

From the top of the godotengine screen where you see 2d, 3d, script, etc, i have click “2d” and add a page, that i called (introduction). Next thing on the top left, i have choosen (scene tab), then just below clicked the (+) to add some “blue circle”, renamed this circle “introvideo”. After i have added some child element, that make some popup apear with some search, i have writen then “AspectRatioControler” and double-click so that it apear on the tree on the left side.

The properties of the “AspectRatioControler” on the top right there is the tab (inspecteur) with some options. I then expand “Layout”, i see sub option (anchor preset) and i notice that i see the video full, but on the (top left square) of the screen, but when i choose an other option the video dont apear. So i leave it as “top left”. Still the video is not centered and i see some grey color outside of the video filling the screen of the maximize window. I then expand the option (container resizing) and i choose both opton that i see some square in the middle. If i choose an other option, i still see my video with the sound on the top left of the maximize screen.

After i create some (child) from the “AspectRatioContainer” wich open some popup and i write “VideoStreamPlayer”. After in the tab (inspecteur) i choose the “stream” and indicate to choose the video ogv file. I then checkmark “autoplay” because i want when this scene is loading that it autoplay the video, and i choose also the checkmark “loop”, because i would like to put some button rectable (something simple) that go to some other scene to get out of the scene of the video that loop.

The only script that have been done is the script related to the scene (introduction). This script is:

extends Node2D

# Called when the node enters the scene tree for the first time.
func _ready() → void:
pass # Replace with function body.
DisplayServer.window_set_mode(DisplayServer.WINDOW_MODE_MAXIMIZED)

# Called every frame. ‘delta’ is the elapsed time since the previous frame.
func _process(delta: float) → void:
pass

Question

The thing i would like is to know and maybe other peoples would like to know, to put a video, that is bigger or smaller of the screen size, that auto detect and auto ajust to the screen size, that is centered (keep its proportions) weather its a screen 4:3 or 16:9. Also that you dont see the by default grey color that surround the video filling the maximized window. When i say maximized i dont mean full screen (keeping the view of the task bar at the bottom of windows).

I’ll have many questions for other things, because i think to create an easy step by step pdf guide. I have build many guides in the past that are real easy to understand. Since GodotEngine is license MIT i think i could even create some screenshots, so that the step by step instructions will be real easy for all (just look my indications of the steps i have done) for my question here; so you can imagine my pdf guide for all will be real easy to follow. But i’ll need the help of many peoples, specially i’m a beginner.

Thanks for your time and help.

2

Sounds like you made a 2D scene instead of a User Interface scene. Change your root node to a Control node, or your AspectRatioContainer, keep the entire scene tree green, not blue.

3

Here is what i have done, its getting closer thanks Gertkeno. I have erased all node first, to start from new. Then in the (scene tab) i have click on the (+) and choosen “User Interface Scene”, this have created a green circle automaticly named (Control). I have then pointed with my mouse “control”, then (right-mouse-click), then i have choosen (Change le type), this had made some popup window apear with some search box. I have then writen “AspectRatioController” and double click onto.

Then on the right i have click on the tab “Inspector” and chosen some options. I expand “AspectRatioController” and see the option (stretch mode), i have then choosen “Cover”. Then i expand “Layout” and choose (Anchor Preset) and choose the icon that is a full filling square. Next i expand “Container Sizing” and choose both options (square in the middle).

From the green circle on the top left that is a Control as a AspectRatioContainer, i create a child node. It make some popup box apear, and i write “VideoStreamPlayer”. After in the (inspector) on the right top side, the “Stream” i choose my ogv video file, and choose the options (autoplay) and (loop) checkmark box. When i choose to checkmark the box (expand) i can hear the music of my video because it autostart, but i dont see nothing, so i uncheckmark it and it come back. When i then press the top icon that is some (play button) to test, i then finaly notice that the video is centered. I expand then the “Container Sizing” put the (two centered squares), cause the other options i have try and the video is bad placed.

The problem is still that i see some “grey color” surrounding my video, and that my video had not expand (keeping its ratio) to the maximized window. Maybe they have some script to put for the video, that by pointing the green circle node “VideoStreamPlayer”, then clicking on the (right-mouse-button) to have the option of: (Attatch a script)?