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

fighting_today_cui2024-08-20 1:34

一、安装依赖

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