Show loading status during time to first frame with the Wowza Player JavaScript API

Learn how to use the Wowza Player JavaScript API to show viewers that an ultra low latency live stream is loading between the time that a viewer presses play and when a video plays.

About time to first frame


Time to first frame is the period of time between when a viewer initiates playback and when a video begins playing. For ultra low latency live streams from Wowza Streaming Cloud, the time to first frame may range from a few seconds to tens of seconds. This range depends on a number of factors, including the quality of the network between the edge server and the viewer. It also depends on whether a playback request is the first request to the CDN edge server or whether it is a subsequent request. The following example code presents a solution for alerting users that the ultra low latency live stream is being processed and will appear in the player soon. 

Example HTML


Note: See the Wowza Player JavaScript API Reference to get started with the Wowza Player API.

This code example shows a Wowza Streaming Cloud ultra low latency stream using Wowza Player for Ultra Low Latency for playback.

We use the onPlay method to attach an event listener that’s called when playback is requested. If the player asset has started requesting the stream, a startBeachBall function executes and the onPlayheadTime method is called every 500 milliseconds. A callback function, onPlayheadTimeCallback, determines if the live stream has started playback. If it has, the  stopBeachBall function executes and the onPlayHeadTime event listener is removed.

In this code example, the startBeachBall function prints a message to the console and provides a Loading live stream message to the viewer. The stopBeachBall function prints a message to the console and removes the Loading live stream message. You can substitute code in these functions to show and then remove a process indicator like a spinning disc beachball element.

<html>
<head>
  <!--Point to hosted font awesome library for loading message spinner-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <!-- Point to latest version of Wowza Player for Ultra Low Latency -->
  <script type="text/javascript" src="//player.wowza.com/player/ull/latest/wowzaplayer.min.js"></script>
</head>
<body>

<div id="playerElement" style="width:400; height:300"></div>

<script type="text/javascript">
  myPlayer = WowzaPlayer.create('playerElement',
      {
        "license":"XXXXX-XXXXX-XXXXX-XXXXX-XXXXX-XXXXX",
        "sourceURL":"wss://edge.cdn.wowza.com/live/_definst_/[stream_name]/stream.ws"
      }
  );

  function startBeachBall()
  {
    console.log("Starting BeachBall");
    document.getElementById("loading").innerHTML = "<br /><i class='fa fa-spinner fa-spin'></i> Loading live stream";
  }

  function stopBeachBall()
  {
    console.log("Stopping BeachBall");
    document.getElementById("loading").innerHTML = "";
  }

  // Called when play requested
  function onPlayCallback(event)
  {
    if (event.eventID === "onAssetPlayerStarted")
    {
        startBeachBall();

        // Listen for playback starting
        myPlayer.onPlayheadTime(onPlayheadTimeCallback);
    }
  }


  function onPlayheadTimeCallback(event)
  {
    if (event.time > 0)
    {
      // Video is streaming
      stopBeachBall();

      // Unregister as listener
      myPlayer.removeOnPlayheadTime(onPlayheadTimeCallback);
    }
  }

  myPlayer.onPlay(onPlayCallback);
</script>

<div id="loading"></div>

</body>
</html>

More resources