
Unreal Engine – Play a Video in a Widget
VIDEO IMPORT AND MEDIA PLAYER:
- In the Content Folder create a new folder called Movies
- If the video is not in this folder, it won’t get packaged in the game.
- Drag in a supported video file into the Movie folder.
- This should be in a compressed video format such as an mp4.
- See the link here for supported video formats: Supported Video File Formats
- Also move the video file into the Windows/PC project Movie folder using the PC folder browser (I.E: Move the video again into the PC folder).
- Right click in the new folder and in the menu find (Media > Media Player) and create a Media Player.
- A panel will pop up and be sure to tick the box to create a media texture asset.
- Back in the folder > Right click on the media texture and from the pop-up menu create a material.
- Open the Media player. Double click the video file to make sure it plays.
- Tick the loop box if you want it to loop.
WIDGET:
- In the same folder (or if you have a specified widgets folder.) Right click > select User Interface > Select a Widget Blueprint.
- Create a new widget (there is only one default option to select).
- Rename the widget > E.g. > WB_VideoWidget
- Open Widget > Add a Canvas.
- Now drag in the new material from the movies folder into the widget.
- Resize the material box so it fills the canvas.
- Please note: You don’t need to add any code into the widget graph (you can if required – but this will work without any code).
BLUEPRINT:
- Right click in the Movie folder > Create a Blueprint > Select Blueprint Actor > Name it BP_TV or a name of your preference.
- The files now in your folder should show as below: Blueprint, Video, Material, Texture. Widget and Media player.
- In the Blueprint > Add a Box Collision > Resize as required.
- Right click on the collision box and select –Â on component begin overlap.
- Right click again and add on component end overlap.
- The player will trigger the widget to play the video full screen when they enter the collision box and it can be removed when they leave the trigger box.
- Drag off from the on component begin overlap node and add an Open Source node. In this node select the video in the drop-down list.
- Create a new variable and change it from the default Boolean to a Media player object reference.
- Drag this node into the graph and from the options provided select Get NewVar (or whatever you renamed it to – ideally rename to ‘Media Player’).
- Plug this into the target of the Open Source node.
- Press compile and with the Media player node selected > in the details panel > add the media player that was created.
- Drag off from the delay node and add a Create widget > In this node select the widget created for playing the video.
- Drag off this node and search for Add to viewport.
- Drag off from the component end overlap > Search for –Â Remove from parent > Drag off from ‘Return value’ of the widget node and plug into Remove from parent Target.
- See image below for final graph.
ADD SOUND TO THE VIDEO:
- Simply add a Media sound component to the component panel for the video to play sound.
- With this selected make sure the Media player (created above) is selected in Media slot, in the details panel of the Media Sound
- The component panel should like below (assuming you haven’t added other components – which if required is fine of course)
THE FINAL GRAPH:
FINISHING OFF:
- Drag the blueprint into the level and it should work. When the player enters the collision box the video will play in the widget full screen and when the play leaves the collision box the full screen video will be removed.
- Note: If the video doesn’t cover the entire viewport > In the widget, increase the size of the material box and make sure it overlaps with the canvas.Â
Final Result
Related Video Blueprint Tutorials
This overview tutorial is part of a specific set of tutorials that relate to the upload and playing of video in Unreal Engine. Please see below the related posts in this series.
-
-
How to Play video in a widget.
-
-
Leave a Comment
You must be logged in to post a comment.
Subscribe to Newsletter
Motion Forge Pictures Blog
Featured Posts and Links
Free Height Maps
Free 3rd Person Animations
Free Store Downloads
Unreal Engine - Free Materials
Latest Posts
1202, 2025
502, 2025
502, 2025
2901, 2025
1511, 2024
Categories
Tags
ambient (3)
ambient background video (2)
animation (18)
animation and filmmaking (17)
arch viz (5)
array (2)
background video (3)
blender (24)
blueprint (11)
blueprints (13)
cinema (3)
cinematic (4)
cinematics (10)
davinci-resolve (3)
design (2)
download (4)
free (14)
free download (31)
gaming (2)
ghosts (5)
ghost story (3)
height map (3)
height maps (3)
history (4)
Info and Insights (36)
landscape (11)
landscape height maps (6)
low poly (4)
materials (3)
maya (3)
meetup (2)
modeling (3)
photo-realism (2)
quick tip (3)
ratio (3)
relax (3)
Resources and info (5)
speed design (3)
sports car (3)
substance painter (6)
terrain (5)
tutorial (2)
unreal engine (38)
unreal engine 5 (3)
video (3)
Thank you for this!!! I’ve been following various youtube videos all day and none of them fully worked. They also went about things in a much more complicated way, this feels much simpler and cleaner.
Many Thanks Abby – I also have some plans do some youtube tuts – but I am pretty busy and I never get around to doing them! Hopefully this year I will at least make a few that I have in mind :)