Ziggeo's React component

Usage with ES6:

• Recorder:

import React from 'react'
import {ZiggeoRecorder} from 'react-ziggeo'

...
    <ZiggeoRecorder apiKey={'your api key provided by ziggeo'}
    />
...

• Player:

import React from 'react'
import {ZiggeoPlayer} from 'react-ziggeo'

...
    <ZiggeoPlayer
      apiKey={'your api key provided by ziggeo'}
      ziggeo-video={'Video Token'}
      ziggeo-theme={'modern'}
      ziggeo-themecolor={'red'}
      ziggeo-skipinitial={false}
    />
...

• Embed Player:

import React from 'react'
import {ZiggeoEmbedPlayer} from 'react-ziggeo'
...
 
playing = () => {
    console.log('it\'s playing, your action here');
};

paused = () => {
    console.log('it\'s paused, your action when pause');
};

...

<ZiggeoEmbedPlayer
    apiKey={API_KEY}
    video={VIDEO_TOKEN}
    height={180}
    width={320}
    onPlayerPlaying={this.playing}
    onPlayerPaused={this.paused}
    ...
/>

Available events for player:

   
   - onPlayerPlaying
   - onPlayerPaused
   - onPlayerAttached
   - onPlayerLoaded
   - onPlayerEnded
   - onPlayerError
   - onPlayerSeek 

• Embed Recorder:

import React from 'react'
import {ZiggeoEmbedPlayer} from 'react-ziggeo'
...

recorderRecording = () => {
    console.log('Recorder onRecorderRecording');
};

recorderUploaded = () => {
    console.log('Recorder onRecorderUploaded');
};
...
<ZiggeoEmbedRecorder
    apiKey={API_KEY}
    video={VIDEO_TOKEN}
    height={180}
    width={320}
    onRecorderRecording={this.recorderRecording}
    onRecorderUploading={this.recorderUploading}
    ...
/>

Available events for recorder:

   
   - onPlayerPlaying
   - onPlayerPaused
   - onPlayerAttached
   - onPlayerLoaded
   - onPlayerEnded
   - onPlayerSeek 
   - onRecorderError
   - onRecorderManuallySubmitted
   - onRecorderUploaded
   - onRecorderUploadSelected
   - onRecorderRecording
   - onRecorderUploading
   - onRecorderRerecord,
   - onRecorderCountdown,
   - onRecorderRecordingProgress,
   - onRecorderUploadProgress,
   - onRecorderAccessForbidden,
   - onRecorderAccessGranted,
   - onRecorderCameraUnresponsive,
   - onRecorderVerified,
   - onRecorderNoCamera,
   - onRecorderNoMicrophone

Additional Parameters

You can add all available all Ziggeo related options from below link:

• Ziggeo Available Parameters
• Ziggeo Available Embedding Events

Working Demo:

• react-live-demo
• react-ziggeo demo for local install