I would like to display the duration of the video in the VideoJS skin as a thumbnail while the video is not playing.
I have the following code but cannot see how to implement this via JS SDK in React.
Here is an example of how I would like the duration display to look:
video-js-duration-display-preview-window
Here is my code so far:
const VideoJsPlayer = ({ src, divStyle, autoPlay = true }) => {
const videoRef = React.useRef(null);
const playerRef = React.useRef(null);
React.useEffect(() => {
if (!window) return;
if (window.videojs && src) {
if (!playerRef.current) {
const videoElement = videoRef.current;
if (!videoElement) return;
playerRef.current = window.videojs(videoElement);
} else {
// You can update player in the `else` block here, for example:
// player.autoplay(options.autoplay);
// player.src(options.sources);
}
}
}, [src]);
return (
<div
data-vjs-player
style={{ width: '100%', objectFit: 'cover', ...divStyle }}
>
<video
ref={videoRef}
className={clsx([
'video-js',
'vjs-big-play-centered',
styles.videoJsClass,
])}
controls
autoPlay={autoPlay}
preload="auto"
width="100%"
height="400px"
data-setup="{}"
>
<source src={src + '#t=0.001'} type="video/mp4" />
<p className="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to
a web browser that supports HTML5 video
</p>
</video>
</div>
);
};
I can see the documentation here and have access to the player object by playerRef.current
. But how to add this title like pictured above?