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/[email protected]/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

| Property | Description | Default | | :-- | :-- | :-- | | autoplay | set Set if the video should start playing as soon as it is loaded | false | | controls | set Set if the video should display controls (like play/pause etc.) | true | | crossOrigin | set the CORS settings of the video | "anonymous" | | currentTime | set the current playback position in the video (in seconds) | 0 | | defaultMuted | set Set if the video should be muted by default | false | | defaultPlaybackRate | set the default speed of the video playback | 1 | | download | set the download option | false | | height | set the video height | null | | loop | set Set if the video should start over again when finished | false | | mediaGroup | set the group the video belongs to (used to link multiple video elements) | "videoact" | | muted | set Set if the video is muted or not | false | | playbackRate | set the speed of the video playback | 1 | | preload | set Set if the video should be loaded when the page loads | false | | ratio | set the video aspect ratio | 3.166 (19/6) | | src | set the current source of the video element | "" | | volume | set the volume of the video | 1 | | width | set the video width | "100%" |

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

| Property | Description | | :-- | :-- | | audioTracks | get an AudioTrackList object representing available audio tracks | | autoplay | get whether the video should start playing as soon as it is loaded | | buffered | get a TimeRanges object representing the buffered parts of the video | | controller | get the MediaController object representing the current media controller of the video | | controls | get whether the video should display controls (like play/pause etc.) | | crossOrigin | get the CORS settings of the video | "anonymous" | | currentSrc | get the URL of the current video | | currentTime | get the current playback position in the video (in seconds) | | defaultMuted | get whether the video should be muted by default | | defaultPlaybackRate | get the default speed of the video playback | | duration | get the length of the current video (in seconds) | | ended | get whether the playback of the video has ended or not | | error | get a MediaError object representing the error state of the video | | loop | get whether the video should start over again when finished | | mediaGroup | get the group the video belongs to (used to link multiple video elements) | | muted | get whether the video is muted or not | | networkState | get the current network state of the video | | paused | get whether the video is paused or not | | playbackRate | get the speed of the video playback | | played | get a TimeRanges object representing the played parts of the video | | preload | get whether the video should be loaded when the page loads | | readyState | get the current ready state of the video | | seekable | get a TimeRanges object representing the seekable parts of the video | | seeking | get whether the user is currently seeking in the video | | src | get the current source of the video element | | startDate | get a Date object representing the current time offset | | textTracks | get a TextTrackList object representing the available text tracks | | videoTracks | get a VideoTrackList object representing the available video tracks | | volume | get the volume of the video |

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

| Event | Description | | :-- | :-- | | onAbort | When the loading of an video is aborted | | onCanPlay | When the browser can start playing the video | | onCanPlayThrough | When the browser can play through the video without stopping for buffering | | onDurationChange | When the download button clicked | | onDurationChange | When the duration of the video is changed | | onEmptied | When the current playlist is empty | | onEnded | When the current playlist is ended | | onError | When an error occurred during the loading of an video | | onLoadedData | When the browser has loaded the current frame of the video | | onLoadedMetadata | When the browser has loaded meta data for the video | | onLoadStart | When the browser starts looking for the video | | onPause | When the video has been paused | | onPlay | When the video has been started or is no longer paused | | onPlaying | When the video is playing after having been paused or stopped for buffering | | onProgress | When the browser is downloading the video | | onRateChange | When the playing speed of the video is changed | | onSeeked | When the user is finished moving/skipping to a new position in the video | | onSeeking | When the user starts moving/skipping to a new position in the video | | onStalled | When the browser is trying to get media data, but data is not available | | onSuspend | When the browser is intentionally not getting media data | | onTimeUpdate | When the current playback position has changed | | onVolumeChange | When the volume has been changed | | onWaiting | When the video stops because it needs to buffer the next frame |

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

| Method | Description | | :-- | :-- | | addTextTrack | Adds a new text track to the video | | canPlayType | Checks if the browser can play the specified video type | | load | Re-loads the video element | | play | Starts playing the video | | pause | Pauses the currently playing video | | fullscreen* | Request full screen if supported | | exitFullscreen* | Request exit from full screen |

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

Methods

• add volume control
• add seeker