This article relates to the game "Team Fortress 2". Click here for more information.

Adding an Introductory Video

From Valve Developer Community
Jump to navigation Jump to search
English (en)Translate (Translate)

Overview

In this tutorial you will learn how to convert a video into the required .webm format and to be played in game.

Record your video

To record your video you will need a video recording tool such as OBS Studio or the built in demo Recorder (Most recommended as it makes the best quality and almost no slowdown).

Recording the file

OBS

Configuration for OBS
  1. Open OBS settings.
  2. Select "Output".
  3. Set "Output Mode" to "Advanced".
  4. Click "Recording".
  5. Set "Container Format" to "webm".
  6. Record a file.


Converting the file

FFmpeg

Windows-11-Icon.png

This user contributes through Windows.

Note.pngNote: On windows 10 you need to install winget from microsoft store first
  1. To install ffmpeg on windows, open Powershell and run command: winget install ffmpeg
  2. next, no convert desired video file to webm using ffmpeg run command: ffmpeg -i video_file.mp4 -pix_fmt yuva420p -codec vp9 -vf "scale=512:384" video_file.webm


Adding tuned audio

If you want to add the TV tuned music from the Valve video files You can find three TV tuned sound files in Steam\steamapps\username\team fortress 2\tf\sound\ui.


Embedding the .webm

Once you have converted the file, place the .webm video into Steam\steamapps\username\team fortress 2\tf\media. Make sure you name your video file the same name as your map, so the engine knows what map the video belongs to. For example if it was for cp_dustbowl the video would be named cp_dustbowl.webm

Warning.pngWarning: When distributing your map, the video will not work if embedded in the bsp, it must be included separately from the map


Subtitles

To add subtitles, create .res file inside Steam\steamapps\username\team fortress 2\tf\media, with the same name as desired map.

Example .res file content:


"media/cp_dustbowl.res"
{
        "1"
        {
                "string"        "This message will be shown after 1 second for 3 seconds"
                "start"         "1.0"
                "length"        "3.0"
        }
        "2"
        {
                "string"        "As you can see the numbers above the left curly brackets are arranged in ascending order"
                "start"         "4.0"
                "length"        "3.0"
        }
}


Testing

Now when you launch the map, it will have a Watch Movie option for you to watch your video.

IntroductoryVideoShowcaseWebm.png

See Also