@collaborne/video-player NPM

@collaborne/video-player - v0.1.8 / Modules

@collaborne/video-player

A video player build in React on top of CookPete/react-player. With nice MUI theming support and stylish replacement of browser video controls (UI and PiP event). And yes, it is updated to React v18 :balloon:!

Note: At the moment we only support url from a video file! Other media not yet supported(YouTube/Vimeo/...)

Live demo

Install

npm install --save @collaborne/video-player

How to use

Simplified or out of the box - if you don't need to manage any states by your own, or usage of the api, you can just use VideoPlayer

import React from 'react';
import { VideoPlayer } from '@collaborne/video-player';

export const MyComponent: React.FC = () => {
	return (
		<VideoPlayer videoUrl="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4" />
	);
};

Composed or individual- This case recommended is when you want to control video state (playing, pausing, muting...). You need to wrap your components in VideoProvider and add VideoContainer as a children too. Then you can consume VideoContext via useVideo hook.

import React from 'react';
import { useVideo, VideoProvider, VideoContainer } from '@collaborne/video-player';

const App = () => {
  <VideoProvider
		controlsConfig={{
			alwaysShowConfig: true,
		}}
	>
    <MyComponent1/>
    <MyComponent2/>
    <VideoContainer videoUrl="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/WhatCarCanYouGetForAGrand.mp4"/>
    <MyComponent3/>
    ...
  </VideoProvider>
}

const MyComponent2: React.FC = () => {
	const { api } = useVideo();
	return (
		<div>
			<p>Video is playing: {api?.getPlaying?.()}</p>
			<p>Video is muted: {api?.getMuted?.()}</p>
			<p>Video total duration: {api?.getDuration?.()}</p>
		</div>
	);
};

Image

Documentation

FAQ

Q: How about timing? If we need to stop a video at 1026ms?
A: For the ReactPlayer we set a progressInterval=50ms, that means that video will stop at interval 1000-1050ms.
Q: Do you support Youtube, vimeo sources?
A: At the moment, no. We support only files.

License

Apache-2.0 © Collaborne

clsx mitt bowser react-rnd screenfull react-player @use-it/event-listener resize-observer-polyfill

@everything-registry/sub-chunk-188 @zalastax/nolb-_col @infinitebrahmanuniverse/nolb-_col

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

0.1.9-main.20220812073342

4 years ago

0.1.9-main.20220812073153

4 years ago

0.1.9-main.20220812072811

4 years ago

0.1.9-fix-1009karaoke-storybook.20220811201920

4 years ago

0.1.9-fix1013-migrate-github-actions.20220811125509

4 years ago

0.1.9-main.20220811073359

4 years ago

0.1.9-create-events-logger.20220811073158

4 years ago

0.1.9-create-events-logger.20220810213021

4 years ago

0.1.9-create-events-logger.20220810212818

4 years ago

0.1.9-create-events-logger.20220810201437

4 years ago

0.1.9-create-events-logger.20220810195325

4 years ago

0.1.9-main.20220809131255

4 years ago

0.1.8-fix-893scrub-bar-highlights.20220809114216

4 years ago

0.1.8-fix-893scrub-bar-highlights.20220808191107

4 years ago

0.1.8-fix-893scrub-bar-highlights.20220808143434

4 years ago

0.1.8-fix-893scrub-bar-highlights.20220808135731

4 years ago

0.1.8-fix-893scrub-bar-highlights.20220804183302

4 years ago

0.1.8-fix-893scrub-bar-highlights.20220804160845

4 years ago

0.1.8-fix-893scrub-bar-highlights.20220804130941

4 years ago

0.1.8-fix-893scrub-bar-highlights.20220804114919

4 years ago

0.1.9

4 years ago

0.1.8-main.20220802173909

4 years ago

0.1.8-fix-1010decoupling-carrot-styles.20220802165411

4 years ago

0.1.8-fix-1010decoupling-carrot-styles.20220802161914

4 years ago

0.1.8-fix-1010decoupling-carrot-styles.20220801180108

4 years ago

0.1.8-fix-1010decoupling-carrot-styles.20220801164241

4 years ago

0.1.8-main.20220730090738

4 years ago

0.1.8-fixmain-build-failure.20220730062846

4 years ago

0.1.8-main.20220729140238

4 years ago

0.1.8-fix-937unit-testing.20220729135411

4 years ago

0.1.8-fix-937linting-and-documentation.20220729121854

4 years ago

0.1.8-fix-937unit-testing.20220728201502

4 years ago

0.1.8-fix-937linting-and-documentation.20220728191611

4 years ago

0.1.8-fix-937linting-and-documentation.20220727140218

4 years ago

0.1.8-fix-937linting-and-documentation.20220726165647

4 years ago

0.1.8-fix-937unit-testing.20220725204356

4 years ago

0.1.6-fix-937unit-testing.20220725184916

4 years ago

0.1.8-main.20220722151559

4 years ago

