html播放flv直播源,使用flv.js与video.js实现播放视频直播(简教程)

1.准备

(￣▽￣)／ 以上软件请大家自行解压或安装

2.环境配置

首先运行livego

运行livego效果

安装与运行OBS

打开设置 配置流服务器

配置连接

配置连接

连接成功后livego会有提示

提示

载入源

效果

进入nginx下的html目录,新建个index1.html与index2.html

然后运行 nginx (运行前自行修改nginx端口)

2.使用flv.js实现直播播放

之前我写过教程《flv.js简单使用示例》

吧之前的代码稍作修改

代码:

flv.js demo

.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;

}

Your browser is too old which doesn't support HTML5 video.

开始

暂停

停止

跳转

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);

}

如果浏览器开始播放视频那说明你已经成功

效果

3.使用video.js实现直播播放(HLS)

教程

但是实际测试时失败了罒ω罒

所以就使用 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

顺便说下 好像

代码:

demo

var myPlayer = videojs('example_video_1');

videojs("example_video_1").ready(function () {

var myPlayer = this;

myPlayer.play();

});

效果