video h5 开发 安卓 ios 兼容问题

一、h5 开发 video存在多个兼容问题：
1、视频自动播放问题
a、ios中，video设置muted属性为ture，这时会发现在谷歌浏览器中切换移动时可以实现自动播放，但是到了手机上就不行，手机上必须要求用户手动触发才会播放
b、ios中，通过“WeixinJSBridgeReady”触发播放，这个方法只能在微信或企业微信浏览器中生效，且该方法会马上执行，不太适用前期有其他操作而触发，使用此方法需要引入库，代码如下：

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
// 方法使用
document.addEventListener('WeixinJSBridgeReady', () => {
	// player为video对象
   player.play()
})

c、安卓、同ios一样存在a、b、两个问题，但是安卓还存在一个棘手的问题，会自动满屏播放，它的层级都是最高的没有办法覆盖，解决方法是，将MP4视频文件转成ts，再使用JSMpeg插件 绘制到canvas播放
关联链接：https://segmentfault.com/a/1190000020674521
d、ios中解决自动全屏播放的问题，
在video标签加上以下属性：
webkit-playsinline
playsinline
x5-playsinline

2、mp4视频文件转ts，使用canvas绘制播放时 ios没有声音问题
从问题一中引申出的问题，因为没有办法实现自动播放，使用canvas绘制的方式播放，但是在ios中会出现没有声音的问题，最终采取两种方式兼容的方法
示例代码：

initVideo() {
                let _that = this;
                const canvas = document.querySelector('#canvas');
                let video = this.$refs.video;
                let isAndroid = window.navigator.userAgent.match(/android/ig);
                if (isAndroid) { // 安卓
                	// ts文件路径
                     const src = require('../../resource/HomePageAnimation/mp4/lexin_7_birth.ts'); //路径可以是线上路径
                    let player = new JSMpeg.Player(src, {
                        canvas: canvas,
                        autoplay: true,
                        progressive: false,
                        loop: false,
                        audio: true,
                        // poster: require('../../resource/HomePageAnimation/img/ani_end_banner.png'),
                        onVideoDecode: function() {
                            canvas.style.display = 'block';
                        },
                        onPlay: function() { // 开始播放回调
                            _that.isplay = true
                        },
                        onEnded: function() {
                            // 视频播放结束后显示跳转按钮
                            _that.goPage = true;
                            
                        }
                    })
                    this.player = player;
                } else {
                    _that.isplay = true;
                    _that.$refs.video.style.display = 'block';
                }
            },

二、使用JSMpeg插件播放视频操作
1、将mp4文件转ts文件
a、安装转换的工具ffmpeg
https://github.com/BtbN/FFmpeg-Builds/releases
b、转换命令 ，将MP4文件放到工具文件bin目录下，在该目录下打开命令窗口输入以下命令
.\ffmpeg -i test.mp4 -f mpegts -codec:v mpeg1video -b:v 4000k -r 30 -bf 0 -codec:a mp2 -ar 44100 -ac 1 -b:a 128k out.ts
其中参数的相关解释参考JSMpeg REDME
c、下载JSMpeg文件jsmpeg.min.js
项目中引入该文件
，使用方式代码示例如上
下载下来的文件并没有向外暴露JSMpeg属性对象，这里要手动修改一下文件
向外暴露