node.js - 无法使用 react-hls-player npm 包播放 m3u8 文件

Question

我使用 ffmpeg 创建了一个 m3u8 文件，我需要播放该文件，为此我使用了一个名为 react-hls-player 的 npm 包，但它没有播放，我犯了什么错误，下面是我的代码
我使用下面的代码在nodejs中使用ffmpeg创建了一个m3u8文件

    const ffmpeg = require('fluent-ffmpeg')
const ffmpegInstaller = require('@ffmpeg-installer/ffmpeg')


ffmpeg.setFfmpegPath(ffmpegInstaller.path)

ffmpeg('uploads/malayalam.mp4').addOptions([


 
  '-c:a',
  'aac',
  '-ar',
  '48000',
  '-b:a',
  '128k',
  '-c:v',
  'h264',
  '-profile:v',
  'main',
  '-crf',
  '20',
  '-g',
  '48',
  '-keyint_min',
  '48',
  '-sc_threshold',
  '0',
  '-b:v',
  '2500k',
  '-maxrate',
  '2675k',
  '-bufsize',
  '3750k',
  '-hls_time',
  '4',
  '-hls_playlist_type',
  'vod',
  '-hls_segment_filename',
  'uploads/video/720p_%03d.ts'
  
]).output('uploads/video/output.m3u8').on('end',(err,data)=>{
  console.log(data)
  console.log('end')
}).run()

下面是我的 m3u8 文件目录的截图

我使用 react-hls-player 播放我的 nodejs 服务器在端口:5000 上运行的 m3u8 文件
下面是reactjs代码

    import React from 'react'
import ReactHlsPlayer from 'react-hls-player';

function M3u8_player() {
  return (
    <div className="userlist">
       
      
        <ReactHlsPlayer
    src="http://localhost:5000/uploads/video/output.m3u8"
    autoPlay={false}
    controls={true}
    width="100%"
    height="auto"
  />
  </div>
  )
}

export default M3u8_player

在这里我无法播放 m3u8 文件，请帮助我，我在创建 m3u8 文件时是否犯了任何错误

Answer 1

我认为您需要在 hls 播放器中传递 Authentication header 的问题