0.1.8-wipremove-memo.20220722104539

4 years ago

0.1.7-wipremove-memo.20220722102803

4 years ago

0.1.8

4 years ago

0.1.7-main.20220722082331

4 years ago

0.1.7-main.20220722075934

4 years ago

0.1.7-fix-958introduce-new-hooks-library.20220721200143

4 years ago

0.1.7-fix-969minimal-pip-size.20220721112112

4 years ago

0.1.6-fix-937unit-testing.20220720202717

4 years ago

0.1.7

4 years ago

0.1.6-main.20220719161248

4 years ago

0.1.6-fixadd-fileactionpanel.20220715130636

4 years ago

0.1.6-main.20220715104324

4 years ago

0.1.6-bug-951-950pip-fullscreen-switch.20220714110032

4 years ago

0.1.6-bug-951-950pip-fullscreen-switch.20220713152532

4 years ago

0.1.6-bug-951fix-fullscreen-state.20220712201243

4 years ago

0.1.6-main.20220712100454

4 years ago

0.1.6-bugpip-fix-on-click.20220712073325

4 years ago

0.1.6-bugpip-fix-on-click.20220711131128

4 years ago

0.1.6-main.20220708144839

4 years ago

0.1.6-fix-833theme-nesting.20220708143436

4 years ago

0.1.6-fix-833theme-nesting.20220708132042

4 years ago

0.1.6-bugpip-fix-on-click.20220707192930

4 years ago

0.1.6-bug-951fix-fullscreen-state.20220707190747

4 years ago

0.1.6-fix-833theme-nesting.20220707154146

4 years ago

0.1.6-fix-833theme-nesting.20220707062107

4 years ago

0.1.6-fix-833theme-nesting.20220706122022

4 years ago

0.1.6-fix-833theme-nesting.20220705204131

4 years ago

0.1.6

4 years ago

0.1.5-main.20220705093347

4 years ago

0.1.5-fix723.20220705084838

4 years ago

0.1.5-wipupgrade-reactv18-second.20220703112047

4 years ago

0.1.6-5

4 years ago

0.1.6-4.wipupgrade-reactv18-second.20220703091642

4 years ago

0.1.6-4

4 years ago

0.1.6-3.wipupgrade-reactv18-second.20220703084035

4 years ago

0.1.5-main.20220630081248

4 years ago

0.1.5-fix-886remove-back-to-tab.20220630080734

4 years ago

0.1.5-main.20220630070658

4 years ago

0.1.5-fix-886remove-back-to-tab.20220629141555

4 years ago

0.1.5-fixresize-drag.20220629135902

4 years ago

0.1.5-main.20220627192430

4 years ago

0.1.5-fixts-fixes.20220627190356

4 years ago

0.1.5-fixts-fixes.20220627173108

4 years ago

0.1.5-fixts-fixes.20220627150323

4 years ago

0.1.6-1

4 years ago

0.1.6-0.wipupdrade-react18.20220627105800

4 years ago

0.1.6-0

4 years ago

0.1.5-wipupdrade-react18.20220623164138

4 years ago

0.1.4-4.wipupdrade-react18.20220623162610

4 years ago

0.1.5

4 years ago

0.1.4-main.20220623090542

4 years ago

0.1.4-4

4 years ago

0.1.4-3.wipupdrade-react18.20220622191805

4 years ago

0.1.3-main.20220622112645

4 years ago

0.1.3-fix771-remove-travis.20220622111341

4 years ago

0.1.3-main.20220622110555

4 years ago

0.1.3-main.20220621201735

4 years ago

0.1.3-fix-857-pip-viewport.20220621200953

4 years ago

0.1.3-fix-857-pip-viewport.20220621192105

4 years ago

0.1.3-main.20220621174438

4 years ago

0.1.3-fix-825-dragging-pip.20220621173800

4 years ago

0.1.3-fix-825-dragging-pip.20220621171920

4 years ago

0.1.3-fix-825-dragging-pip.20220621161957

4 years ago

0.1.3-fix-825-dragging-pip.20220621161145

4 years ago

0.1.3-main.20220617122939

4 years ago

0.1.3-main.20220616121017

4 years ago

0.1.3

4 years ago

0.1.3-main.20220610193839

4 years ago

0.1.2-main.20220610193142

4 years ago

0.1.2-main.20220610124931

4 years ago

0.1.2

4 years ago

0.1.1-main.20220610124214

4 years ago

0.1.1-fix-748add-custom-pip-mode.20220610121257

4 years ago

0.1.1-fix-748add-custom-pip-mode.20220610111845

4 years ago

0.1.1-fix-748add-custom-pip-mode.20220610093824

4 years ago

0.1.1-main.20220610072958

4 years ago

0.1.1-fix-796playbackrate-button-styling.20220610072154

4 years ago

0.1.1-fix-748add-custom-pip-mode.20220609193513

4 years ago

0.1.1-fix-748add-custom-pip-mode.20220609164918

