0.2.0 • Published 3 years ago
use-player v0.2.0
Use Dacast Player
React hook for Dacast Video Player.
Commands
npm i use-player
Usage
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 |