前段时间工作上有需求，需要在web页面上不限制视频播放个数，根据http1.x的协议，同源请求会被浏览器限制，当然不用的浏览器限制请求的个数是不一样的，我们经常用到的chrome是6个，为此做了一些这方面的尝试。接下来通过问题点逐步去解决这些遇到的问题。
页面布局是怎样的？
说明：中间区域是多个视频播放的，不受个数限制，用于播放视频流。视频源区域是每个视频源卡片，支持播放和拖拽功能。
用什么播放器播放flv格式的视频流？
大家都清楚H5支持的video播放器，能支持一些诸如MP4，ogg等格式的视频文件播放，比如基础使用这样
<video src="/i/movie.ogg" controls="controls">
your browser does not support the video tag
</video>
或者用source标签指定类型使用，但是要想播放flv格式的视频，应该用什么播放器呢？
flv格式的播放器，目前用到的主要有以下几种：
- jessibuca jessibuca.monibuca.com/player.html
- flv.js www.jianshu.com/p/b58356b46…
- liveplayer www.liveqing.com/docs/manual…
这些播放器都可以使用，存在的问题有jessibuca播放卡顿现象严重，使用起来文档也不是很友善，flv.js在视频流分辨率高的情况下会出现控制台报错，播放器内部错误很难处理，所以最后选择了liveplayer播放器。
如何实现多窗口播放视频流？
上面我们选择了播放器，能够顺利的播放视频了，但是发现播放的视频个数受到了http协议限制。
如何能不受这个限制呢？
在播放器liveplayer文档中给出了几种处理方式：
浏览器对同源 HTTP/1.x 连接的并发个数有限制, 几种方式规避这个问题：
- 通过 WebRTC 协议访问直播流，如：播放 WebRTC 直播流
- 通过 WebSocket 协议访问直播流，如：播放 WS-FLV 直播流
- 开启 HTTPS, 通过 HTTPS 协议访问直播流 综合这几种处理方式，我们选择了第二种方式去解除这种限制。websocket + flv，当然，其他人在选择的时候也可以选择其他方式处理
浏览器播放视频数量太多导致内存溢出怎么办？
浏览器同时播放视频数量比较大，会导致内存溢出，使得浏览器页面崩溃掉。 如何处理这个问题呢？ 我觉得最好的方法是产品设计上避免这种设计方案。 如果不能设计上避免，其他方式呢？ 改变播放视频流的码率和分辨率（但是这样会使用体验下降） 增加设备的内存（不可取，不限制数量的情况下，内存不可能无限增加） 通过做一些其他优化方式处理（比如将视频用图片代替）
后记
产品体验上的优化，需要很多方面的结合，开发没必要什么都答应下来做，试着推动产品设计才是最好的方案。
