Create a football scoreboard for your streams

The MCLS annotation system allows you to create complex and rich experiences on top of the video player, ranging from timeline markers on the seek bar to customisable overlays on top of the video stream. This tutorial provides the most basic example of how to set up a football scoreboard for your video streams, using the MCLS annotation system. Note that most of these steps only have to be taken once (not every time you stream a video).

Heads up! This tutorial assumes you have read the basic annotation guide that we have available here.

1. In the MCLS annotation manager, click "Create annotation set". For this example, we called it "Football".

2. Inside of the set, click "Create annotation type", and call it "Kickoff"

3. Inside of this annotation type, a number of actions must be created. For each of the following entries, click "Add action": Create timer (under Variables & Timers). Call it $main_timer. The format and direction can be left to the default values. The starting value should be 0, the cap value an arbitrarily high number. We use 59940000. * Start timer (under Variables & Timers). Enter the name of the timer to start, which we just defined as $main_timer. * Set variable (under Variables & Timers). Call it $home_score. The other values can be left to the defaults. * Set variable (under Variables & Timers). Call it $away_score. The other values can be left to the defaults. * Show football scoreboard (under Overlays). Call it scoreboard. For the home-team, provide a hex color code (e.g. #FFFFFF), an abbreviation, and the name of the score variable (which we just called $home_score). Do the same for the away-team. For the timer variable name, enter $main_timer. For the offset from top and left, select 5 for each (leave the other offsets empty). For width, enter 25 (leave height empty). Leave the animation type to the default, and enter 300 as animation duration.

4. Save the annotation type ("Save annotation").

5. Create another annotation type, called "Goal (home)"

6. Inside of this annotation type, add a single action (click "Add action"): * Increment variable (under Variables & Timers). Enter the $home_score variable name. Set the variable value to 1.

7. Save the annotation type, and create a second annotation type called "Goal (away)". Repeat the same steps for the away team.

Now, the setup is all done!

Once you are ready to annotate a video stream, follow the next steps:

1. Go to the event list, and select "View event" for the event you would like to add a scoreboard to.

2. Click on "Manage stream".

3. Click on the hamburger-menu in the top-left, and select "Annotation manager".

4. Select the "Football" annotation set that we created earlier.

5. Now wait for your stream until the kickoff in the video happens, and click "Kickoff". The video player that your users see will now show a scoreboard overlay (the video player that you are seeing in this page will not show it).

6. When a goal happens, click on the "Goal" annotation that we created earlier. This will increase the score in the scoreboard overlay that your users see.

It is as simple as that!

For more complex use-cases, please reach out to us to inform about the possibilities.