video-player-for-react

a react video player component base

Usage no npm install needed!

<script type="module">
  import videoPlayerForReact from 'https://cdn.skypack.dev/video-player-for-react';
</script>

README

video-player-for-react

a react video player component base

NPM JavaScript Style Guide

Disclaimer

  • This library is currently in alpha version, DO NOT use in production!

Functions

Play/Pause :heavy_check_mark:
Navigation with progress bar :heavy_check_mark:
Enter Picture-In-Picture mode :heavy_check_mark:
Click on video to Play/Pause :heavy_check_mark:
Overlay play button :heavy_check_mark:
Mute :heavy_check_mark:
Adjust volume :heavy_check_mark:
Fullscreen mode :heavy_check_mark:
Select subtitles :x:
Show subtitles :x:
Playback rate :x:

Install

npm install --save video-player-for-react

CodeSandbox demo

https://codesandbox.io/s/video-player-for-react

Getting started

import React from 'react'

import { ReactVideoPlayer } from 'video-player-for-react'
import 'video-player-for-react/dist/index.css'

const App = () => {
  return (
    <ReactVideoPlayer
      width='928px'
      url='http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'
      type='video/mp4'
      poster='http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg'
      // captions={[
      //   {
      //     kind: 'captions',
      //     label: 'English',
      //     srcLang: 'en',
      //     src: 'caption_url'
      //   }
      // ]}
    />
  )
}

export default App

License

MIT © victoralvesf