npm i video.js
App.jsx
|
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 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
import React, { useEffect, useRef, useState } from "react"; import videojs from "video.js"; import "video.js/dist/video-js.css"; export const App = () => { const videoJsOptions = { autoplay: true, controls: true, responsive: true, fluid: true, experimentalSvgIcons: true, playbackRates: [0.5, 1, 1.5, 2], controlBar: { skipButtons: { forward: 10, backward: 10, }, }, sources: [ { src: "//vjs.zencdn.net/v/oceans.mp4", type: "video/mp4", }, ], }; const VideoPlayer = (props) => { const videoRef = useRef(null); const playerRef = useRef(null); const [playbackRate, setPlaybackRate] = useState(1); const { options, onReady } = props; useEffect(() => { if (!playerRef.current) { 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); })); } else { const player = playerRef.current; player.autoplay(options.autoplay); player.src(options.sources); } }, [options, videoRef]); useEffect(() => { if (playerRef.current) { playerRef.current.playbackRate(playbackRate); } }, [playbackRate]); useEffect(() => { const player = playerRef.current; return () => { if (player && !player.isDisposed()) { player.dispose(); playerRef.current = null; } }; }, [playerRef]); return ( <> <div data-vjs-player> <div ref={videoRef} /> </div> <div style={{ marginTop: "20px", }} > </div> </> ); }; return ( <div> <VideoPlayer options={videoJsOptions} onReady={() => console.log("The video is ready to play")} /> </div> ); }; export default App; |
