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.
JavaScript
…
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.
