react-any-video

This package wraps video element as a react component, which is easy to use.

import Video from 'react-any-video';

const attributes = {
    src: 'http://...',
    width: 300,
    height: 200,
    muted: true,
    loop: true,
    autoplay: true,
    controls: true,
    postor: 'http://...',
    preload: 'metadata',
    crossorigin: 'anonymous',
    events: {
        onerror: () => {},
        onabort: () => {},
        onplaying: () => {},
        ontimeupdate: () => {}
    }
};


ReactDOM.render(<Video {...attributes}/>, document.querySelector('#react-dom'))
      

All attributes are supported, but the behaviors depend on browsers.

src attribute is not required, you can define <source> elements:

import Video from 'react-any-video';

<Video>
    <source src="http://media.w3.org/2010/05/sintel/trailer.mp4"
         type='video/mp4; codecs="avc1, mp4a"'>
    <source src="http://media.w3.org/2010/05/sintel/trailer.ogv"
         type='video/ogg; codecs="theora, vorbis"'>
    <p>Your user agent does not support the HTML5 Video element.</p>
</Video>