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

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

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

关于Adobe Flash下架：

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

解决方案

1. 使用视频服务商提供的HLS、FLV视频流，直接用H5播放视频，不依赖flash。
   存在的弊端：视频服务器给的是http协议的与项目服务器https的冲突，要加白名单允许https站点访问不安全（http）内容。
2. chrome保持现在的版本不升级。
   即：chrome 版本 87.0.4280.141（正式版本） (x86_64) 于2021年1月12日发布。 之前的版本不升级即可。
   已有的2020年已交付验收项目，暂时采用该方式。
3. 如果误操作升级到了最新版的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

1. mac中怎么禁止chrome浏览器自动升级？
   setp1: 打开终端到目录：

   cd /Library/Google/GoogleSoftwareUpdate
   

   setp2: 删除文件夹：

   sudo rm -rf GoogleSoftwareUpdate.bundle/
   

2. 视频上提示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.flv
	playVidepByFlvJS() {
        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）导致的视频无法播放：

有如下几种解决方案：

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