react html5,GitHub - eisneim/react-html5-video: html5 video component for react.js app

[WIP] don't use in production

##features:

simple & easy

custom video overlay content( any html content on top of video )

##TODO

UI for Fullscreen mode

subtitle tracks

network error notification

loading spinner

custom menu for mouse right click

register any event listener on parent component

playback rate change

select defferient resulution

use without browserify

complete tests

##install

npm install --save react-h5-video

load in the stylesheet,(in order to make it easier for developers to customize video player's style, css is not written in js)

basic usage

import React from "react";

import Video from "react-h5-video";

class MyAewsomeApp extends React.Component{

render(){

var sources = [ "./video/video.mp4","./video/video.webm","./video/video.ogv" ]

return(

LOGO

Any HTML content

)

}

}

##props

Video.propTypes = {

metaDataLoaded: React.PropTypes.func,// video's meta data loaded callback

// properties

sources:React.PropTypes.array,

subtitles:React.PropTypes.array, // [{src:"foo.vtt", label:"English",lang:"en" }]

autoPlay: React.PropTypes.bool,

controls:React.PropTypes.bool,

autoHideControls:React.PropTypes.bool,

controlPanelStyle:React.PropTypes.oneOf(["overlay","fixed"]),

preload:React.PropTypes.oneOf(["auto","none","metadata"]),

loop:React.PropTypes.bool,

mute:React.PropTypes.bool,

poster:React.PropTypes.string,

width:React.PropTypes.string,

height:React.PropTypes.string,

volume:React.PropTypes.number,

seekDisabled: React.PropTypes.bool,

}

// here are all some default props

Video.defaultProps = {

autoPlay:false,

loop:false,

controls:true,

autoHideControls:true,

volume:1.0,

mute:false,

controlPanelStyle:"overlay",

preload:"auto",

seekDisabled: false,

}

###video meta data loaded callback

onece the meta data is loaded, you can get the info of this video(width,height,duration...etc), then you can use the returnd api to perform basic actions

The returned api has these properties:

Property

Type

Description$video

DOM Node

the HTML5 video DOM node, you can attatch event listeners to $video

fullscreen

function

make video enter fullscreen mode

setTime

function

setTime(number) to change seekbar time

togglePlay

function

play or pause video

volume

function

change volumn between 0 to 1.0

align="left">registerProgressEventListener

align="left">function

align="left">You can call this function get updates on how much the video has played.

class App extends React.Component{

loaded(api){

this.videoApi = api;

// console.log( api.$video.duration )

// to toggle play state, just call this.videoApi.togglePlay()

}

render(){

return(

)

}

}

registerProgressEventListener

class App extends React.Component{

loaded(api){

api.registerProgressEventListener((percent) => {

console.log("Video has now played ", percent, " percent")

})

}

render(){

return(

)

}

}