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 | | |

Example

https://codepen.io/turizoft/pen/RwoywBg