关于H5以及Flash播放（实时/直播、历史/点播）视频的一些case

文章目录

关于老项目中遗留的使用Adobe Flsah播视频
- 解决方案
- QA
- PS
关于使用H5播放视频
- 举个栗子
- PS

前端项目中处理 实时（直播）监控视频、 历史（点播）回放视频的应用方案。视频服务商海康、启迪、锐明等等，提供的 H.264编码 视频流，具体的类型有 RTMP、HLS、FLV、MP3等流。

关于老项目中遗留的使用Adobe Flsah播视频

关于Adobe Flash下架：

Adobe Flash Player 官方通知 2021年1月12日，不再支持Flash，并且使用Flash Player会被block掉，并提示上述图片信息。

解决方案

使用视频服务商提供的HLS、FLV视频流，直接用H5播放视频，不依赖flash。
存在的弊端：视频服务器给的是http协议的与项目服务器https的冲突，要加白名单允许https站点访问不安全（http）内容。
chrome保持现在的版本不升级。
即：chrome 版本 87.0.4280.141（正式版本） (x86_64) 于2021年1月12日发布。之前的版本不升级即可。
已有的2020年已交付验收项目，暂时采用该方式。
如果误操作升级到了最新版的chrome，如chrome 87.0.4280.141，可以替换本机的flash来解决。（测试过mac版的可以继续使用flash播放rtmp，但不推荐使用该方案）
安装基于 Chromium 的 Opera 、Chrome浏览器的flash - PPAPI：Adobe flash：install_flash_player_osx_ppapi 安装包，flash版本-34。下载地址：https://www.flash.cn/

QA

mac中怎么禁止chrome浏览器自动升级？
setp1: 打开终端到目录：
```
cd /Library/Google/GoogleSoftwareUpdate
```
setp2: 删除文件夹：
```
sudo rm -rf GoogleSoftwareUpdate.bundle/
```
视频上提示Adobe Flash Player 不再受支持？
chrome浏览器2021-01-26 v88.x版本后，直接提示Adobe Flash Player，也不会跳转至flash中国。处理方式：
step1：彻底退出当前浏览器；
step2：下载安装chrome v87 之前的版本了；
step3：下载安装基于 Chromium的PPAPI；
step4：重新打开浏览器即可（注意禁止自动升级）；

PS

Flash中国官方通告：

根据Adobe使用协议规定，若您是一家营利事业或组织，或以商业目的使用Flash时（包含内嵌及调用），均需得到Adobe或Adobe的授权代表出具的官方有效授权许可。

具体查阅：https://www.flash.cn/notice/notice?id=138

关于使用H5播放视频

直接针对项目使用开源免费、MIT License的插件，比如：使用hls.js播放视频服务商提供的.m3u8的hls视频流，B站开源的Flv.js来播flv视频流等，也可以使用ckplayer、西瓜player、xxxxplayer等等。

举个栗子

项目中使用了多种类型的视频流，贴点代码片段：

 this.$nextTick(() => {this.videoStreamType === 'flv' ? this.playVideoByFlvJS() : this.playVideoByCkplayer();});// H5播放flv的直播视频流：http://xx.xx.xx.xx:xx/live.flvplayVidepByFlvJS() {if (flvjs.isSupported()) {var flvPlayer = flvjs.createPlayer({type: 'flv',url: this.videoUrl});flvPlayer.attachMediaElement(this.videoContainer);flvPlayer.load();flvPlayer.play();}}// H5播放hls流或者flash播rtmp流等。这里用了插件ckplayer X3里面也是集成了HLS.js// hls视频流：http://xx.xx.xx.xx:xx/hls/live.m3u8// 引入ckplayer的原因是一些老项目还在继续使用flash播rtmp的视频流，便于维护playVideoByCkplayer() {const option = {container: `#${this.videoId}`,variable: 'player',live: true,autoplay: true,video: this.videoUrl};const player = new ckplayer(option);}

PS

目前没有能在浏览器中统一播放任何视频流的技术方案，还是需要RD做相应的适配。
再补充一点：
视频在本地（localhost或者http://ip）播放正常，但是项目部署在https上时，会触发：混合内容限制（F12控制台内报错：Mixed Content）导致的视频无法播放：

有如下几种解决方案：

通过网站设置，允许直接不安全（http）资源混入，如：
使用低版本的chrome客户端，如82版以下，不会自动upgrade。
点击历史视频时，自动打开一个新的网页播放视频，从而避免了https、http混合内容限制的问题。