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.
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"
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>
);
…
}
…
