gdq-archive/frontend/components/VideoPlayer.tsx

39 lines
965 B
TypeScript

import * as React from 'react';
import videojs, { VideoJsPlayer, VideoJsPlayerOptions } from 'video.js';
// import 'videojs-contrib-dash';
import { ResponsiveEmbed } from 'react-bootstrap';
export default class VideoPlayer extends React.Component<VideoJsPlayerOptions> {
videoNode: HTMLVideoElement;
player: VideoJsPlayer;
componentDidMount() {
this.player = videojs(this.videoNode, this.props, function onPlayerReady() {
console.log('Video.js Ready', this);
});
}
componentWillUnmount() {
if (this.player) {
this.player.dispose();
}
}
render() {
return (
<ResponsiveEmbed aspectRatio="16by9">
<div>
<div data-vjs-player>
{/* eslint-disable-next-line jsx-a11y/media-has-caption */}
<video
ref={(node) => { this.videoNode = node; }}
className="video-js"
/>
</div>
</div>
</ResponsiveEmbed>
);
}
}