video h5 开发 安卓 ios 兼容问题
一、h5 开发video存在多个兼容问题:1、视频自动播放问题a、ios中,video设置muted属性为ture,这时会发现在谷歌浏览器中切换移动时可以实现自动播放,但是到了手机上就不行,手机上必须要求用户手动触发才会播放b、ios中,通过“WeixinJSBridgeReady”触发播放,这个方法只能在微信或企业微信浏览器中生效,且该方法会马上执行,不太适用前期有其他操作而触发,使用此方法需要
一、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属性对象,这里要手动修改一下文件
向外暴露
更多推荐
所有评论(0)