一、安装依赖
我使用的video.js版本是8.17.3,从 Video.js 7.x 开始,HLS 支持被内置到了 Video.js 中所以不需要安装其他依赖
npm i video.js
二、创建VideoPlayer组件
import React, { useEffect, useRef } from 'react'
import videojs from 'video.js'
import 'video.js/dist/video-js.css' // 引入 Video.js 样式
import Player from 'video.js/dist/types/player'
interface Props {
src: string // HLS 流的 URL
}
const VideoPlayer: React.FC<Props> = ({ src }) => {
const playerRef = useRef<Player>()
useEffect(() => {
// 初始化 Video.js 播放器
playerRef.current = videojs('my-player', {
controls: true,
preload: 'auto',
sources: [
{
src: src,
type: 'application/x-mpegURL', // HLS MIME 类型
},
],
})
// 清理函数
return () => {
if (playerRef.current) {
playerRef.current.dispose()
}
}
}, [src])
return (
<div>
<video id="my-player" className="video-js vjs-default-skin"></video>
</div>
)
}
export default VideoPlayer
三、使用VideoPlayer组件
// App.tsx
import React from 'react';
import VideoPlayer from './VideoPlayer';
function App() {
return (
<div className="App">
<VideoPlayer />
</div>
);
}
export default App;