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

<