🔗 Live Demo

Check out the live demo here: Coming soon

See the player in action and explore its features in a real-world setup!

Usage

npm install react-bit-player

import React from 'react';
import ReactBitPlayer from 'react-bit-player';

const  App  = () => {
const  playerRef  =  useRef<HTMLVideoElement  |  null>(null)

return (
	<div style={{ width:  '50vw', height:  '40vh' }}>
		<ReactBitPlayer 
			src='https://demo.unified-streaming.com/k8s/features/stable/video/tears-of-steel/tears-of-steel.ism/.m3u8' 
			ref={playerRef} 
		/>
	</div>
)};
export  default  App;

Props

Since this is wrapped around ReactPlayer, you have access to all ReactPlayer props along with few exclusive to ReactBitPlayer

ReactBitPlayer Exclusive Props

Prop | Description | Default ---- | ----------- | ------- subtitles | An array of subtitles tracks of type Subtitle (see type section) | [] seekBarColor | Color for played section of seekbar. Loaded color also derives from here. Accepts Css color notation. | cyan volumeBarColor | Color for volume bar. | yellow playbackRates | An array of all playback rates available. | [ '0.5', '0.75', '1.0', '1.25', '1.5', '2.0' ] ref | A ref to internal video element of type RefObject<HTMLVideoElement | null>. See example usage above. | null

Subtitle type

Subtitle prop should be an array of type

lang: "string",
url: "string"

Also only vtt type is supported for now.

const captions = [
	{lang: "English", url: "https://path-to-english-subtitle.vtt"},
	{lang: "Spanish", url: "https://path-to-spanish-subtitle.vtt"},
]

<ReactBitPlayer src="xyz.m3u8" subtitles={captions}/>

ReactPlayer Props (Copied from ReactPlayer docs)

Prop | Description | Default ---- | ----------- | ------- src | The url of a video or song to play | undefined playing | Set to true or false to play or pause the media | undefined preload | Applies the preload attribute where supported | undefined playsInline | Applies the playsInline attribute where supported | false crossOrigin | Applies the crossOrigin attribute where supported | undefined loop | Set to true or false to loop the media | false volume | Set the volume of the player, between 0 and 1  ◦  null uses default volume on all players #357 | null muted | Mutes the player | false playbackRate | Set the playback rate of the player  ◦  Only supported by YouTube, Wistia, and file paths | 1 width | Set the width of the player | 320px height | Set the height of the player | 180px style | Add inline styles to the root element | {} light | Set to true to show just the video thumbnail, which loads the full player on click  ◦  Pass in an image URL to override the preview image | false fallback | Element or component to use as a fallback if you are using lazy loading | null wrapper | Element or component to use as the container element | null playIcon | Element or component to use as the play icon in light mode previewTabIndex | Set the tab index to be used on light mode | 0

Callback props

Callback props take a function that gets fired on various player events:

Prop | Description ---- | ----------- onClickPreview | Called when user clicks the light mode preview onReady | Called when media is loaded and ready to play. If playing is set to true, media will play immediately onStart | Called when media starts playing onPlay | Called when the playing prop is set to true onPlaying | Called when media actually starts playing onProgress | Called when media data is loaded onTimeUpdate | Called when the media's current time changes onDurationChange | Callback containing duration of the media, in seconds onPause | Called when media is paused onWaiting | Called when media is buffering and waiting for more data onSeeking | Called when media is seeking onSeeked | Called when media has finished seeking onRateChange | Called when playback rate of the player changed  ◦  Only supported by YouTube, Vimeo (if enabled), Wistia, and file paths onEnded | Called when media finishes playing  ◦  Does not fire when loop is set to true onError | Called when an error occurs whilst attempting to play media onEnterPictureInPicture | Called when entering picture-in-picture mode onLeavePictureInPicture | Called when leaving picture-in-picture mode

Config prop

There is a single config prop to override settings for each type of player:

<ReactPlayer
  src={src}
  config={{
    youtube: {
      color: 'white',
    },
  }}
/>

Settings for each player live under different keys:

Key | Options --- | ------- youtube | https://developers.google.com/youtube/player_parameters#Parameters vimeo | https://developer.vimeo.com/player/sdk/embed hls | https://github.com/video-dev/hls.js/blob/master/docs/API.md#fine-tuning

Supported media

• Supported file types are playing using <video> or <audio> elements
• HLS streams are played using hls.js
• DASH streams are played using dash.js
• Mux videos use the <mux-player> element
• YouTube videos use the YouTube iFrame Player API
• Vimeo videos use the Vimeo Player API
• Wistia videos use the Wistia Player API

🤝 Contributing

Contributions are welcome!
If you'd like to improve this project, feel free to fork the repo, make your changes, and open a pull request.

For major changes, please open an issue first to discuss what you'd like to change.

Let's build better together! 🚀 Contribute here

Contributors ✨