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
<video src="./test.mp4" width="400" height="200" controls controlslist="nodownload nofullscreen"></video>
- 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
<body>
<video class="video-js vjs-default-skin" controls="controls" width="375" height="300" id="player1" webkit-playsinline>
<source src="rtmp://wsrtmp.yizhibo.tv:1935/live/0p4kf8k3Aubp" type='rtmp/mp4'>
</video>
<script type="text/javascript" src="lib/video.min.js"></script>
<script>
videojs.options.flash.swf = "lib/video-js.swf";
</script>
<script type="text/javascript">
var player = videojs('player1', {}, function() {
console.log('Good to go!');
this.play();
this.on('ended', function() {
console.log('awww...over so soon?');
});
});
</script>
</body>
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
网友评论