krishcdbry / hearty-media-player

A React media component which is provides video player with custom video controls, Which can play videos by receiving URLs as input. Watch in action ->

Hearty Media Player (hearty-media-player)

A React media component which provides video player with custom video controls, Which can play videos by receving URLs as input.

INDEX

• Getting Started
• Usage
• Props
  • General
  • Functional
  • Control
  • Event
  • Style
• Examples
  • Example 1
  • Example 2
  • Example 3
• Author
• Demo
• License

Getting Started

npm i hearty-media-player 

or

npm install hearty-media-player 

Props

General Props

Name	Required	Type	Description
src	Yes	string	Source url fo the video to be loaded
id	No	string	An Id for the player component.
className	No	string	A custom classname for the player component
poster	No	string	Url to the poster image to be shown before video plays

Functional Props

Name	Required	Type	Description
preload	No	boolean	Determines weather the video loads by default
autoplay	No	boolean	Determines weather the video loads & plays by default
muted	No	boolean	Determines weather the video is muted completely
loop	No	boolean	Determines weather the video should be looped

Control Props

Name	Required	Type	Description
allowFullScreen	No	boolean	Flag to allow fullscreen mode
allowForward	No	boolean	Flag to show/allow forward video
allowBackward	No	boolean	Flag to show/allow backward video
allowFixedTop	No	boolean	Flag to show/allow video popped top of the window
allowSpeedControls	No	boolean	Flag to change playback rate of the video
isBodyFullScreen	No	boolean	Flag to make body fullscreen when user goes for fullscreen option

Event Props

Name	Required	Type	Description
onLoadVideo	No	function	A function that runs when video loads and returns video element * onLoadVideo(video) - video - This is the video element passed back from hearty media player.
onStartVideo	No	function	A function that runs when video starts playing and returns video element * onStartVideo(video) - video - This is the video element passed back from hearty media player.
onEndVideo	No	function	A function that runs when video completed and returns video element * onEndVideo(video) - video - This is the video element passed back from hearty media player.
onPauseVideo	No	function	A function that runs when video paused and returns video element * onPauseVideo(video) - video - This is the video element passed back from hearty media player.
onErrorVideo	No	function	A function that runs when source throws an error and returns callback
onForwardVideo	No	function	A function that runs when video forwaded and returns video element * onForwardVideo(video) - video - This is the video element passed back from hearty media player.
onBackwardVideo	No	function	A function that runs when video backwarded and returns video element * onBackwardVideo(video) - video - This is the video element passed back from hearty media player.
onSpeedChange	No	function	A function that runs when video playback speed changes and returns video element * onSpeedChange(video) - video - This is the video element passed back from hearty media player.
onVolumeChange	No	function	A function that runs when video volume changes and returns video element * onVolumeChange(video) - video - This is the video element passed back from hearty media player.
onVideoFixedTop	No	function	A function that runs when video pops fixed to top of window and returns video element. * onVideoFixedTop(video) - video - This is the video element passed back from hearty media player.
onVideoExitFixedTop	No	function	A function that runs when video exits from fixed top of window and returns video element * onVideoExitFixedTop(video) - video - This is the video element passed back from hearty media player.
onFullScreen	No	function	A function that runs when video enters fullscreen mode and returns video element * onFullScreen(video) - video - This is the video element passed back from hearty media player.
onExitFullScreen	No	function	A function that runs when video exists fullscreen mode and returns video element * onExitFullScreen(video) - video - This is the video element passed back from hearty media player.

Styling props

Name	Required	Type	Description
style	No	Object	Styling player component

Usage

Example 1

import React from 'react';
import {render} from 'react-dom';
import HeartyMediaPlayer from '../../dist/index';

class App extends React.Component {
    constructor(context, props) {
        super(context, props);
    }

    render() {
        return (
            <div className="app">
                <h1>Hearty Media Player</h1>
                <HeartyMediaPlayer 
                    className="media-player"
                    id="5456"
                    src="https://www.w3schools.com/html/movie.ogg"
                    poster="https://images.fandango.com/ImageRenderer/0/0/redesign/static/img/default_poster.png/0/images/masterrepository/other/INTRO_AvengersAgeUltron_FINAL.jpg"/>
              
            </div>
        )
    }
}

render(
    <App/>, document.getElementById('root')
)

Example 2

