https://github.com/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 ->
https://github.com/krishcdbry/hearty-media-player
es6 hearty-media-player javascript media player react video-player
Last synced: 5 months ago
JSON representation
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 ->
- Host: GitHub
- URL: https://github.com/krishcdbry/hearty-media-player
- Owner: krishcdbry
- License: mit
- Created: 2018-02-20T00:02:41.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2019-04-23T09:07:49.000Z (about 7 years ago)
- Last Synced: 2025-10-24T04:09:36.928Z (8 months ago)
- Topics: es6, hearty-media-player, javascript, media, player, react, video-player
- Language: JavaScript
- Homepage: https://heartynote.com/tv
- Size: 1.96 MB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Hearty Media Player (hearty-media-player) [](https://www.npmjs.com/package/hearty-media-player)
[](https://npmjs.org/package/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](#getting-started)
* [Usage](#usage)
* Props
* [General](#general)
* [Functional](#functional-props)
* [Control](#control-props)
* [Event](#event-props)
* [Style](#styling-props)
* Examples
* [Example 1](#example-1)
* [Example 2](#example-2)
* [Example 3](#example-3)
* [Author](#Author)
* [Demo](#demo)
* [License](#license)
## Getting Started
```javascript
npm i hearty-media-player
```
or
```javascript
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
```javascript
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 (
Hearty Media Player
)
}
}
render(
, document.getElementById('root')
)
```
## Example 2
```javascript
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 (
Hearty Media Player
)
}
}
render(
, document.getElementById('root')
)
```
## Example 3
```javascript
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 (
Hearty Media Player
)
}
}
render(
, document.getElementById('root')
)
```
## Author
Krishcdbry (krishcdbry@gmail.com)
## Demo
Click here (https://krishcdbry.github.io/hearty-media-player/demo/)
## License
MIT @[krishcdbry](krishcdbry.com)