react18 + ts 使用video.js 直播.m3u8格式的视频流

一、安装依赖

我使用的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;