html写出直播间页面,html5

一直喜欢看斗鱼上面dota2比赛,突然有一天对直播很感兴趣,所以了解一下.

流程

pc端采集=> H264压缩 => 推流 => CDN => 播放

协议

HLS协议

video <=> M3U8 => segment-1.ts

M3U8是一个包含很多ts文件地址列表的文本文件,有2种类型

全量列表: 点播使用,包含一段视频所有ts文件

动态列表: 直播使用,动态更新ts文件地址

简单的一个方案,比如斗鱼使用

因为M3U8下面切片了几个ts文件,导致有延时,实时性不太好

HTTP-FLV协议

传送flv格式的视频,http长连接导致没有过多的延迟性

比较综合的一种方案,B站使用

video

attribute

controls 控制面板

poster 第一帧贴图

autoplay 自动播放

muted 静音

loop 循环播放

preload 预加载

var v = document.getElementById('video');

// 音量控制

v.volume = 0.5;

// 播放时间控制

v.currentTime = 60;// 单位：秒

//播放地址切换

v.src = './....MP4'

event

// loadstart

v.addEventListener('loadstart', function (e) {

//开始加载

});

// durationchange

v.addEventListener('durationchange', function (e) {

console.log('durationchange', v.duration);

// 视频长度变化

});

// loadedmetadata

v.addEventListener('loadedmetadata', function (e) {

console.log('loadedmetadata');

//加载数据

});

// loadeddata

v.addEventListener('loadeddata', function (e) {

console.log('loadeddata');

//加载数据结束

});

// progress

v.addEventListener('progress', function (e) {

console.log('progress');

// 加载片段...

});

// canplay

v.addEventListener('canplay', function (e) {

console.log('canplay');

//可以播放

});

// canplaythrough

v.addEventListener('canplaythrough', function (e) {

console.log('canplaythrough');

// 可以流畅播放

});

// play

v.addEventListener('play', function (e) {

console.log('play');

//播放

});

// pause

v.addEventListener('pause', function (e) {

console.log('pause');

//暂停

});

// seeking

v.addEventListener('seeking', function (e) {

console.log('seeking');

// 播放跳转

});

// seeded

v.addEventListener('seeked', function (e) {

console.log('seeded');

//跳转结束

});

// waiting

v.addEventListener('waiting', function (e) {

console.log('waiting');

// 播放等待中

});

// playing

v.addEventListener('playing', function (e) {

console.log('playing');

// 播放中

});

// timeupdate

v.addEventListener('timeupdate', function (e) {

console.log('timeupdate');

// 当前播放时间变化

});

// ended

v.addEventListener('ended', function (e) {

console.log('ended');

// 播放结束

});

// error

v.addEventListener('error', function (e) {

console.log('error', e);

// 加载错误

});

推流

# 安装nginx和rtmp模块

brew install nginx-full --with-rtmp-module

# 安装推流工具

brew install ffmpeg

# 安到哪了

brew info nginx-full

// 打开nginx配置

http {

server {

listen 8080;

location /hls {

# Serve HLS fragments

types {

application/vnd.apple.mpegurl m3u8;

video/mp2t ts;

}

root ...; # 同下方配置

expires -1;

}

}

……

}

// 在http节点后面加上rtmp配置：

rtmp {

server {

listen 1935;

chunk_size 4000;

application rtmplive {

live on;

record off;

}

application hls {

live on;

hls on;

hls_path 绝对路径; # 对应上方root配置

hls_fragment 5s;

}

}

}

下载一个vlc播放器 File=> Open Network 输入rtmp://localhost:1935/rtmplive/...

rtmp推流ffmpeg -re -i 1.mp4 -vcodec libx264 -acodec aac -f flv rtmp://localhost:1935/rtmplive/...

http推流ffmpeg -re -i 1.mp4 -vcodec libx264 -acodec aac -f flv rtmp://localhost:1935/hls/...

封装好的工具推流 ffmpeg -re -i 1.mp4 -c copy -f flv rtmp://localhost:1935/live/movie

框架

目前关于直播有3个成熟的框架

video.js 全家桶框架,包含各种插件与ui样式

hls.js 基于hls协议的直播框架,可以将不兼容hls协议的游览器支持hls协议,一个专注与内核的框架

flv.js bilibili开源的http-flv协议的直播框架,用法与hls差不多

