Security News
Namecheap Takes Down Polyfill.io Service Following Supply Chain Attack
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
hearty-media-player
Advanced tools
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 0 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
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.
Security News
A JavaScript library maintainer is under fire after merging a controversial PR to support legacy versions of Node.js.