react-videobg

video fit component built with React. demo

installation

npm install react-videobg

example

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

// import VideoBgComponent from 'react-videobg'
import VideoBgComponent from 'react-videobg'
import videoSourceMp4 from './assets/sample.mp4'
import videoSourceOgv from './assets/sample.ogv'
import videoSourceWebm from './assets/sample.webm'
import poster from './assets/poster.jpg'

class App extends Component {
  render() {
    const params = {
      sources: [videoSourceMp4,videoSourceOgv,videoSourceWebm],
      videosize: {
        w: 1920,
        h: 1080
      },
      fitType: 'cover',
      videoProps: {
        poster: poster,
        muted: true,
        autoPlay: true,
        loop: true,
        playsInline: true,
        crossOrigin: 'anonymous'
      },
      eventHandler: {
        loadstart:(e)=>{
          console.log('loadstart')
        },
        progress:(e)=>{
          console.log('pregoress:',e)
        },
        canplay: (e)=>{
          console.log('canplay',e)
          console.log('node:',e.currentTarget)
        }
      }
    }

    return (
      <div className="App">
        <div style={{ position:'absolute',top:0,left:0,width:'100%',height:'40%'}}>
          <VideoBgComponent {...params} />
        </div>
      </div>
    );
  }
}

export default App;