React Video.js Hooks 是使用 React 和 Video.js 的钩子来创建视频播放器的方法。
使用 Video.js Hooks 可以方便地在 React 应用程序中实现视频播放功能,并且还可以使用 Video.js 的强大功能,如自定义播放器皮肤、字幕支持等。
实现步骤:
示例代码:
import React, { useRef } from 'react';
import videojs from 'video.js';
import 'video.js/dist/video-js.css';
import useVideo from 'react-video-js-hooks';
const VideoPlayer = () => {
const videoRef = useRef(null);
const [player, ready] = useVideo(videoRef, {
controls: true,
autoplay: false,
sources: [{
src: 'https://your-video-url.com/video.mp4',
type: 'video/mp4'
if (!ready) {
return <div>Loading...</div>;
return (
<video ref={videoRef} className="video-js"></video>
</div>
export default VideoPlayer;
这是一个简单的 React Video.js Hooks 示例,可以帮助您快速实现视频播放功能。