服務端
ts-node server.ts
server.ts
import express from 'express';
const app = express();
app.all('*', (req, res, next) => {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', 'Content-Type,Content-Length, Authorization, Accept,X-Requested-With');
res.header('Access-Control-Allow-Methods', 'PUT,POST,GET,DELETE,OPTIONS,PATCH');
res.header('Cache-Control', 'no-cache'); // 這裏統一設置了無緩存，實際只需要請求m3u8的時候無緩存即可。
res.header('X-Powered-By', '3.2.1');
if (req.method == 'OPTIONS') {
res.sendStatus(200);
} else {
next();
}
});
app.use(express.static(__dirname));
app.listen(3000);
ffmpeg
ffmpeg \
-i rtmp://address \
-vcodec copy \
-acodec copy \
-vbsf h264_mp4toannexb \
-f hls \
-hls_list_size 3 \
-hls_wrap 5 \
playlist.m3u8
-hls_list_size m3u8文件保存ts的個數；
-hls_wrap ts文件保存的個數（不設置保存所有）；
前端
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>videojs-contrib-hls embed</title>
<!--
Uses the latest versions of video.js and videojs-http-streaming.
To use specific versions, please change the URLs to the form:
<link href="https://unpkg.com/[email protected]/dist/video-js.css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]/dist/video.js"></script>
<script src="https://unpkg.com/@videojs/[email protected]/dist/videojs-http-streaming.js"></script>
-->
<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
</head>
<body>
<h1>Video.js播放m3u8</h1>
<video-js id="my_video_1" class="vjs-default-skin" controls preload="auto" width="640" height="268">
<source src="http://localhost:3000/test/playlist.m3u8"
type="application/x-mpegURL">
</video-js>
<script src="https://unpkg.com/video.js/dist/video.js"></script>
<script src="https://unpkg.com/@videojs/http-streaming/dist/videojs-http-streaming.js"></script>
<script>
var player = videojs('my_video_1');
</script>
</body>
</html>