UMG Video Player

The UMG video player is available here : https://www.unrealengine.com/marketplace/umg-video-player

Introduction

UMG Video Player is a user interface designed with UMG allowing you to play video inside your game or your application. The main benefits of using the UMG Video Player is the integration of the most common controls for video:

• Play/pause button

• Volume control (including mute function)

• Progress bar showing the position in the media and allowing the user to move in the media by clicking the progress bar

• Subtitles management (if the attached audio file has subtitles)

The purpose of this documentation is to present the main functionalities of the UMG Video Player and how to use them.

A blueprint tutorial UMGVideoPlayerTutorial is explaining you how to quickly test the video player with an example. It's a good starting point to get to know the UMG Video Player.

Adding the Video Player into existing project

There are two ways to add the Video Player into your project. You can add it into one of your existing widget or you can put it in your scene in full screen.

• Insert into another widget

You can integrate the Video Player Widget into any other user-created widget.

Open the Widget Blueprint Editor of the widget you want to insert into and simply drag and drop the Widget Video Player from the Palette window to the Hierarchy window.

• Show the video player in full screen

Drag and drop the BP_Video_Player from the Content Browser to the Viewport.

Setting up the Video Player

First of all, it's better to be used to the way videos are working and are being played in the Unreal Engine 4. So, although it's not required, we strongly advise you to read the following UE4 tutorial: https://docs.unrealengine.com/en-us/Engine/MediaFramework/HowTo/FileMediaSource

The next steps are describing how to use your own video file with our UMG Video Player.

Importing your video file

Drag and drop your video file into the Movies folder in the content browser, this will create a File Media Source asset.

In the Details window of the Video Player, set the "Media Source" parameter to the File Media Source created.

Setting up the media player

Create a new Media Player asset by clicking on the "Add New" button in the Content Browser. In "Create Advanced Asset", select "Media" then "Media Player".

Check "Video output MediaTexture" when prompted, it will create a Media Texture asset linked to this Media Player.

Set the "Media Player" parameter in the **Details** window of the Video Player to the **Media Player** asset created.

Setting up the materials

Create a new Material asset by clicking on the "Add New" button in the Content Browser. In "Create Basic Asset", select "Material".

Double-click on the Material created to open up the Material Blueprint Editor. In the Details window, in the "Material" panel, set the "Material Domain" parameter to "User Interface".

By right-clicking in the Graph window, add a new "TextureSampleParameter2D" node linked to the "Final Color" parameter.

Click on the node created. In the Details window, in the "Material Expression Texture Base" panel, set the "Texture" parameter to the Media Texture previously created and set the "Sampler Type" parameter to "External".

Create a new Material Instance asset by clicking on the "Add New" button in the Content Browser. In "Create Advanced Asset", select "Materials & Textures" then "Material Instance".

Double-click on the Material Instance created to open up the editor. In the Details window, in the "General" panel, set the "Parent" parameter to the Material asset previously created. This will show the "Parameter Groups" panel. In this panel check the "Video" parameter.

Set the "Media Material" parameter in the Details window of the Video Player to the Material Instance asset created.

Setting up the audio

Only if you want to play a separate audio file over the video file:

• Drag and drop your sound file into the content browser, this will create a Sound Wave asset.

• Set the "Sound Wave" parameter in the Details window of the Video Player to the Sound Wave asset created.

Note: If you are using the Video Player inside a widget, you will need to separate the audio from your video file into a wav file in order to play sounds.