一、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属性对象,这里要手动修改一下文件
向外暴露在这里插入图片描述

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