videoact v0.1.0

videoact is a highly configrable html5 video component built from the ground up using React library.

Usage

ES6

npm install videoact --save
# or
yarn add videoact

import React, { Component } from 'react';
import Videoact from 'videoact';

class App extends Component {
  render () {
    return <Videoact src='https://media.w3.org/2010/05/sintel/trailer_hd.mp4' />
  }
}

Es5

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js" type="text/javascript"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" type="text/javascript"></script>
<script crossorigin src="https://unpkg.com/videoact@0.0.2/lib/index.js" type="text/javascript"></script>
<script type="text/javascript">
  var props = {
    src: 'https://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_30mb.mp4',
    autoplay: true,
    controls: true,
  };
  ReactDOM.render(
    React.createElement(videoact.default, props, null),
    document.getElementById('app')
  );
</script> 

Properties

Example

<Videoact
  autoplay={true}
  controls={true}
  src={'https://www.videos.com/video.mp4'}
/>

List

Note: If width and height was specified, the ratio be ignored also if you want to keep the original video aspect ratio set ratio it to null

Property list (get)

Example

<Videoact {...props} ref={e => {this.video = e}} />
<button onClick={()=> { alert(this.video.duration) }}>video duration</button>

List

Events

The HTML5 DOM has events for the video elements, so all what I did here is mapping the native events to videoact component.

Example

<Videoact
  {...props}
  onEnded={() => { alert('finished') }}
  onPause={() => { alert('paused') }}
/>

List

Methods

These are all the HTML5 video methods that allow you to manipulate the videoact component.

Example

<Videoact {...props} ref={e => {this.video = e}} />
<button onClick={()=> { this.video.play() }} >play</button>

Method list

Note: Fullscreen need to be called from within an event handler or otherwise they will be denied.

Methods

• add volume control
• add seeker