之前做一个项目,需要在两个大屏之间加一屏的视频,效果类似三屏竖方向的翻页,只是中间是一个视频,本以为如此简单三两下搞定。没想到。。。
原因在于,IOS与Android对video标签的支持不同,在IOS运行的好好的,放到Android中就各种问题。
一般video标签长这样:
<video
id="start_video"
class="start_video"
style="object-fit:fill;"
playsinline="true"
webkit-playsinline="true"
x-webkit-airplay="allow"
airplay="allow"
x5-video-player-type="h5"
x5-video-player-fullscreen="true"
x5-video-orientation="portrait"
autoplay="autoplay"
muted="true"
src="./assets/demo.mp4"
></video>
解释一下某几个属性:
webkit-playsinline:可以使视频内联播放(解决IOS端,Android不支持);
x5-video-player-type=“true”,x5-video-player-fullscreen="true":这两个可以让Android的视频同层播放(IOS不支持)
style="object-fit:fill":视频充满容器
Android会调起自带播放器并在顶层播放,这是无法避免的,头部会有自带的控件,如此一来需要用户收到点击收起全屏播放,回到主体页面,需要监听当页面播放完毕事件。
video.addEventListener('ended', function () {
//....
}, false)
但当你点击退出全屏的时候你会发现ended事件又触发了一次。这样一来Android端其实会触发两次ended事件。
解决方法是判断终端:
function equipment() {
var u = navigator.userAgent, app = navigator.appVersion;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if (isAndroid) {
console.log('android')
}
if (isIOS) {
console.log('ios')
}
}
当为ios端是监听ended事件,当为android的时候监听 x5videoexitfullscreen,这个事件会在点击退出全屏播放的 '<' 箭头时触发。
这样就可以回到主体页面继续执行其他任务。
if (isAndroid) {
video.addEventListener("x5videoexitfullscreen", function () {
// ...
}, false)
}
if (isIOS) {
video.addEventListener("ended", function () {
// ...
}, false)
}
总的来说IOS全屏播放还是很容易实现的,android还是要具体再做调整。
如有更优方法,请留言告知。