# Basic Playback Guide

After following our [Getting Started on Web guide](https://docs-preview.optiview.dolby.com/pr-860/theolive/v1/playback/web/getting-started.md) or the [Player Setup](#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:

```javascript
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](https://docs-preview.optiview.dolby.com/pr-860/theoplayer/v9/api-reference/web/classes/Player).

## Adjust Volume

To adjust the volume of your stream during playback, you can set the [`volume`](https://docs-preview.optiview.dolby.com/pr-860/theoplayer/v9/api-reference/web/classes/Player#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%:

```javascript
// 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](https://docs-preview.optiview.dolby.com/pr-860/theoplayer/v9/api-reference/web/classes/Player#play) and [pause](https://docs-preview.optiview.dolby.com/pr-860/theoplayer/v9/api-reference/web/classes/Player#pause) methods available on your player variable.

To pause your stream:

```javascript
player.pause();
```

To play your stream:

```javascript
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`](https://docs-preview.optiview.dolby.com/pr-860/theoplayer/v9/api-reference/web/interfaces/Presentation#requestMode) method available on the [`presentation`](https://docs-preview.optiview.dolby.com/pr-860/theoplayer/v9/api-reference/web/classes/Player#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`](https://docs-preview.optiview.dolby.com/pr-860/theoplayer/v9/api-reference/web/interfaces/Presentation#supportsMode) method on the presentation property.

Both the `requestMode` and `supportsMode` methods require a [`PresentationMode`](https://docs-preview.optiview.dolby.com/pr-860/theoplayer/v9/api-reference/web/types/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:

```javascript
// 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:

```javascript
// 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`](https://docs-preview.optiview.dolby.com/pr-860/theoplayer/v9/api-reference/web/interfaces/Presentation#currentMode) property to ensure it now returns `'fullscreen'` as its value:

```javascript
// 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`](https://docs-preview.optiview.dolby.com/pr-860/theoplayer/v9/api-reference/web/interfaces/MediaTrack#targetQuality) property which is accessible on the [`videoTracks`](https://docs-preview.optiview.dolby.com/pr-860/theoplayer/v9/api-reference/web/classes/Player#videoTracks) property of your player variable.

The `videoTracks` property leverages the [MediaTrack API](https://docs-preview.optiview.dolby.com/pr-860/theoplayer/v9/api-reference/web/interfaces/MediaTrack).

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

```javascript
// 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:

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

## More information

* [API references](https://docs-preview.optiview.dolby.com/pr-860/theoplayer/v9/api-reference/web/classes/Player)