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

To play clear content using OTVPlayer, in your React Native application's component you need to:

Import the OTVPlayer class.
Specify an appropriate source property for the OTVPlayer Component.
Add an OTVPlayer Component to your render tree.
Call the OTVPlayer's play() method on an appropriate event (if the autoplay property is set to false).

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"
				type: "application/x-mpegURL",
		    }}
			// There are several playback events that can be hooked in to and trigger actions in the application
			onLoad={this.events.onLoad}
		>
		</OTVPlayer>
	);
	…
}
…

For more information, see the OTVPlayer API documentation.