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 |