Skip to main content

Basic Playback Guide

After following our Getting Started on Web guide or the Player Setup section below, you will be ready to programmatically perform common playback actions. These include increasing/decreasing the volume, playing/pausing the stream, enabling full screen, and selecting quality layers.

Player Setup​

To get started with THEOlive playback using the THEOplayer, you must first initialize your player with reference to your THEOlive channel as the source.

Here is an example of initializing a THEOplayer instance for THEOlive:

const player = new THEOplayer.Player(element, configuration);
player.source = {
  sources: {
    type: 'theolive',
    src: 'your-channel-id',
  },
};

Once done, your player variable will reference the returned THEOplayer instance and have access to all of its properties and methods.

Adjust Volume​

To adjust the volume of your stream during playback, you can set the volume property to a floating point number in the range of 0.0 (0%) minimum and 1.0 (100%) maximum.

The following code sets the player's volume to 60%:

// the stream's volume will now be 60%
player.volume = 0.6;

Play/Pause Stream​

To play or pause your stream, you can use the play and pause methods available on your player variable.

To pause your stream:

player.pause();

To play your stream:

player.play();

Enable Full Screen​

To make your stream take up the full screen of the device it is being viewed upon, you must use the requestMode method available on the presentation property of your player variable.

Before doing so, check that the player supports other presentation modes (besides the default 'inline') for the device which the stream is viewed on by using the supportsMode method on the presentation property.

Both the requestMode and supportsMode methods require a PresentationMode parameter that can accept the following arguments:

  • 'inline': The player is shown in its original location on the page. (default presentation mode)
  • 'fullscreen': The player fills the entire screen.
  • 'picture-in-picture': The player is shown on top of the page (see PiPConfiguration for more options).
  • 'native-picture-in-picture': (Experimental) The player requests out-of-app picture-in-picture mode. Not supported on Firefox.

Check if fullscreen is supported with the following code:

// returns a boolean value of true or false
player.presentation.supportsMode('fullscreen');

If the supportsMode method returns true for the presentation mode you passed into it, then you can move on to the steps below.

To make the current stream take up the full screen, pass a presentation mode of 'fullscreen' to the requestMode method with the following code:

// stream will take up the full screen which it is being viewed on
player.presentation.requestMode('fullscreen');

To confirm that the change has occurred, check the currentMode property to ensure it now returns 'fullscreen' as its value:

// should return a value of 'fullscreen' to the console
console.log('this is the current presentation mode being used -->', player.presentation.currentMode);

Select Quality Layer​

To select a specific quality layer during the playing of your stream, you must set the targetQuality property which is accessible on the videoTracks property of your player variable.

The videoTracks property leverages the MediaTrack API.

To see what qualities you have available, use the following code:

// put all available quality layers in an array and log them to the console
const qualities = player.videoTracks[0].qualities;
console.log('this is an array containing all available qualities --> ', qualities);

Once you know what options you have available, you can set the stream to be a specific quality by doing the following:

// set a specific quality layer by using its index in the qualities array
player.videoTracks[0].targetQuality = qualities[indexOfDesiredQualityLayer];

More information​