实现方法
- 前端上传视频文件（可能需要用到大文件上传）
- 后端调用
ffmpeg将视频转换成hls格式并切片
ffmpeg -i test.mp4 -hls_time 30 -hls_list_size 0 -f hls a.m3u8
-i 表示输入(input) test.mp4, -hls_time 30 表示每个分块断是30秒， hls_list_size 表示序号是从0开始。 a.m3u8 表示最终生成的文件名。ffmpeg最终输出包含一个
a.m3u8格式文件与若干.ts文件
- 后端返回给前端生成好的
a.m3u8文件地址 - 前端调用第三方HLS播放库（如
xgplayer）播放视频
前端代码示例
使用西瓜播放器V3版本播放hls视频流
// App.tsx
import { useEffect } from 'react'
import './App.css'
import Player from 'xgplayer';
import HlsPlayer from 'xgplayer-hls.js';
import 'xgplayer/dist/index.min.css';
function App() {
useEffect(()=> {
let player = new Player({
id: "mse",
url: "http://127.0.0.1:8080/a.m3u8",
playsinline: true,
width: 500,
height: 300,
autoplay: false,
plugins: [HlsPlayer]
});
},[])
return (
<>
<div id='mse'></div>
</>
)
}
export default App
// package.json
{
"name": "livestreamtest",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"xgplayer": "3.0.16",
"xgplayer-hls.js": "^3.0.16"
},
"devDependencies": {
"@types/react": "^18.2.66",
"@types/react-dom": "^18.2.22",
"@vitejs/plugin-react": "^4.2.1",
"eslint": "^8.57.0",
"eslint-plugin-react": "^7.34.1",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.6",
"vite": "^5.2.0"
}
}
