hls.js推流

hls.js推流_第1张图片

然后去github 官网下载文件

看demo是点播还是直播,找到vod 或者看进度条

hls.js推流_第2张图片

hls.js推流_第3张图片

然后验证git上的官网是否能播放出来,最主要的播放原因是他是点播。

hls.js推流_第4张图片

然后找到直播源,

打开一个新的标签

hls.js推流_第5张图片

hls.js推流_第6张图片

然后这个srver就跑起来了。

然后推流

hls.js推流_第7张图片

等待1俩秒钟,帧数达到一,200左右。

现在做的是m3u8文件,所以把直播地址复制一下,

hls.js推流_第8张图片

然后修改hls/index.js文件里的地址

hls.js推流_第9张图片

刷新页面正常播放

然后在浏览器里看m3u8文件 是直播还是点播。而且m3u8文件一值在变

hls.js推流_第10张图片

虽然有进度条,但是进度条的时间一直在变。,所以还是直播

很多东西hls并没有帮我们完成,但是hls小巧。用vedio.js搞直播,体积比较大,因为功能比较多,不易修改;

用hls如何把ui界面给该一下呢

hls.js推流_第11张图片

然后编写css文件

hls.js推流_第12张图片

把直播地址换成demo的地址,方便演示

在调css的时候,不让视频播放,可以把

hls.js推流_第13张图片

如何出现暂停和播放的图标呢,使用伪元素

hls.js推流_第14张图片

hls.js推流_第15张图片

如何控制播放和暂停呢

hls.js推流_第16张图片

hls.js推流_第17张图片

点击播放,播放了,再点击一下停止了,此时完成了对按钮的控制。

如何暂停之后,让他自动消失,如何又自动出来呢

hls.js推流_第18张图片

hls.js推流_第19张图片

hls.js推流_第20张图片

通过css的控制我们完成了,如何对video的状态进行控制呢

hls.js推流_第21张图片

hls.js推流_第22张图片

hls.js推流_第23张图片结果发现,点击播放按钮之后,就没再出来暂停按钮,

点击video的任何一个地方,都可以实现play 和palyer pause 的切换;

hls.js推流_第24张图片

这样,点击暂停和播放就可以切换了。

那如何实现,一个显示一个视频的播放状态呢,比如live或者告诉观看者是直播状态这样的字段

hls.js推流_第25张图片

hls.js推流_第26张图片

如何实现播放的时候,才显示正在直播字段呢

hls.js推流_第27张图片

这就是实现了播放的时候显示正在直播,停止播放的时候,字段消失;

 

你可能感兴趣的:(h5视频直播)