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

@tomkis/react-html5video

v2.0.1

Published

A customizeable HTML5 Video

Downloads

4

Readme

react-html5video

A customizeable HoC (Higher Order Component) for HTML5 Video that allows custom and configurable controls with i18n and a11y.

V2 API has changed and is not backwards compatible. You can find the old documentation here.

Build Status npm version npm downloads

View the demo.

Install

npm install react-html5video --save

Peer Dependencies

  • react@>=15.0.x
  • react-dom@>=15.0.x

Usage

Simple Usage

The simplest way to use this component is to use the default player that is provided. It works the same way as a normal HTML5 video by taking all the supported HTML5 video attributes except for controls. This is now "controlled" and can be an array of supported component names in any order as below:

import { DefaultPlayer as Video } from 'react-html5video';
import 'react-html5video/dist/styles.css';
render() {
    return (
        <Video autoPlay loop muted
            controls={['PlayPause', 'Seek', 'Time', 'Volume', 'Fullscreen']}
            poster="http://sourceposter.jpg"
            onCanPlayThrough={() => {
                // Do stuff
            }}>
            <source src="http://sourcefile.webm" type="video/webm" />
            <track label="English" kind="subtitles" srcLang="en" src="http://source.vtt" default />
        </Video>
    );
}

a11y* and i18n

The custom controls provided are built using <button> and <input type="range"> which means basic keyboard controls are available when they are focused. For example, you can and hit the space bar on mute, play and fullscreen buttons as well as seek using the arrow keys when focused on the slider. aria-label attributes for screen readers have been used where user interaction is required. Try tabbing through the demo with Vox enabled.

You can change translate the aria-label values for all controls like so:

<Video copy={{ key: value }}>

The default english copy can be found in here.

*Disclaimer: Unfortuantely I don't much experience with a11y but I have tried to use some of the features from PayPal's accessible HTML5 player. If anyone has further input on this please raise an issue or a pull request.

Advanced Usage

If you want to get creative and create your own video player then you will need to use the higher order component. The HoC connects a React component to all the HTML5 video attributes and the HTMLMediaElement of the first video it finds in the component it is wrapping.

import videoConnect from 'react-html5video';

const MyVideoPlayer = ({ video, videoEl, children, ...restProps }) => (
    <div>
        <video {...restProps}>
            { children }
        </video>
        <p>
            Here are the video properties for the above HTML5 video:
            { JSON.stringify(video) }
        </p>
        <a href="#" onClick={(e) => {
            e.preventDefault();
            // You can do what you like with the HTMLMediaElement DOM element also.
            videoEl.pause();
        }}>
            Pause video
        </a>
    </div>
);

export default videoConnect(MyVideoPlayer)

The above will simply print out the properties of the HTML5 <video> within MyVideoPlayer. Now you have these properties and the HTMLMediaElement itself available in your component, it is up to you to create your new custom controls using them. See the default player as an example.

API

The API behaves much like the React Redux connect HoC but instead of using dispatch to change the state, we have access to the HTMLMediaElement.

videoConnect(ReactComponent, [mapStateToProps], [mapVideoElToProps], [mergeProps])

  • mapStateToProps(videoState, ownProps) - Use this to return the HTML5 video attributes required for your component. The plain object returned here will be merged with what is returned from mapVideoElToProps using the mergeProps function. By Default this returns all video attributes so they are accessible on this.props.video in your wrapped component.

  • mapVideoElToProps(videoEl, videoState, ownProps) - Use this to return a plain object that uses videoEl to update the videos state. videoEl is the raw HTMLMediaElement. The object returned here will be merged with what is returned from mapStateToProps using the mergeProps function. By default the videoEl will be accessible on this.props.videoEl in your wrapped component.

  • mergeProps(stateProps, videoElProps, ownProps) - If specified, it is passed the result of mapStateToProps mapVideoElToProps and the parent props. The plain object you return will be passed to your wrapped component. By default this will do Object.assign({}, stateProps, videoElProps, ownProps).

Contributing

Dev Setup

To run a development server with HMR:

    $ npm i
    $ npm run i:demo
    $ npm start

License

MIT