Issue #663
/** @jsx jsx */
import { css, jsx } from '@emotion/core'
import React from 'react';
import videojs from 'video.js'
export default class VideoPlayer extends React.Component {
componentDidMount() {
// instantiate Video.js
this.player = videojs(this.videoNode, this.props, function onPlayerReady() {
console.log('onPlayerReady', this)
});
}
// destroy player on unmount
componentWillUnmount() {
if (this.player) {
this.player.dispose()
}
}
// wrap the player in a div with a `data-vjs-player` attribute
// so videojs won't create additional wrapper in the DOM
// see https://github.com/videojs/video.js/pull/3856
render() {
return (
<div>
<div data-vjs-player css={css`
`}>
<video
ref={node => this.videoNode = node}
className="video-js vjs-big-play-centered"
data-setup='{ "playbackRates": [0.5, 1, 1.5, 2] }'
css={css`
width: auto;
height: 400px;
`}>
</video>
</div>
</div>
)
}
}
Updated at 2020-06-17 05:38:30