Comment on page
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 {NexxPLAY} from "nexxplay-react";
export default function TestPlayer{
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, use the "useRef" Hook from React to control the Player Instance. For Notification/Reporting on the various Player Events, you can use the "setEventListener" Method of the Player.
import {useRef,useEffect} from 'react';
import {NexxPLAY} from "nexxplay-react";
export default function TestPlayer{
const player=useRef(null);
useEffect(() => {
if(player.current){
player.current.setEventListener(onEvent);
}
}, []);
function onEvent(event){
console.log(event);
}
return (
<div style={{width:"640px",height:"320px"}}>
<NexxPLAY domain="999" media="ABCDEFG" streamtype="video"
ref={player} />
</div>
);
}
You can control each Player Instance after it has been created with the general SDK Functions from within React by using the "useRef" Hook and use its Methods afterwards.
import {useRef} from 'react';
import {NexxPLAY} from "nexxplay-react";
export default function TestPlayer{
const player=useRef(null);
function pausePlayer(){
if(player.current){
player.current.pause();
}
}
function seekToPosition(position){
if(player.current){
player.current.seekTo(position);
}
}
return (
<div style={{width:"640px",height:"320px"}}>
<NexxPLAY domain="999" media="ABCDEFG" streamtype="video"
ref={player} />
</div>
);
}
You can use (nearly) 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 4mo ago