Simulating Live Keynote Events

We build a lot of websites. With so much of 2020 being virtual, we were asked to build a virtual conference site. The story about how we built that site is a tale for another day, but one of the standout features of the site was a custom “live” keynote player using pre-recorded videos posted to YouTube. The client wanted to play several keynote speeches sequentially, as a live event on the homepage. Because the keynotes also needed to be available on-demand immediately after, they had to be recorded as individual YouTube videos.

We first looked into YouTube’s Premiere service. It’s a cool idea but it’s basically a scheduler for publishing a recorded video at a certain date and time and not a “live stream” and is tricky to embed on another web page. The keynotes had to play on the conference homepage. Then we thought we could use playlists, but the display of extra YouTube artifacts between videos betrayed the illusion of a live event. It became clear that the only way to fake a “live” stream was to build a custom player on top of YouTube’s embedded player.

What does a simulated live stream look like?

In order to simulate a live streamed event, the custom player:

• Had to start at a specific time.
• Jump to the correct point if the video was loaded after the start time.
• Could not be paused by the viewer.

The task was made harder by changes to YouTube’s embedded player. The player only supports auto-play if the audio is initially muted. Another change was that you can no longer turn off the additional viewing suggestions displayed after a video has ended. Also, clicking on the video screen would still pause the video even if the player controls are suppressed.

Building a simulated live stream

We needed to create an interface between the custom player and the keynote data containing the “air” date and time, the YouTube video ID, and speaker information. We created custom web services in Drupal that the custom player used to sync itself to the keynote schedule. When the homepage was loaded or reloaded, the player would load the data for the current or next keynote from the web service.

If the “air” date and time was before the current date and time, a countdown clock would appear. Once the clock counted down to zero, the clock would fade out and the keynote video would begin autoplaying. We placed a transparent layer above the player to prevent the keynote from being paused and add an unmute button to the user interface.

If the current date/time was after the “air” date, the custom player would begin playing at the correct point in the video. To avoid the extra artifacts at the end of the video, the custom player would automatically fade out 3 seconds before the actual end of the video, redisplaying the clock already counting down to the next keynote.