I started out with the building and five signs displaying static images. I copied the signs and arranged them into a 1920x1080 canvas to create a reference texture.
The stock videos were imported into Adobe Premiere and masked over the static billboard images in the layout texture. A final looping composite video was created (MP4, 1920x1080) as well as an image to be used for UV mapping.
Then I used Maya to apply a single material to all the signs' display screen geometry. UVs were adjusted to optimally display each portion of the video. The signs were exported as FBX and reimported into UE5 with a temp material displaying the static image of the video.
The final task was importing and playing the composite video.
I copied the composite video into the UE5 project's Content/Movies directory.
Then, using UE5's Content Browser I imported the MP4 file into the same directory (Content/Movies) to create a File Media Source, Media Player, and a Media Texture.
- The File Media Source contains the File Path to the MP4.
- The Media Player controls the video playback, including Play on Open, Shuffle, Loop etc.
- And the Media Texture renders the video to a texture, which can then be referenced in a material in the world.
I changed the material the signs were using to render the Media Texture linked to the billboard video.
The final step was using Blueprints scripting to make the Media Player actually play the movie at runtime. There are a variety of ways to achieve this. I did it with a custom event (PlayMedia) and an event tick that checks that the media “Is Ready”, then plays it.
The result is one Media Player being rendered on multiple screens, as if they are each their own video.
*This is a general runthrough of the methods used to achieve this goal. It is not a complete tutorial. There are plenty of existing resources that cover the various techniques used (like the Media Player). If you would like me to expand this article, or if you have specific questions, feel free to contact me!
