How To Display A Video In A Widget | With Audio - Unreal Engine 4 Tutorial

hey guys and welcome back to another i'm religion 4 tutorial in today's video i'm going to show you how to display a video inside of a widget so in this one it's going to be an example of an mp4 but this should work with any supported file type in normal engine so let me hit play and show you what we're going to make so in this example i'm going to be pressing p to load up the widget in the video however you can do this wherever you like so if it's a credits when you open the credits you can do it there by pressing a button or anything like that i'm gonna press p and it's gonna play this video with audio in it as well and then we also can't be moving the player while we're watching the video and then once the video has ended the widget should just be taken off of our screen and we then we should be able to move about like so again and again that had both the video and the audio this is just something that i quickly put together in premiere so i got copyright free video copyright free ban sound effects and copyright free weight sound effects and just put it all together just to get this quick video just to show you that the video and audio both work together and again we can then move afterwards like so and i've just had it fade in and fade out and the fading i did inside of the video editor as well however you can do that in unreal by fading in another widget which i kind of have a video similar to that which i'll link on screen now so without further ado sorry for the long intro let me delete this code and i'll show you how i've done it so the first step we want to take is we want to import our video into unreal so that's very simple all we can do is we can simply just drag and drop our video into unreal like this and we'll get the video file here so you can see i have city life final media source here as that's what i named it i named it city life then what we're going to do is we're going to right click go to media and we're going to get a media player this is how we actually play videos and we're going to take video output media texture asset because we want to put this onto a texture so we put it in a material so we display it in the widget so tick that hit ok i'm going to name this one citylife mp for media player but you can name this absolutely whatever you like for example just media player and you can see there it's also created a texture like so we want to open up both the media player and the media texture we'll go to the media player first and you can see if i double click city life it should load it up just give it a second to load and what we want to have is make sure we have play on open ticked like so it should be by default make sure it is and also i have video test that's my previous tutorial so don't worry if you don't have that you can just have one and it will work fine again if i double click to open it it's going to play this so this is what our video is going to look like we've got the video we've got the audio this is what the player will see obviously we won't have these bars here that's just because of the different resolutions but that's what we're going to have so again make sure play on open is ticked and we can close that in the texture we can keep all of these as default as they are i didn't actually want to open the texture that's my bed so we can close that again like so what we're going to do next is we're going to create material for our texture so we're going to right click on the texture and create material we can leave the name the same and this is what we want to open because we want to change it so we can use this inside of our widget and so that's a very simple thing to do so what we do is with output node here selected or with nothing selected we're going to select the material domain changing it from surface to user interface because that way we can use it in the user interface or the ui or the widget and you can leave everything else the same my blend mode can be opaque rgb is going to go into final color we're going to hit apply and then that will be that part done that's the only changes we need to make in here so you can see the preview is there it's just white as we're not actually playing the video yet then we can close this like so we're going to do next is we want to create our widget so to do that it's very simple all we're going to do is right click go to user interface create a widget blueprint and i'm going to name this one city life video widget again you can name this absolutely whatever you like that just makes more sense for me i'm going to open it up straight away in here what we're going to do is you want to drag and drop an image from the palette in here change the position x to be 0 y to be 0 size x to be 1920 and the size y to be 1080. that way it's now full screen and we're going to anchor it to the whole screen as well so it doesn't move about the image we're going to change to be the material we just made i named mine city life mp video mat there again you can see it's white just as we don't have it loaded in yet so we then compile and save that we don't need to change anything else for the settings of it however if we go to the graph here we can start setting up some code and we're going to delete event pre-construct and event tick and just use and come off of event construct here now i'm using event construct because i want to play the video as soon as the widget comes on screen as that's what i use this for so again if you're using this as a credits you have it so the credits is a separate widget you open up the credits and then replace this video and i do have a video on main menus and credit menus and stuff like that so i'll leave a link to that in description down below and on screen now as well so i could say off of event construct i want to play the video so what i'm going to do is i'm going to hit the plus variable here and i'm going to name this one media player and as the name suggests i'm going to change the variable type to be a media player and get media player just get an object reference there we compile and we can change its default value to be our city life mp or the media player that we made earlier then with this what we do is drag and drop and get that there out of this we're going to open source then we can connect that into construct there the media source being our city life file media source we made earlier and again because we kept it as play on open it's going to open the source and then play it which is perfectly what we want and that should work great for us and what i'm going to do is i'm going to hold down d and i'll click to get a delay i'm going to set the duration to be 0.1 get a reference to our image which is essentially where our video is and out of this i'm going to set the visibility connect to that to completed i'm going to keep the invisibility as visible and so what we also want to do is go back to the designer with the image still selected we're going to change the visibility to be hidden by default now the reason i'm doing this is because when i was making it earlier there was a slight glitch where it would flicker for the first frame so what i'm doing is just making it not visible for the first frame and then it's gonna be visible again and now the reason for that might be because i'm fading the video in in a video editor however i'm not too sure i've tried many different solutions and none of them really seem to work other than this one and as it is literally just the first frame that we're skipping you don't notice it at all either so it just gets rid of that cut because what it looked like it was doing was it was adding another frame at the start of the video which was making it flicker which obviously we didn't want so this is the workaround which i found for it if you've encountered this before and you've got a better fix then obviously let me know in the comments down below as well what we're going to do after this is we're going to hold down d left click to get another delay the duration of this i'm going to set to 13. now the reason i'm setting it to 13 is because that is how long my video is so essentially we want to do some more code after this once the video has ended so a good way to find out how long it is is to open up our media player again double click the video to open it and you can see here we have 0 out of 12 because it's 12 seconds long however when i set it to 12 it cut out just a fraction too early so i set it to 13 and it looks great so again set this delay here to the length of your video possibly even the length of your video plus one that way we're going to take it off screen once the video is finished playing and to take it off screen what we can do is come out the completed and get remove from parent which is going to simply just take this widget off of our screen and compile and save and that is the code inside the widget done so this is going to actually play the video now at the moment this won't have any audio this will just be the video and we haven't even made any code to start playing it yet it just means whenever we create this widget the video will start playing which is perfect so what we can do is we can compile save and save that as well and then let's also close this and the rest of the code we're going to do is going to be in the character blueprint so i'm going to open that up so for me that's content third person bp blueprints third person character but for you could be third first what if you've named it and in here what i'm going to do is again just set up a button in which i press to start this video so again this could be entering a box collision if it is you'd probably want to do this in the level blueprint instead so you get a box trigger going the level blueprint it could be off of a ui button pressing the main menu anything like that so choose the appropriate blueprint for you again what i'm going to do is just on a p keyboard event so i'm going to get the p keyboard event for play and out of pressed what i'm going to do is create the widget with the class being the widget we've just made which only named mine city life video widget there and the return value we're going to add to viewport and what this is going to do is that is going to play the video so it's putting the widget on screen and adding it to our screen so that way we can now see the video what we also want to do is create some audio so we're going to add a component and we're going to add a media sound now if you don't have media sound you're probably in the wrong blueprint so i believe you can get this in the character blueprint the level blueprint it's just an actor anything like that but if you don't have it you'll need to go through via a different blueprint so it could just be you go in the character blueprint and then you cast to your character to play the sound anything like that but like i say i'm doing it in here so what i'm going to do is drag and drop the media sound in here and out of this i'm going to get a play node or sorry a start node start going into add to viewport there so when the video starts the audio will start as well what i'm also going to do is i want to stop the player from moving around and messing with the video so what i'm going to do is disable the inputs i'm going to come out start and disable input like so with the target being self and player controller being get player controller then what i'm going to do is hold on d left click to get another delay but again this being the length of my video which i found was 13 and after completed i'm going to just re-enable the input so enable input target itself play controller get player controller and now this means whenever i press p or whatever you have it as so again walk into a box station anything like that we're going to start playing the video start playing the audio and make it so the player can't move until the video's ended in which they then can't move again so if we compile and save and hit play to see if this is working because it should be now so again i can walk around and let's jump just to test it as well i jump and press p the video started we haven't got the audio because i actually forgot to do one tiny thing how the video is playing and then we'll see if it also cuts out at the end as well so it comes off the screen and see if we're still flying or jumping sorry yeah we are so actually we fell before the widget got fully taken off screen but that's good because that means we can't move so one thing we want to change now is we want to select the media sound and we forgot to put the media player in here so all we can do is get a media player put city life mp compile save play i'm going to move up here and i'm going to hold w the whole time to make sure that we can't move and press p and now we have the audio along with our video as well like i say i'm still holding w to make sure that we can't move while in this widget here it's a moment of truth yep we just started moving after which it came off screen and again we have the video and the audio so this works perfectly so i think that'll be it for this video so we've done everything we want to do we've created it in which we can do anything to create a video so it comes on screen plays the video plays the audio and while it is playing we can't move the character at all so we can't jump interact with anything move it just works perfectly and then once the video has ended it will be taken off of our screen as well and then we can move about again so thanks so much for watching i hope you enjoyed it and i hope you found it helpful and if you did make sure to like subscribe down below so thanks so much for watching and i'll see in the next one

Channel: Matt Aspland

Views: 10,990

Keywords: ue4, unreal engine 4, unreal engine, tutorial, ue4 tutorial, unreal engine 4 tutorial, how to make a game, how to, 3d modelling, blender, unity, games design, graphic designer, ue5, unreal engine 5, mp4, widget, video, audio, film, movie, play, stop, pause, start, end, ue4 play video, in widget, ui, image, ue4 video, video with audio, sound, music, with, noise, play video in widget, display, mkv, file, format, media, player, media player, material, texture, output

Id: qhiSl8i4jbQ

Length: 11min 56sec (716 seconds)

Published: Fri Mar 12 2021