之前的直播都是直接上youtube
今天有個需求 希望能夠不要使用youtube
而且user要能直接用browser看 不需要 vlc
因為之前上看校的直播使用的是 rtmp
查了一下資料
如果要在browser用rtmp
使用的播放程式都必需轉成flash
問題是現在沒有browser支援flash了
所以想到另一個方式
先把串流轉成hls (m3u8)的格式
在srs.conf 裡進行如下的修改
vhost __defaultVhost__ {
hls {
enabled on;
hls_path /usr/local/srs/objs/nginx/html/; (此行依現況調整)
hls_fragment 10;
hls_window 60;
}
}
改完重啟 並進行串流後
會在html生成live目錄及相關的m3u8文件
在client端目前看來只有 safari 能直接在html5 使用 <video> 播放
其他browser都需要再呼叫播放器
參考以下範例
<html>
<head>
<link href="https://vjs.zencdn.net/7.4.1/video-js.css" rel="stylesheet">
</head>
<body>
<video id='my-video' class='video-js' controls preload='auto' width='800' height='600' poster='avatar-poster.jpg'
data-setup='{ "html5" : { "nativeTextTracks" : true } }'>
<source src='http://1.2.3.4:8080/live/livestream.m3u8' type="application/x-mpegURL">
<p class='vjs-no-js'>
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href='https://videojs.com/html5-video-support/' target='_blank'>supports HTML5 video</a>
</p>
</video>
<script src='https://vjs.zencdn.net/7.4.1/video.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"></script>
<script>
var player = videojs('my-video');
player.play();
</script>
</body>
</html>
如果不使用直播而是想播放檔案
就要先把 mp4 轉成 hls
指令如下
ffmpeg -i video.mp4 -codec: copy -start_number 0 -hls_time 15 -hls_list_size 0 -f hls video.m3u8
接下來再依照上述的html範例進行修改
https://caniuse.com/http-live-streaming
https://blog.csdn.net/weixin_40592935/article/details/109361642