import React from 'react';
import {render} from 'react-dom';
import HeartyMediaPlayer from '../../dist/index';

class App extends React.Component {
    constructor(context, props) {
        super(context, props);
    }

    render() {
        return (
            <div className="app">
                <h1>Hearty Media Player</h1>
                <HeartyMediaPlayer 
                    autoplay={true}
                    muted={true}
                    src="https://www.w3schools.com/html/movie.ogg"
                    preload={true}
                    loop={true}
                    />
            </div>
        )
    }
}

render(
    <App/>, document.getElementById('root')
)

Example 3

import React from 'react';
import {render} from 'react-dom';
import HeartyMediaPlayer from '../../dist/index';

class App extends React.Component {
    constructor(context, props) {
        super(context, props);
    }

    onLoadVideoCallback (video) {
        // video - video element returned from HeartyMediaPlayer
        console.log("Video Loaded", video);
    }

    onStartVideoCallback (video) {
       // video - video element returned from HeartyMediaPlayer
       console.log("Video Started", video);
    }

    onEndVideoCallback (video) {
      // video - video element returned from HeartyMediaPlayer
       console.log("Video Ended", video);
    }

    onPauseVideoCallback (video) {
       // video - video element returned from HeartyMediaPlayer
       console.log("Video Paused", video);
    }

    onForwardVideoCallback(video) {
       // video - video element returned from HeartyMediaPlayer
       console.log("Video forwaded", video);
    }

    onBackwardVideoCallback(video) {
        // video - video element returned from HeartyMediaPlayer
        console.log("Video backwarded", video);
     }

    onSpeedChangeCallback(video) {
        // video - video element returned from HeartyMediaPlayer
        console.log("Video playback Speed changed", video);
     }

    onVolumeChangeCallback(video) {
        // video - video element returned from HeartyMediaPlayer
        console.log("Video volume changed", video);
    }

    onVideoFixedTopCallback(video) {
        // video - video element returned from HeartyMediaPlayer
        console.log("Video poped fixed to top of window", video);
    }

    onVideoExitFixedTopCallback(video) {
        // video - video element returned from HeartyMediaPlayer
        console.log("Video exit from fixed top of window", video);
    }

    onFullScreenCallback (video) {
        // video - video element returned from HeartyMediaPlayer
        console.log("Video FullScreen", video);
    }

    onExitFullScreenCallback (video) {
       // video - video element returned from HeartyMediaPlayer
       console.log("Video Exitfullscreen", video);
    }

    render() {
        let style = {width: '600px'};
        
        return (
            <div className="app">
                <h1>Hearty Media Player</h1>
                <div style={style}>
                    <HeartyMediaPlayer 
                        src="https://www.quirksmode.org/html5/videos/big_buck_bunny.mp4"
                        id="my-video"
                        className="my-video-class"
                        poster="http://camendesign.com/code/video_for_everybody/poster.jpg"
                        preload={true}
                        autoplay={true}
                        muted={false}
                        loop={true}
                        allowFullScreen={true}
                        allowForward={true}
                        allowBackward={true}
                        allowFixedTop={true}
                        allowSpeedControls={true}
                        onLoadVideo={this.onLoadVideoCallback.bind(this)}
                        onStartVideo={this.onStartVideoCallback.bind(this)}
                        onPauseVideo={this.onPauseVideoCallback.bind(this)}
                        onEndVideo={this.onEndVideoCallback.bind(this)}
                        onForwardVideo={this.onForwardVideoCallback.bind(this)}
                        onBackwardVideo={this.onBackwardVideoCallback.bind(this)}
                        onSpeedChange={this.onSpeedChangeCallback.bind(this)}
                        onVolumeChange={this.onVolumeChangeCallback.bind(this)}
                        onVideoFixedTop={this.onVideoFixedTopCallback.bind(this)}
                        onVideoExitFixedTop={this.onVideoExitFixedTopCallback.bind(this)}
                        onFullScreen={this.onFullScreenCallback.bind(this)}
                        onExitFullScreen={this.onExitFullScreenCallback.bind(this)}
                        style={style}/>
                </div>
            </div>
        )
    }
}

render(
    <App/>, document.getElementById('root')
)

Author

Krishcdbry ([e-mail])

Demo

Click here (https://krishcdbry.github.io/hearty-media-player/demo/)

License

MIT @krishcdbry