h5直播和小程序直播(个人笔记)

image.png

image.png

hls实质上是一种协议，flv是一种视频格式，直播一般使用这两种协议/格式。hls对应的是,ts文件，flv对应的是.flv文件。

三种协议

image.png

image.png

适用移动端
HTTP Live Streaming（HLS）是苹果公司实现的基于HTTP的流媒体传输协议，可实现流媒体的直播和点播。原理上是将视频流分片成一系列HTTP下载文件。hls协议会首先请求m3u8文件，里面是多个视频片段(.ts文件)，在一定时间之内，再重新进行请求，来保证视频是实时播放的。

image.png

image.png

由于大多数移动设备的H5页面的HTML5新的video标签都支持HLS协议，所以在移动端非常适合使用HLS协议进行直播。值得注意的是hls在pc端仅仅支持safari浏览器（因为就是苹果实现的hls技术），所以在类似chrome浏览器上是无法看到视频的。即使在chrome的调试器中模拟移动端还是无法播放视频。

image.png

一个m3u8文件里面包含的不一定是.ts文件，也可能是嵌套的m3u8文件。

image.png

m3u8

m3u8就是一个纯文本文件，不是多媒体的流。
我们再开发的时候要知道播放器支持的版本，不支持的话m3u8文件里面的一些标签和指令就识别不出来。

image.png

image.png

比动态列表多了这两个标签，告诉浏览器列表就这么多，不要再去请求更新m3u8文件了。一般点播就是这样做的。

ts文件

播放器根据这个来区分是哪种视频文件类型。

image.png

image.png

Real Time Messaging Protocol（简称 RTMP）是 Macromedia 开发的一套视频直播协议，现在属于 Adobe。这套方案需要搭建专门的 RTMP 流媒体服务如 Adobe Media Server，并且在浏览器中只能使用 Flash 实现播放器。它的实时性非常好，延迟很小，但无法支持移动端ios 的h5页面播放是它的硬伤。

虽然无法在ios的H5页面播放，但是对于ios原生应用是可以自己写解码去解析的。而且rtmp延迟低，我们公司就采用了rtmp协议。

在pc浏览器端，HTML5video标签无法播放rtmp协议的视频，所以还是需要借用flash去播放。

image.png

image.png

HTTP-FLV协议的延时更短，格式是flv。

image.png

image.png

image.png

image.png

image.png

• controls: 显示视频控件。
• controlslist：控制视频下方控件的属性，nodownload表示不显示下载控件，nofullscreen表示不显示全屏控件。
• poster：视频封面。如果不设置则默认为视频第一帧。
• autoplay: 自动播放。
• muted：静音。在移动端下，如果不设置静音是无法设置自动播放的。
• loop: 循环播放。
• preload: 预加载。
• volume：音量控制。属性值在0到1之间。直接加上属性值没有用，需要用js控制。

image.png

• 播放时间设置：currentTime

image.png

• 视频地址切换：src切换

image.png

• 备用地址切换：source标签

当第一个视频地址播放出现问题的时候，会自动播放第二个视频地址。通常会将两个视频地址放在不同域名下。

image.png

• 获取当前(正常)播放地址: currentSrc

image.png

image.png

• 监听视频开始加载: loadstart

image.png

• 视频时长变化: durationchange

image.png

在视频初始化的时候拿不到视频时长，等到加载完视频信息的时候才能拿到。时长变化时候有可能只触发一次就拿到总时长，有可能触发多次，每次拿到的是一段时长，跟视频格式有关系。

image.png

image.png

• 监听视频下载

image.png

• 监听视频可以播放

现在已经下载了一部分，有帧可以播放了。

image.png

• 监听视频可以流畅播放

image.png

• 视频播放：play

image.png

• 视频暂停：pause

image.png

• 点击/拖拽进度条触发的事件

image.png

image.png

image.png

image.png

• 监听播放时间变化：timeupdate

image.png

• 监听播放结束：ended

比如视频播放结束之后插入一段广告。

image.png

• 监听播放错误事件：error

image.png

开发

video.js

首先下载相应的包(github)

image.png

hls.js

hls.js更加小巧，而且更容易修改自定义的样式。

image.png

通过js控制点击按钮和视频容器控制视频的播放/暂停状态，以及样式的切换。

image.png

image.png

flv.js

image.png

image.png

小程序直播

官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/live-player.html

小程序直播并不是对所有小程序都开放，只有相关类目的小程序才能开放，而且需要在设置里面打开权限。

image.png

image.png

live-player组件

注意事项：目前开发者工具不支持直播组件live-player的调试，所以必须在真机上进行调试；在真机调试之前，首先手机和电脑连接同一个局域网，然后把流的地址127.0.0.1改成局域网地址。

image.png

image.png

获取本地视频流进行直播

image.png

image.png