Playback of clear content

The following describes a simple setup to add playback of clear streams to your application. It assumes integration into an existing project; see the React Native SDK Integration Guide for details. See the readme in the examples.zip archive in your release files to view this feature in a standalone project.

OTVPlayer

The entry point for basic playback is the OTVPlayer object. In the .js file for your screen, you need to do the following:

Import the OTVPlayer class.
Add an OTVPlayer element to your DOM.
Call the elements play() method on an appropriate event.

Example code

Click here to see a minimal implementation to get basic playback working.

JS

…
import OTVPlayer from '@nagra/react-otvplayer'
…
const App: () => Node = () => {
	…
	this.otvplayer = {
		ref: OTVPlayer
	};

	// This is effectively an autoplay for when the media has loaded
	this._onLoad = (data = {}) => {
		this.otvplayer.ref.play();
	};

	this.events = {
		onLoad: this._onLoad.bind(this)
	};

	return (
		<OTVPlayer
			// You will need to retain a reference to the OTVPlayer element in order to interact with the playback on user events
			ref={otvplayer => this.otvplayer.ref = otvplayer}
			// A source can be specified in the element declaration or programmatically, specifying it in here starts the content loading immediately
			source={{
				src: "https://d3bqrzf9w11pn3.cloudfront.net/basic_hls_bbb_clear/index.m3u8"
			}}
			// There are several playback events that can be hooked in to and trigger actions in the application
			onLoad={this.events.onLoad}
		>
		</OTVPlayer>
	);
	…
}
…

See the API documentation for OTVPlayer for more information.