使用flv.js与video.js实现播放视频直播(简教程)
2017-12-01 本文已影响3714人
关爱单身狗成长协会
推荐教程:《使用flv.js做直播》
1.准备
1.下载 nginx
2.下载 livego
3.下载 OBS
4.引用 flv.js
5.引用 video.js
(￣▽￣)／ 以上软件请大家自行解压或安装
2.环境配置
首先运行livego
运行livego效果
安装与运行OBS
打开设置 配置流服务器
配置连接
配置连接
连接成功后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
代码:
<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>
效果
