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 🙏

© 2022 – Pkg Stats / Ryan Hefner

react-video-players

v0.1.11

Published

React video player component library that offers a consistent API across YouTube and Vimeo video player React components.

Downloads

235

Readme

react-video-players

A library of React video player components that share a similar interface and makes it easy to work with various video platforms (Vimeo, YouTube, etc.) and players, consistently in your site or application.

Install

Via npm:

npm install --save react-video-players

Via Yarn:

yarn add react-video-players

Video Players

The goal of this library is to offer a variety of different player "types", while maintaining a similar/common interface across each component. Currently, there are three video player components available: VimeoPlayer, YouTubePlayer and VideoPlayer (standard <video> tag implemenation).

In addition to the three components, this library also include the High Order Component that the three players use, in the event you’d like to use that to build your own video player component.

Common Properties

  • aspectRatio:String - Used to calculate aspect ratio for the container so that video is displayed responsively.
  • config:Object - Optional config settings. See VimeoPlayer Props or YouTubePlayer Props
  • controls:Element - A React component that contains controls setup to control the video. See Player Controls
  • height:Number || String - Height of the player. Default 100%.
  • loop:Boolean - Whether or not the video should loop playback. Default false.
  • play:Boolean - Whether or not the video should play on load. Default false.
  • time:Number - Time to play when the player loads, or seek time if the player is already loaded. Default 0.
  • width:Number || String - Width of the player. Default 100%.

Callbacks

  • onEnded:Function - Callback when video playback has ended.
  • onError:Function - Callback when an error occurs within the player.
  • onPause:Function - Callback when video player is paused.
  • onPlay:Function - Callback when video player is played.
  • onReady:Function - Callback when video player is ready.
  • onTimeUpdate:Function - Callback when video player time updates.

Player Components

VimeoPlayer

The VimeoPlayer component is a simple React wrapper around the standard Vimeo Player embed. For more informatin on how to work with the Vimeo Player directly, check out this repo, @vimeo/player.js, for more info and examples.

The VimeoPlayer component offers limited control of the player via the props on the component: loop, play, time and volume. I’m open to adding more access to some of the other methods available on the player via props, but to keep it simple I’ve started with these four.

Props
  • config:Object - Options that are passed to the player on setup, Available embedOptions.
  • videoId:Number - ID of the Vimeo video you'd like to load in the player.
Example
import {VimeoPlayer} from 'react-video-players';

...

  render() {
    return (
      <div>
        <VimeoPlayer videoId="225408543" />
      </div>
    );
  }

...

YouTubePlayer

Similar to the VimeoPlayer component, the YouTubePlayer component is a simple React wrapper around the YouTube Player, allowing for basic control and configuration, allowing you to use it how you want within your React sites/applications.

Props
  • config:Object - The config object is mapped to the playerVars property used when creating the player. Available playerVars.
  • playlist:String - An optional value that can be set when you would like to load a playlist into the player. This property is also set to the videoId when the loop flag has been set on the player (which is required for the YouTube Player to loop the video).
  • videoId:String - String to the YouTube video ID you would like to load in the player.
Example
import {YouTubePlayer} from 'react-video-players';

...

  render() {
    return (
      <div>
        <YouTubePlayer videoId="8gXpZmQ7j70" />
      </div>
    );
  }

...

VideoPlayer

Just your plain ole’ <video> tag, wrapped in a similar interface to the other platform specific players. You could use this as is if you have direct access to video urls, or use it as a base for a more complex video player that you’re building in React.

Props
  • config:Object - An object containing the additional attributes that are available for the <video> tag, but are not exposed via other props. (Ex. controls, poster, preload, etc.)
  • src:String - URL to video content.
Example
import {VideoPlayer} from 'react-video-players';

...

  render() {
    return (
      <div>
        <VideoPlayer src="[...your video source url...]" />
      </div>
    );
  }

...

playerController (Higher Order Component)

Want to build your own embeddable player using a different providers player? No problem 😎

Included in this library is the a High Order Component that wraps all the players in this library, playerController. The playerController is responsible for wiring up the controls, along with handling some basic style and callback handling within video component instances so that we’re not repeating ourselves too much.

Feel free to use the playerController to write your own React video players that wrap embeddable players from other video providers. Also, if you end up writing a really awesome component for another provider, and you’d like to add it to this repo, just make a PR with your additions and I’ll check’em out and merge them in as soon as I can.

Example

import React, {Component} from 'react';
import {playerController} from 'react-video-players';

class YourRadVideoPlayer extends Component {

...

}
...

export default playerController(YourRadVideoPlayer);

Player Controls

The controls property on the video player components makes it easy to compose controls in context with the video player and provide a simple way to keep controls in sync with the video state, while also providing callbacks that can be used to control video playback.

Properties

  • loop:Boolean - Loop status of video
  • play:Boolean - Playing status of video
  • time:Number - Current time of video
  • volume:Number - Current volume of video

Callback

  • onPause:Function - Callback to pause video
  • onPlay:Function - Callback to play video
  • onSeek:Function - Callback to seek video
  • onVolumeChange:Function - Callback to change the volume of video

License

MIT © Ryan Hefner