DuoVideo
DuoVideo is a react component for playing two videos synced. Finally rendered in webgl with an option to have an audiofile playing in sync aswell. There is also an option to pass in your own fragment shader to control the final graphics.
Installation
Use npm or yarn to install DuoVideo.
yarn add duo-video
Usage
;
Loop to keep things in sync
ref is returned from DuoVideo component. Look below for details about playerState and playerDispatch
const intervalRef = ; ;
DuoVideoBuffer
audioBuffer?: number video0Buffer: number video1Buffer: number
VideoObj
src: string //hls src || if (mp4 = true) mp4 src fallback: string //mp4 src mp4?: boolean //force use mp4
DuoVideo Props
videoPaths: Array<VideoObj> // Length = 2 audioPath?: string frontRef: Object currentIndex: number void void fragmentShader?: string videoResolution: Array<number> showDebug?: boolean
Player State
The component requires a reducer to be passed to public functions which are explained below.
const playerReducer = { }; const playerInitState = isLoading: false isPlaying: false canBeSafelyPlayed: false isMuted: false; const playerState playerDispatch = ;
Component
<DuoVideo videoPaths=videoPaths //required audioPath=audioPath //optional - has to have the same duration as the videos ref=ref //required frontRef=graphicsLayerRef //required currentIndex=videoIndex //required onMediaCanBeSafelyPlayed=onMediaCanBeSafelyPlayed //required onMediaReady=setMediaIsReady //required - called after media loaded videoResolution=1280 720 //required showDebug //optional/>
Public Fns
There are some public functions available that's needed to interact with the component.
void //triggers ios safe mobile init - has to be called first from a user action DuoVideoBuffer void void number void number void