4 years ago

0.1.1-fix-748add-custom-pip-mode.20220609162927

4 years ago

0.1.1-fix-748add-custom-pip-mode.20220608214423

4 years ago

0.0.4-fix-712pip-mode-functionality-ugrade-v1.20220602174045

4 years ago

0.0.4-fix-712pip-mode-functionality-ugrade-v1.20220602173546

4 years ago

0.1.1-main.20220602110448

4 years ago

0.1.1

4 years ago

0.1.0-main.20220602105928

4 years ago

0.1.0-main.20220601202817

4 years ago

0.1.0

4 years ago

0.0.4-main.20220601200314

4 years ago

0.0.4-fix-721add-play-animation-statuses.20220601161428

4 years ago

0.0.4-fix-721add-play-animation-statuses.20220601152747

4 years ago

0.0.4-fix-712pip-mode-functionality-ugrade-v1.20220601124943

4 years ago

0.0.4-main.20220601114411

4 years ago

0.0.4-main.20220601112333

4 years ago

0.0.6

4 years ago

0.0.5

4 years ago

0.0.4-main.20220601111320

4 years ago

0.0.3-fix-711dump-components.20220601104741

4 years ago

0.0.3-fix-711dump-components.20220601094842

4 years ago

0.0.4-fix-721add-play-animation-statuses.20220531205357

4 years ago

0.0.4-fix-721add-play-animation-statuses.20220531192536

4 years ago

0.0.4-fix-721add-play-animation-statuses.20220531095555

4 years ago

0.0.4-fix-721add-play-animation-statuses.20220530205303

4 years ago

0.0.4-fix-721add-play-animation-statuses.20220530174637

4 years ago

0.0.4-main.20220527103407

4 years ago

0.0.4

4 years ago

0.0.3-main.20220527102940

4 years ago

0.0.3-fix-711dump-components.20220527100931

4 years ago

0.0.3-fix-711dump-components.20220526193209

4 years ago

0.0.3-fix-710build-test.20220526164507

4 years ago

0.0.3-fix-710bottom-control-video-integration.20220526162230

4 years ago

0.0.3-fix-710bottom-control-video-integration.20220526161420

4 years ago

0.0.3-fix-711dump-components.20220526151531

4 years ago

0.0.3-fix-710bottom-control-video-integration.20220526141245

4 years ago

0.0.3-fix-710bottom-control-video-integration.20220526105534

4 years ago

0.0.3-fix-710bottom-control-video-integration.20220526081727

4 years ago

0.0.3-main.20220526064320

4 years ago

0.0.3-fix-709ui-video-integration.20220526062248

4 years ago

0.0.3-fix-709ui-video-integration.20220525144816

4 years ago

0.0.3-teststorybook.20220525141118

4 years ago

0.0.3-main.20220525140702

4 years ago

0.0.3-fix-709ui-video-integration.20220525130715

4 years ago

0.0.3-main.20220525115254

4 years ago

0.0.3-ui-events-integration.20220525112042

4 years ago

0.0.3-ui-events-integration.20220525055435

4 years ago

0.0.3-ui-events-integration.20220523205604

4 years ago

0.0.3-main.20220520095725

4 years ago

0.0.3-main.20220520094201

4 years ago

0.0.3-main.20220519192203

4 years ago

0.0.3-main.20220519191053

4 years ago

0.0.3-main.20220519190414

4 years ago

0.0.3-main.20220519174125

4 years ago

0.0.3-fix-672.20220519173346

4 years ago

0.0.3-main.20220519170438

4 years ago

0.0.3-fix-672.20220519132305

4 years ago

0.0.3-fix-672.20220519124427

4 years ago

0.0.3-feat-708add-centered-play-button.20220519110505

4 years ago

0.0.3-fix-672.20220518190126

4 years ago

0.0.3-fix-672.20220518185029

4 years ago

0.0.3-feat-708add-centered-play-button.20220518174018

4 years ago

0.0.3-feat-708add-centered-play-button.20220518173114

4 years ago

0.0.3-feat-708add-centered-play-button.20220517190501

4 years ago

0.0.3-feat-708add-centered-play-button.20220517183809

4 years ago

0.0.3-feat-708add-centered-play-button.20220517142127

4 years ago

0.0.3-feat-708add-centered-play-button.20220516201428

4 years ago

0.0.3-feat-708add-centered-play-button.20220516195950

4 years ago

0.0.3-feat-708add-centered-play-button.20220516195257

4 years ago

0.0.3-feat-708add-centered-play-button.20220516193146

4 years ago

0.0.3

4 years ago

0.0.3-main.20220516122459

4 years ago

0.0.2-main.20220516122149

4 years ago

0.0.2-feat-708add-centered-play-button.20220516095055

4 years ago

0.0.2-fix-672.20220513165001

4 years ago

0.0.2

4 years ago

0.0.2-main.20220513092505

4 years ago

0.0.1-main.20220513092110

4 years ago