@vidispine/vdt-videojs-react

See documentation for more detail.

<VideoPlayer />

import { VideoPlayer } from '@vidispine/vdt-react-videojs';

A wrapper for vdt-videojs player.

See vdt-videojs for available Class instance methods that can be used via the ref / additional info.

<VideoControls />

import { VideoControls } from '@vidispine/vdt-videojs-react';

Custom external controls for controlling a vdt-videojs Player instance.

Props

Name	Type	Default	Description
player	React Component	null	Pass a vdt-videojs Player component ref to use the controls with
light	Bool	false	Optional - Switch to a light theme for dark-colored user interfaces

<VideoSeekBar />

import { VideoSeekBar } from '@vidispine/vdt-videojs-react';

Custom seek bar component for interacting with a vdt-videojs Player instance - has marker (in / out point) support. See vdt-videojs for seek bar API accessible trough a ref.

Props

Name	Type	Default	Description
player	React Component	null	Pass a vdt-videojs Player component ref to use the controls with
in	Number	null	Optional - Set the "in" point marker in seconds from video start, reactive
out	Number	null	Optional - Set the "out" point marker in seconds from video start, reactive
markersEnabled	Bool	true	Optional - Set to false to disable in / out marker functionality, reactive
regions	Array	[]	Optional - Render region markers with or without captions passing an array of Regions, reactive const regions = [ new VideoSeekBar.Region({ in: 12, // as seconds out: 13, title: 'Dinosaurs', annotation: 'Based on fossil and (...)' }), new VideoSeekBar.Region({ in: 18, out: 19 }) ]
onRegionClick	Function	undefined	Optional - Trigger a callback that happens upon clicking on a region. (region)=>{ console.log(region, 'clicked on a region') // optional - return true to prevent seek return true }
bgColor	String	'#fafafa'	Optional - Customize the seek bar background color
fillColor	String	'#f00'	Optional - Customize the seek bar fill (progress bar) color

<VideoTimeCode />

import { VideoTimeCode } from '@vidispine/vdt-videojs-react';

VideoTimeCode is a wrapper around vdt-videojs TimeCodeDisplay component, it does not host any logic or concept of framerates regarding the video source itself.

TimeCodeDisplay is really good at rendering numbers and handling input, and is purpose made just for that.

The HTML markup that VideoTimeCode outputs is quite minimal and looks like this:

<div class="vdt-timecode vjs-time-control">
	<input class="hours" tabindex="-1" maxlength="2">
	<span>:</span>
	<input class="minutes" tabindex="-1" maxlength="2">
	<span>:</span>
	<input class="seconds" tabindex="-1" maxlength="2">
	<span>:</span>
	<input class="frame" tabindex="-1" maxlength="2">
</div>

Important note:

VideoTimeCode component is provided without any base styling (CSS); It also does not encapsulate it's own DOM inside a shadow node (as opposed to VideControls and VideoSeekBar components)

This allows for maximum flexibility in external use cases and avoids excessive overriding of styles, however poses a risk for CSS collisions.

So one would style the component based on the project spec; CSS to style it could be as short as:

// use specific selectors to avoid colissions with in-player timecode
.some-div > .vdt-timecode{
	margin: 25px auto;
	width: 320px;
	border: 1px solid #777;
	border-radius: 20px;
}

.some-div > .vdt-timecode input{
	display: inline-block;
	color: #556;
	width: 76px;
	height: 50px;
	background: none;
	font-size: 19px;
	text-align: left;
	padding-left: 28px;
	font-family: monospace, sans-serif;
	border: none;
}

Or using @materialui-ui

import { styled } from '@material-ui/core/styles';

const StyledTimecode = styled(({ className, ...props }) => (
  <VideoTimeCode className={className} {...props} />
))({
  '& .vdt-timecode': {
    border: '1px solid #777',
    borderRadius: 20,
    width: 'fit-content',
    marginTop: 8,
    marginBottom: 8,
  },
  '& .vdt-timecode input': {
    display: 'inline-block',
    color: '#556',
    width: 76,
    height: 50,
    background: 'none',
    fontSize: 19,
    textAlign: 'left',
    paddingLeft: 28,
    fontFamily: 'monospace, sans-serif',
    border: 'none',
  },
});

And would yield a component looking like this:

Props

Name	Type	Default	Description
player	React Component	null	Pass a vdt-videojs Player component ref to use the timecode with
hours	Number	null	Optional - set hours, reactive
minutes	Number	null	Optional - set minutes, reactive
seconds	Number	null	Optional - set seconds, reactive
frame	Number	null	Optional - set frame, reactive