Security News
New Proposed CISA Mandate Would Require Critical Infrastructure to Report Ransom Payments Within 24 Hours
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
hearty-media-player
Advanced tools
A React media component which is provides video player with custom video controls, Which can play videos by receviing URLs as input.
Weekly downloads
Readme
A React media component which provides video player with custom video controls, Which can play videos by receving URLs as input.
npm i hearty-media-player
or
npm install hearty-media-player
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 |
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 |
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 |
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. |
Name | Required | Type | Description |
---|---|---|---|
style | No | Object | Styling player component |
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')
)
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')
)
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')
)
Krishcdbry (krishcdbry@gmail.com)
Click here (https://krishcdbry.github.io/hearty-media-player/demo/)
MIT @krishcdbry
FAQs
A React media component which is provides video player with custom video controls, Which can play videos by receviing URLs as input.
The npm package hearty-media-player receives a total of 1 weekly downloads. As such, hearty-media-player popularity was classified as not popular.
We found that hearty-media-player demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
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.
Security News
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
Security News
Redis is no longer OSS, breaking its explicit commitment to remain under the BSD 3-Clause License forever. This has angered contributors who are now working to fork the software.
Product
Socket AI now enables 'AI detected potential malware' alerts by default, ensuring users benefit from AI-powered state-of-the-art malware detection without needing to opt-in.