0.2.0 • Published 5 years ago
use-player v0.2.0
Use Dacast Player
React hook for Dacast Video Player.
Commands
npm i use-playerUsage
import * as React from 'react';
import { usePlayer } from 'use-player';
const App = () => {
let playerRef = React.useRef(null);
let playerOptions = {
autoplay: false, // default
provider: 'universe', // default
};
usePlayer(playerRef, 'YOUR_CONTENT_ID_FROM_DACAST', playerOptions);
return (
<div ref={playerRef}></div>
);
};All player options
| Parameter | Type | Optional | Default | Description |
|---|---|---|---|---|
| provider | OVPProvider | No | 'universe' | 'vzaar', 'dacast', 'universe' or 'singularity'. |
| width | number | Yes | 100% | Player width in pixels. Omit units. |
| height | number | Yes | 100% | Player height in pixels. Omit units. |
| player | Player | Yes | 'theo' | 'theo', 'vjs5' or 'jw' |
| jwUrl | string | Yes | ||
| hlsQualities | string | Yes | ||
| autoplay | boolean | string | Yes | false | Play video once the player loads. |
| kioskMode | boolean | string | Yes | false | Enable Kiosk mode. |
| loop | boolean | string | Yes | false | Play video on repeat mode. |
| playsinline | boolean | string | Yes | ||
| startMute | boolean | string | Yes | false | Video starts muted. |
| brandText | string | Yes | null | |
| brandLink | string | Yes | null | |
| disableControls | boolean | Yes | false | Disable the player control bar interaction. |
| hideFullscreen | boolean | string | Yes | false | Hide the fullscreen control button. |
| adPreRollUrl | string | Yes | ||
| adMidRollUrl | string | Yes | ||
| adMidRollTime | number | Yes | ||
| adPostRollUrl | string | Yes | ||
| showControlsForJSAds | boolean | string | Yes | ||
| border | boolean | Yes | false | Shows a border line around the player. |
| colourAccent | string | Yes | rgba(255, 255, 255, 0.4) | The color in hexadecimal format of elements such as video progress bar, volume bar and options background. |
| colourBase | string | Yes | rgba(155, 155, 155, 0.3) | The theme main color in hexadecimal format, affects the player controls backgrounds. |
| colourSet | string | Yes | ||
| endText | string | Yes | null | Text to appear once the video playback finishes. |
| endLink | string | Yes | null | Link to appear once the video playback finishes. |
| showPlayButton | boolean | string | Yes | true | Show or hide the big play button over the video. Doesn't hide the play/pause button on the control bar. |
| previewThumbs | boolean | string | Yes | true | Show a preview image of the video when the mouse hovers the video progress bar. |
| preload | boolean | string | Yes | false | |
| hideControls | boolean | string | Yes | false | Hides the control bar. |
| socialSharing | string | Yes | ||
| videoURL | string | Yes | null | |
| setSubsBg | boolean | string | Yes | ||
| brandOverlayFS | boolean | string | Yes | false | |
| colourBg | string | Yes | null | |
| playlistMode | string | Yes | null | |
| continuousPlay | boolean | string | Yes | false | Whether the next video in a playlist will be autplayed. |
| hideBuffering | boolean | string | Yes | false | |
| language | string | Yes | 'en' | ISO 639-1 language code for localization |
| skipButtonsTime | number | Yes | ||
| objectFitCSS | ObjectFitCSS | Yes | 'fill' | 'fill', 'contain', 'cover', 'none' or 'scale-down'. |
| hideMailCatcher | boolean | Yes | ||
| lightWeight | boolean | Yes | ||
| inplayertoken | string | Yes | ||
| referrerToken | string | Yes | ||
| signedKey | string | Yes | ||
| subtitles | string | Yes | ||
| relayGAEventsToParent | boolean | Yes | ||
| ads | Ads | OldAds | No | ||
| theme | ThemeInfo | No |