You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
55 lines
1.5 KiB
TypeScript
55 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
import videojs from 'video.js';
|
|
import './video.css';
|
|
import './videojs-new-markers.js'
|
|
|
|
export const VideoJS = (props) => {
|
|
const videoRef = React.useRef(null);
|
|
const playerRef = React.useRef(null);
|
|
const {options, onReady} = props;
|
|
|
|
React.useEffect(() => {
|
|
|
|
// Make sure Video.js player is only initialized once
|
|
if (!playerRef.current) {
|
|
// The Video.js player needs to be _inside_ the component el for React 18 Strict Mode.
|
|
const videoElement = document.createElement("video-js");
|
|
|
|
videoElement.classList.add('vjs-big-play-centered');
|
|
videoRef.current.appendChild(videoElement);
|
|
|
|
const player = playerRef.current = videojs(videoElement, options, () => {
|
|
videojs.log('player is ready');
|
|
onReady && onReady(player);
|
|
});
|
|
|
|
// You could update an existing player in the `else` block here
|
|
// on prop change, for example:
|
|
} else {
|
|
const player = playerRef.current;
|
|
player.autoplay(options.autoplay);
|
|
player.src(options.sources);
|
|
}
|
|
}, [options, videoRef]);
|
|
|
|
// Dispose the Video.js player when the functional component unmounts
|
|
React.useEffect(() => {
|
|
const player = playerRef.current;
|
|
|
|
return () => {
|
|
if (player && !player.isDisposed()) {
|
|
player.dispose();
|
|
playerRef.current = null;
|
|
}
|
|
};
|
|
}, [playerRef]);
|
|
|
|
return (
|
|
<div data-vjs-player={true}>
|
|
<div ref={videoRef} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default VideoJS;
|