1.準備
1.下載 nginx （可以任意使用一個web服務器）
2.下載 livego
3.下載 OBS （直播推流直播工具）
4.引用 flv.js
5.引用 video.js
(￣▽￣)／ 以上軟件請大家自行解壓或安裝
2.環境配置
首先運行livego （進入可執行文件文件夾 cmd黑窗口輸入 livego， 記得靠譜.livego.json配置文件）
運行livego效果
安裝與運行OBS
打開設置 配置流服務器
配置連接 （url配置要和livego配置文件參數匹配）
配置連接
連接成功後livego會有提示
提示
載入源
效果
進入nginx下的html目錄,新建個index1.html與index2.html
然後運行 nginx (運行前自行修改nginx端口)
2.使用flv.js實現直播播放
之前我寫過教程《flv.js簡單使用示例》
吧之前的代碼稍作修改
代碼:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>flv.js demo</title>
<style>
.mainContainer {
display: block;
width: 1024px;
margin-left: auto;
margin-right: auto;
}
.urlInput {
display: block;
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 8px;
margin-bottom: 8px;
}
.centeredVideo {
display: block;
width: 100%;
height: 576px;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
}
.controls {
display: block;
width: 100%;
text-align: left;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div class="mainContainer">
<video id="videoElement" class="centeredVideo" controls autoplay width="1024" height="576">Your browser is too old which doesn't support HTML5 video.</video>
</div>
<br>
<div class="controls">
<!--<button onclick="flv_load()">加載</button>-->
<button onclick="flv_start()">開始</button>
<button onclick="flv_pause()">暫停</button>
<button onclick="flv_destroy()">停止</button>
<input style="width:100px" type="text" name="seekpoint" />
<button onclick="flv_seekto()">跳轉</button>
</div>
<script src="./flv.js/flv.min.js"></script>
<script>
var player = document.getElementById('videoElement');
if (flvjs.isSupported()) {
var flvPlayer = flvjs.createPlayer({
type: 'flv',
"isLive": true,//<====加個這個
url: 'http://127.0.0.1:7001/live/movie/a.flv',//<==自行修改
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load(); //加載
flv_start();
}
function flv_start() {
player.play();
}
function flv_pause() {
player.pause();
}
function flv_destroy() {
player.pause();
player.unload();
player.detachMediaElement();
player.destroy();
player = null;
}
function flv_seekto() {
player.currentTime = parseFloat(document.getElementsByName('seekpoint')[0].value);
}
</script>
</body>
</html>
訪問http://127.0.0.1/index1.html
如果瀏覽器開始播放視頻那說明你已經成功
效果
3.使用video.js實現直播播放(HLS)
根據livego教程
教程
那麼 video.js 的播放地址應該是 http://127.0.0.1:7002/live/movie/a.m3u8
但是實際測試時失敗了罒ω罒
所以就使用 ffmpeg 將RTMP轉爲HLS 放到nginx的html目錄下
ffmpeg命令參考:
ffmpeg -i rtmp://127.0.0.1:1935/live/movie/a -c copy -f hls -hls_time 5.0 -hls_list_size 0 -hls_wrap 15 ../html/a.m3u8
ffmpeg
順便說下 好像 dplayer播放器 也是可以的
代碼:
<html>
<head>
<title>demo</title>
<meta charset="utf-8">
<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
<script src="https://unpkg.com/video.js/dist/video.js"></script>
<script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>
</head>
<body>
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264" data-setup="{}">
<source src="./a.m3u8" type='application/x-mpegURL'>
<!-- <source src="http://127.0.0.1:7002/live/movie/a.m3u8" type='application/x-mpegURL'> -->
</video>
<script type="text/javascript">
var myPlayer = videojs('example_video_1');
videojs("example_video_1").ready(function () {
var myPlayer = this;
myPlayer.play();
});
</script>
</body>
</html>
效果
