See documentation for more detail.
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.
import { VideoControls } from '@vidispine/vdt-videojs-react';
Custom external controls for controlling a vdt-videojs Player instance.
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 |
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
.
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 |
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:
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 |