Socket
Socket
Sign inDemoInstall

hearty-media-player

Package Overview
Dependencies
1
Maintainers
1
Versions
21
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

hearty-media-player

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


Version published
Maintainers
1
Weekly downloads
1

Weekly downloads

Readme

Source

Hearty Media Player (hearty-media-player) NPM version

Downloads

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

Hearty Media Player

INDEX

Getting Started

npm i hearty-media-player 

or

npm install hearty-media-player 

Props

General Props

NameRequiredTypeDescription
srcYesstringSource url fo the video to be loaded
idNostringAn Id for the player component.
classNameNostringA custom classname for the player component
posterNostringUrl to the poster image to be shown before video plays

Functional Props

NameRequiredTypeDescription
preloadNobooleanDetermines weather the video loads by default
autoplayNobooleanDetermines weather the video loads & plays by default
mutedNobooleanDetermines weather the video is muted completely
loopNobooleanDetermines weather the video should be looped

Control Props

NameRequiredTypeDescription
allowFullScreenNobooleanFlag to allow fullscreen mode
allowForwardNobooleanFlag to show/allow forward video
allowBackwardNobooleanFlag to show/allow backward video
allowFixedTopNobooleanFlag to show/allow video popped top of the window
allowSpeedControlsNobooleanFlag to change playback rate of the video
isBodyFullScreenNobooleanFlag to make body fullscreen when user goes for fullscreen option

Event Props

NameRequiredTypeDescription
onLoadVideoNofunctionA function that runs when video loads and returns video element * onLoadVideo(video) - video - This is the video element passed back from hearty media player.
onStartVideoNofunctionA 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.
onEndVideoNofunctionA function that runs when video completed and returns video element * onEndVideo(video) - video - This is the video element passed back from hearty media player.
onPauseVideoNofunctionA function that runs when video paused and returns video element * onPauseVideo(video) - video - This is the video element passed back from hearty media player.
onErrorVideoNofunctionA function that runs when source throws an error and returns callback
onForwardVideoNofunctionA function that runs when video forwaded and returns video element * onForwardVideo(video) - video - This is the video element passed back from hearty media player.
onBackwardVideoNofunctionA function that runs when video backwarded and returns video element * onBackwardVideo(video) - video - This is the video element passed back from hearty media player.
onSpeedChangeNofunctionA 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.
onVolumeChangeNofunctionA 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.
onVideoFixedTopNofunctionA 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.
onVideoExitFixedTopNofunctionA 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.
onFullScreenNofunctionA 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.
onExitFullScreenNofunctionA 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

NameRequiredTypeDescription
styleNoObjectStyling 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 (krishcdbry@gmail.com)

Demo

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

License

MIT @krishcdbry

FAQs

Last updated on 12 Apr 2019

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc