HTML5 Video Player for Mac是一款视频编码为HTML5视频兼容格式和嵌入的软件，您可以使用此软件将您自己的网站嵌入到HTML5播放器中。
防范措施
这篇文档的密码原来是小编放在下载地址里的，大家稍微细心一点就能找到。 不过，显然还是有很多偷懒的人，小编已经重新打包了，没有密码。
特征
* 支持的视频文件格式：包括兼容MP4、WebM等的HTML5视频）。
* 支持在所有现代和旧式网络浏览器中播放 HTML5 视频和 Flash。
*兼容ipad、iPhone和联通设备。
HTML5视频播放器是一款集成视频转换器功能的软件。 它可以转换几乎所有视频格式并编码为所有流行浏览器所需的 HTML5 视频兼容格式：包括 MP4、WebM、Ogg。
HTML5视频播放器软件还提供了基本的视频编辑功能html5视频网站，您可以预览、装饰、旋转和翻转您的视频源文件。
HTML5 视频播放器软件可在所有流行的网络浏览器中播放在线视频。 视频播放器采用HTML5视频标签，兼容所有最新版本的浏览器Firefox，包括IE9、Chrome、Opera、iPhone/ipad/Android手机浏览器。 虽然 HTML5 视频不支持旧版浏览器，但 HTML5 视频播放器软件将回退到 Flash 对象来播放您的视频html5视频网站，确保您的视频游戏在所有浏览器中顺利运行。
相关版本下载
PC版 安卓版 iPhone版 Mac版 iPad版
服务器返回一个m3u8播放列表，实时更新，通常一次给出5条数据的url。
客户端解析m3u8播放列表html5播放器下载，依次请求各段的url，获取ts数据流。
简单的过程
HLS 直播延迟
我们知道hls协议将直播流分成小块视频来下载播放，因此假设上面的列表包含5个ts文件，每个ts文件包含5秒的视频内容，那么整体延迟为25秒。 因为当你听到那些视频的时候，主持人已经把视频录制好并上传了，所以就有这样的延迟。 当然，可以减小列表的厚度和单个ts文件的大小来增加延迟。 最终，列表的宽度可以减少到1，ts的持续时间可以减少到1shtml5播放器下载，但这会减少请求数量，增加服务器的压力。 时间慢会导致更多的缓冲，所以苹果官方推荐的ts持续时间是10s，所以这会大大改变30s的延迟。 参考资料：（复制此链接并在浏览器中打开）
视频直播的整个流程是怎样的？
视频直播时大致可以分为
视频录制端：一般是笔记本上的音视频输入设备或者手机端的摄像头、耳机。 目前，以移动端的手机视频为主。
视频播放器：可以是笔记本上的播放器，也可以是手机上的原生播放器，也可以是h5的视频标签等，目前以手机上的原生播放器为主。
视频服务器端：一般是nginx服务器，用于接受视频录制端提供的视频源，同时向视频播放端提供流媒体服务。
简单的过程
如何采集音频、视频？
首先澄清几个概念：
下面将使用ios上的摄像头采集音视频数据，主要分为以下步骤：
对于音视频的采集，在ios中，可以使用AVCaptureSession和AVCaptureDevice来采集原始音视频数据流。
对视频进行H264编码，对音频进行AAC编码，ios中已经有封装好的编码库来实现音视频的编码。
将编码后的音视频数据进行组装和封装；
建立RTMP连接并将其推送到服务器。
ps：由于大部分编码库都是C语言编译的，所以使用时需要编译。 对于ios，可以使用已经编译好的编码库。
x264编码：（复制此链接在浏览器中打开）
faac编码：（操作同上）
ffmpeg编码：（操作同上）
至于如果想要给视频添加一些特效，比如减少滤镜等，通常会在编码之前使用滤镜库，但是这样也会造成一些耗时，导致视频上传有一定的延迟数据。
简单的过程
前面提到的ffmpeg是什么？
和之前的x264一样，ffmpeg其实是一套编码库，和Xvid类似，Xvid是基于MPEG4协议的编解码器，x264是基于H.264协议的编码器，ffmpeg集成了各种音视频编解码器的解码契约。 通过设置参数，即可完成基于MPEG4、H.264等协议的编解码。 这里的演示使用x264编码库。
什么是 RTMP？
实时消息协议（简称RTMP）是由Macromedia开发的一组实时视频合约，现在由Adobe所有。 与HLS一样，它可以应用于直播视频。 不同的是基于flash的RTMP不能在ios浏览器中播放，但实时性能比HLS好。 所以这些合约通常用来上传视频流，即将视频流推送到服务器。
下面是hls和rtmp的对比：
推流
所谓推流，就是将编码后的音视频数据发送到视频流服务器。 一般推流常用rtmp。 您可以使用第三方库librtmp-iOS进行推流。 librtmp封装了一些核心API供用户调用，如果觉得麻烦可以使用现成的ios视频流sdk，它也是基于rtmp的，（复制此链接到浏览器打开）
流媒体服务器搭建
简单简单的流媒体服务器设置，因为我们上传的视频流都是基于rtmp协议的，所以服务器也必须支持rtmp，大概需要以下步骤：
安装 nginx 服务器。
安装nginx的rtmp扩展，目前用的比较多（复制此链接到浏览器打开）
配置nginx的conf文件：
rtmp {
服务器 {
听1935； #监听端口
块大小 4000；
application hls { #rtmp推流请求路径
继续生活；
开启；
hls_路径 /usr/local/var/www/hls;
hls_fragment 5s；
重启nginx，写入rtmp的推流地址为rtmp://ip:1935/hls/mystream，其中hls_path表示生成的.m3u8和ts文件的存储地址，hls_fragment表示分片时长，mysteam表示实例。 生成的文件名可以先任意设置。 更多配置请参考：（复制此链接在浏览器中打开）
按照上面的步骤，一个支持rtmp的视频服务器基本已经实现了。
在html5页面上播放实时视频？
简单来说，使用video标签就可以直接播放hls协议的直播视频：
需要注意的是，对于 video 标签，webkit-playsinline 属性会降低。 该属性是让视频在ios的uiwebview中不全屏播放。 默认情况下，ios会全屏播放视频。 您需要为 uiwebview 设置 allowedInlineMediaPlayback=YES。 业界比较成熟的videojs可以根据不同的平台选择不同的策略，比如ios使用video标签，PC使用flash。
坑点总结
根据以上步骤，作者写了一个demo，从实现ios视频录制、采集、上传，nginx服务器发送直播流，h5页面播放直播视频的整套流程，总结出以下几个坑：
有些陷阱稍后会在这里补充，有些需要贴代码，所以这里就这么多了。
产业支持
目前，腾讯云、百度云、阿里云已经有了基于视频直播的解决方案。 从视频录制到视频播放、推流，有一系列的SDK可以使用。 缺点是需要收费。 如果可以的话，自己实现一套也不难。
演示地址：（复制此链接在浏览器中打开）
参考资料：（复制此链接并在浏览器中打开）
本文为腾讯Bugly独家内容。 转载请在文首注明作者及出处“腾讯Bugly()”
发表评论