-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
videoplayer.tsx
48 lines (41 loc) · 1.39 KB
/
videoplayer.tsx
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
45
46
47
48
import React, { useEffect, useRef } from 'react'
import videojs from 'video.js'
import 'video.js/dist/video-js.css'
import Player from 'video.js/dist/types/player'
import 'videojs-youtube'
type VideoJSProps = {
options: any
onReady?: (player: Player) => void
}
export default function VideoJS(props: VideoJSProps) {
const videoRef = useRef<HTMLDivElement | null>(null)
const playerRef = useRef<Player | null>(null)
useEffect(() => {
if (!playerRef.current && videoRef.current) {
const videoElement = document.createElement('video-js')
videoRef.current.appendChild(videoElement)
const player = videojs(videoElement, props.options, () => {
videojs.log('player is ready')
props.onReady && props.onReady(player)
})
playerRef.current = player
} else if (playerRef.current) {
playerRef.current.autoplay(props.options.autoplay)
playerRef.current.src(props.options.sources)
}
}, [videoRef, props])
useEffect(() => {
return () => {
const player = playerRef.current
if (player && !player.isDisposed()) {
player.dispose()
playerRef.current = null
}
}
}, [playerRef])
return (
<div data-vjs-player>
<div ref={videoRef} />
</div>
)
}