React Plugin
The nexxPLAY Embed Code System works also in any React Project. You can simply embed any iFrame Plugin to embed a nexxPLAY instance directly.
For more Control, 3Q nexx offers a dedicated React Plugin, that can be added to your Project easily. It supports all Streamtypes and Widgets and all Post-Message controlled Functionality.
You can find the Project here:
npm install nexxplay-react
A very simple Usage could look like this:
import React from 'react';
import {NexxPLAY} from "nexxplay-react";
class test extends React.Component{
render(){
return (
<div style={{width:"640px",height:"320px"}}>
<NexxPLAY domain="999" mediaHash="ABCDEFG" streamtype="video" params="{{autoPlay:0}}" />
</div>
);
}
}
You can use the following Attributes directly in your JSX - only "domain" and "mediaHash" are mandatory, the rest is optional (if you need any other Streamtype than "video", "streamtype" is also mandatory").
Attribute | Type | Description |
|---|---|---|
domain | int | your 3Q nexx Domain ID |
mediaHash | String | the "Hash" of the Media, you want to include |
streamtype | [video, audio, live, radio, playlist, audioalbum, collection, set, rack, widget] | the Streamtype of the given Media Hash. If omitted, defaults to "video". |
deliveryPartner | String | if the Media Reporting should be connected to a Delivery Partner, add its Code here. |
protocol | String | if you want to force "http" Usage, set this to "http". It defaults to "https". |
params | Object with the following possible Keys [autoPlay, language, direction, dataMode, exitMode, streamingFilter, consentString, delay, disableAds, affiliateCode, campaignCode] | if you need additional Parameters, that would be appended via GET Parameters, set them here. |
embedHost | String | if you use a custom Embed Domain, enter the Domain (without protocol and Slashes) here. It defaults to "embed.nexx.cloud". |
onPlayerEvent | function | to receive PlayerEvents in your app (see below) |
onPlayerData | function | to receive Player Metadata in your app (see below) |
If you want to interact with the Player, there are two possible Scenarios.
If your App needs the Events, the Player emit, add a "onPlayerEvent" Function to the XJS. In this Case, every Event will be sent to this Function for Processing in your App.
Furthermore, there are various Calls, that will send you Information about the Player/Playbackstate. For this Purpose, add "onPlayerData" to the XJS.
import React from 'react';
import NexxPLAY from "nexxplay-react";
class test extends React.Component{
onPlayerEvent(event){
console.log(event);
}
onPlayerData(data){
console.log(data);
}
render(){
return (
<div style={{width:"640px",height:"320px"}}>
<NexxPLAY domain="999" media="ABCDEFG" streamtype="video"
onPlayerEvent={this.onPlayerEvent}
onPlayerData={this.onPlayerData}
/>
</div>
);
}
}
You can control each Player Instance after it has been created with the general SDK Functions from within React by creating a Reference to the Instance and use its Methods afterwards.
import React from 'react';
import NexxPLAY from "nexxplay-react";
class test extends React.Component{
constructor(props) {
super(props);
this.player = null;
}
pausePlayer(){
if(this.player!==null){
this.player.pause();
}
}
seekToPosition(position){
if(this.player!==null){
this.player.seekTo(position);
}
}
render(){
return (
<div style={{width:"640px",height:"320px"}}>
<NexxPLAY domain="999" media="ABCDEFG" streamtype="video"
onRef={(ref) => (this.player = ref)}
/>
</div>
);
}
}
You can use the all Functions, that are given in the SDK OVerview here:
If you decide to listen for the Player Events, you will receive all Events, that are given here:
The React Plugin for nexxPLAY also supports Widgets.
Last modified 4d ago