html写出直播间页面,html5

一直喜欢看斗鱼上面dota2比赛,突然有一天对直播很感兴趣,所以了解一下.

流程

pc端采集=> H264压缩 => 推流 => CDN => 播放

协议

HLS协议

video <=> M3U8 => segment-1.ts

M3U8是一个包含很多ts文件地址列表的文本文件,有2种类型

全量列表: 点播使用,包含一段视频所有ts文件

动态列表: 直播使用,动态更新ts文件地址

简单的一个方案,比如斗鱼使用

因为M3U8下面切片了几个ts文件,导致有延时,实时性不太好

HTTP-FLV协议

传送flv格式的视频,http长连接导致没有过多的延迟性

比较综合的一种方案,B站使用

video

attribute

controls 控制面板

poster 第一帧贴图

autoplay 自动播放

muted 静音

loop 循环播放

preload 预加载

var v = document.getElementById('video');

// 音量控制

v.volume = 0.5;

// 播放时间控制

v.currentTime = 60;// 单位：秒

//播放地址切换

v.src = './....MP4'

event

// loadstart

v.addEventListener('loadstart', function (e) {

//开始加载

});

// durationchange

v.addEventListener('durationchange', function (e) {

console.log('durationchange', v.duration);

// 视频长度变化

});

// loadedmetadata

v.addEventListener('loadedmetadata', function (e) {

console.log('loadedmetadata');

//加载数据

});

// loadeddata

v.addEventListener('loadeddata', function (e) {

console.log('loadeddata');

//加载数据结束

});

// progress

v.addEventListener('progress', function (e) {

console.log('progress');

// 加载片段...

});

// canplay

v.addEventListener('canplay', function (e) {

console.log('canplay');

//可以播放

});

// canplaythrough

v.addEventListener('canplaythrough', function (e) {

console.log('canplaythrough');

// 可以流畅播放

});

// play

v.addEventListener('play', function (e) {

console.log('play');

//播放

});

// pause

v.addEventListener('pause', function (e) {

console.log('pause');

//暂停

});

// seeking

v.addEventListener('seeking', function (e) {

console.log('seeking');

// 播放跳转

});

// seeded

v.addEventListener('seeked', function (e) {

console.log('seeded');

//跳转结束

});

// waiting

v.addEventListener('waiting', function (e) {

console.log('waiting');

// 播放等待中

});

// playing

v.addEventListener('playing', function (e) {

console.log('playing');

// 播放中

});

// timeupdate

v.addEventListener('timeupdate', function (e) {

console.log('timeupdate');

// 当前播放时间变化

});

// ended

v.addEventListener('ended', function (e) {

console.log('ended');

// 播放结束

});

// error

v.addEventListener('error', function (e) {

console.log('error', e);

// 加载错误

});

推流

# 安装nginx和rtmp模块

brew install nginx-full --with-rtmp-module

# 安装推流工具

brew install ffmpeg

# 安到哪了

brew info nginx-full

// 打开nginx配置

http {

server {

listen 8080;

location /hls {

# Serve HLS fragments

types {

application/vnd.apple.mpegurl m3u8;

video/mp2t ts;

}

root ...; # 同下方配置

expires -1;

}

}

……

}

// 在http节点后面加上rtmp配置：

rtmp {

server {

listen 1935;

chunk_size 4000;

application rtmplive {

live on;

record off;

}

application hls {

live on;

hls on;

hls_path 绝对路径; # 对应上方root配置

hls_fragment 5s;

}

}

}

下载一个vlc播放器 File=> Open Network 输入rtmp://localhost:1935/rtmplive/...

rtmp推流ffmpeg -re -i 1.mp4 -vcodec libx264 -acodec aac -f flv rtmp://localhost:1935/rtmplive/...

http推流ffmpeg -re -i 1.mp4 -vcodec libx264 -acodec aac -f flv rtmp://localhost:1935/hls/...

封装好的工具推流 ffmpeg -re -i 1.mp4 -c copy -f flv rtmp://localhost:1935/live/movie

框架

目前关于直播有3个成熟的框架

video.js 全家桶框架,包含各种插件与ui样式

hls.js 基于hls协议的直播框架,可以将不兼容hls协议的游览器支持hls协议,一个专注与内核的框架

flv.js bilibili开源的http-flv协议的直播框架,用法与hls差不多