nexxPLAY
  • Introduction
  • Javascript SDK
    • Basic Integration
    • Advanced Integration
    • Player Configuration
    • Player Management
    • Playback Control
  • iFrame Integration
    • Embed Codes
    • PostMessage Control
  • native Players
    • nexxPLAY for iOS
    • nexxPLAY for Android
    • nexxPLAY for Flutter
  • Platform Plugins
    • Google AMP
    • Wordpress Plugin
    • React Plugin
  • Integration Enhancements
    • Player UI
    • Audio Player
    • Player DataMode
    • Player Events
    • SDK Override Options
    • VAST Macros
    • GET Parameters
  • Widgets
    • Javascript SDK
    • iFrame Integration
    • Widgets for native Apps
      • iOS Widget
      • Android Widget
      • Android TV Channel
      • Windows 10 LiveTile
    • Widget React Plugin
    • Widget Override Options
  • more Integrations
    • WebViews
    • oEmbed Discovery
    • WebComponent
    • Preview Links
    • Cover Service
    • Reporting for external Players
  • Addons
  • Security and Accessibility
    • Data Protection and Security
    • GDPR and TCF 2.0
    • Accessibility and WCAG
  • Compatibility
  • Changelog
Powered by GitBook
On this page
  • Basic Integration
  • Supported Attributes
  • Interacting with the Player
  • Available Functions
  • Available Events
  1. Platform Plugins

React Plugin

PreviousWordpress PluginNextIntegration Enhancements

Last updated 1 year ago

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:

Basic Integration

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>
	);

}

Supported Attributes

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)

Interacting with the Player

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>
	);

}

Available Functions

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:

Available Events

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.

Playback Control
Player Events
Widget React Plugin
Logo3qnexx/nexxPLAY-ReactGitHub