How to style video js

Issue #663

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
/** @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>
)
}
}

Comments