前言
在做网页项目的时候，特别是做大屏可视化项目或者政府项目，往往会遇到在网页播放视频监控的需求，在面对不同的开发环境，会有不同的视频接入方案，下面我会介绍我在项目中遇到的一些场景，以及使用的方案。
视频服务
在我接触的项目里，摄像头的厂家如华为，海康都有一个视频平台，提供各种格式的视频流服务，当然为了对摄像头部署一些AI的算法，也可能引入非摄像头厂家的视频平台，但不管怎么样，都是有一个视频平台提供视频流服务，网页只需要和视频平台提供的接口进行对接。
目前我遇到的视频流服务有m3u8，flv，rtsp，有些平台能提供能提供几种格式的服务，有些只能提供一种，不同的格式有他的优缺点，这也是有不同接入方案的原因。
从编码格式来说有h265和h264，一般来说，在网页上支持最好的是h264，大多数浏览器不能播放h265格式的视频流，我在项目遇到h265格式的视频流都是要求视频平台把视频转成h264之后再推出来，问就是搞不了，哈哈。
场景一
这算是第一次接入视频监控的项目了，当时没想到一上来就是比较麻烦的情况，现场的视频平台只提供rtsp流的视频服务，当时我直接表达了前端无法直接播放的意见，后来和同事讨论之后决定通过转码的方式推送网页可直接播放的格式。
这种方案按理是没什么毛病的，也通过网上的学习最后是把转码服务建立起来了，也能成功推送出可播放的m3u8文件，但是由于后台的同事缺乏对ffmpeg和转码服务的了解，导致转码的质量不好，具体表现如下；
- 视频播放响应慢
- 转码服务不稳定
但是最终也以这种方式交付了，总的来说是一次较差的交付质量。
场景二
现场视频平台同样只提供rtsp的视频服务，吸取了上一次使用转码服务播放效果不好的经验，我们几个同事分析转码服务还是需要比较熟悉的人来做，所以这次我们决定跟视频平台的人沟通是否能直接提供m3u8的视频服务，经过几次的沟通，最终他们还是提供不了网页直接播放的视频格式（我也不知道为啥，这对视频平台是件很麻烦的事？），但是最终他们提供了一个自研但不再维护（听着就有坑）的window插件，说可以再网页唤起插件直接播放rtsp视频流。
这种方案属于借助电脑软件播放了，通过websocket在网页和软件之间建立连接，网页端发送各种指令，从而实现网页交互，但是也有其优缺点，我个人体验下来有以下观点：
优点
- 可直接播放包括rtsp格式在内的大多是视频流服务
- 播放效果好
缺点
- 要使用网页查看视频的电脑需要手动安装插件
- 开发难度大（仅对当前这个插件），代码封装不友好，使用起来要写大量代码
- 交互不友好，本质上是是用window窗口的方式播放，所以网页需要发送指令去控制窗口的显隐/窗口大小/位置，而且由于是window窗口，所以视频窗口在显示的情况下是层级是高于网页的，适合在固定的屏幕没有过多交互如可视化显示大屏场景下，在交互复杂的场景，会显得很不协调，且需要大量的代码处理视频窗口显示问题。
场景三
视频平台能提供m3u8/flv这些网页能直接播放的视频流服务，前端使用js插件就能很轻松播放，使用video.js播放m3u8，flv.js播放flv，也可以使用livePlayer或easyPlayer同时支持两个格式。
当时我使用的是livePlayer播放器，因为官方文档够简洁，易用，一套代码同时支持多种格式。
遇到的问题
一开始我用的m3u8的播放格式，因为我比较了两个格式的播放速度，前者响应速度更快，但后来发现m3u8的延迟太大了，没办法只能换成flv的，虽然换起来简单，但是响应速度太慢了，基本上要一分钟左右才显示画面。 后面没办法只能上报项目组，后来项目组跟视频平台的技术人员沟通，发现问题在于视频平台，后面就让其进行优化，最终能达到1~3秒出画面的效果。
总结
- 对于rtsp这种网页无法直接播放的视频流，需要中间服务器转码再推送给网页播放，播放效果受转码服务的质量影响；或者使用电脑播放插件如猿大师/海康直接播放，有最好的播放效果。
- 而对于m3u8和flv这种网页能直接播放的视频流，可以使用video.js/flv.js/livePlayer等播放器播放，个人比较推荐livePlayer,但是需要通过script引入。