npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-video-player-extended

v9.1.0

Published

React HTML5 video providing functionality for marking and selecting frames, jumping back and forth between frames based on the fps.

Downloads

438

Readme

Introduction

React-video-player-extended supports both development and general user requirements. In addition to the basic video player functionality, react-video-player-extended provides the functionality for marking and selecting frames, jumping back and forth between frames based on the fps.

Install

npm install react-video-player-extended --save
# or
npm i react-video-player-extended
# or
yarn add react-video-player-extended

Example

import React, { Component } from 'react';
import VideoPlayer from 'react-video-player-extended';

class App extends Component {
  state = {
    isPlaying: false,
    volume: 0.7
  };

  handlePlay = () => {
    this.setState({isPlaying: true});
  };

  handlePause = () => {
    this.setState({isPlaying: false});
  };

  handleVolume = value => {
    this.setState({volume: value});
  };

  render () {
    const {isPlaying, volume} = this.state;

    return <VideoPlayer
      url="https://media.w3.org/2010/05/bunny/trailer.mp4"
      isPlaying={isPlaying}
      volume={volume}
      onPlay={this.handlePlay}
      onPause={this.handlePause}
      onVolume={this.handleVolume}
     />
  }
}

Demo

https://amittkSharma.github.io/react-video-player-extended/example/index.html

Features

  • Package supports basic video player functionality like play/pause, volume control and full screen
  • Markers creation, display and selection
  • Jumping back and forth between frames based on FPS (default fps value is 30)
  • Display various settings associated with the video player such as title, fps, volume, repeat, start time
  • Export markers as JSON file.
  • Importing markers from JSON file.

alt text

Props

Prop | Description | Default ---- | ----------- | ------- controls | Set visible controls. Available controls: ControlSelection | [ControlSelection.Play, ControlSelection.Time, ControlSelection.Progress, ControlSelection.Volume, ControlSelection.FullScreen, ControlSelection.AddMarker, ControlSelection.ExportMarkers] height | Set the height of the player | '360px' width | Set the width of the player | '640px' isPlaying | Set to true or false to play or pause the media | false volume | Set the volume of the player, between 0 and 1 | 0.7 loop | Set to true or false to loop the media | false markers | Set array of markers. Example: [{id: 1, time: 5, color: '#ffc837', title: 'Marker 1'}] | [] timeStart | Set the second number to start playing video | 0 url | The url of a video | fps | Frame per second | 30 selectedMarker | Selected marker | undefined viewSettings | Array of SettingSelection displaying various video player settings e.g. Title, FPS, Volume, Repeat, Start Time, Markers Count | undefined

Callback Events

Prop | Description | Version ---- | ----------- | -------- onPlay | Called when video is started onPause | Called when media is paused onVolume | Called when volume is changed. Callback contains volume onProgress | Callback contains event, progressProps, ProgressProps is an object containing currentTime, duration and percentage, onDuration | Callback contains duration of the media, in seconds onMarkerClick | Called when marked is clicked. Callback contains marker object. Example: {id: 1, time: 5, color: '#ffc837', title: 'Marker 1'} onContinuousMarkerReceived | Callback sending markers continuously, but it will not mark the video timeline. Callback contains marker object. Example: {id: 1, time: 5, color: '#ffc837', title: 'Marker 1'} onMarkerAdded | Callback when a new marker is being added, this API will return a new marker object with current time. | 8.0.0 onLoadedMetadata| Callback is triggered when the video player is loaded with new video, with all the meta-information onVideoPlayingComplete| Callback triggered when the video is completely played contains progressProps object. Example: {"currentTime":52.209,"duration":52.209,"percentage":100}. Note: This event will not be triggered in case video is being played in loop. | 8.3.0

Donation

Let's sit together and contribute towards further enhancements Buy me a coffee :coffee: