写在前面
最近需要在公司公众号的微信网页里添加视频,这就用到了HTML5
的新标签video
。微信浏览器对不同手机的video
标签兼容性不一致,导致我在实际使用中遇到了各种问题,因此在这里简要总结一下。
内联播放
video
标签默认全屏播放,安卓手机在点击播放按钮之后会自动切换到全屏播放,但是产品一般都要求内联播放。
- IOS手机:
video
标签添加playsinline
webkit-playsinline
<video id="video" ref="myVideo" controls preload="auto" src="/static/audio/ios-ct.mp4" poster="@/assets/cover.png" webkit-playsinline playsinline></video>
复制代码
- Android:
video
标签添加x5-playsinline
,注意不与x5-video-player-type='h5'
x5-video-player-fullscreen='true'
一起使用
<video id="video" ref="myVideo" src="/static/audio/andr-ct.mp4" poster="@/assets/cover.png" x5-playsinline></video>
复制代码
注意:安卓使用x5-playsinline
之后,当开始播放视频时,视频的层级会自动变为最高层。如果此时当前页面有弹窗,会被视频遮挡住。
解决方案:在该视频上面添加遮罩层,点击遮罩层播放视频并隐藏遮罩层。当点击按钮触发弹窗时,暂停并隐藏视频,与此同时显示遮罩层。
- 遮罩层
<div id="wrapper">
<!-- 遮罩图 -->
<img class="bg" src="@/assets/cover.png" alt="">
<!-- 播放按钮(vue语法) -->
<div @click="play">
<img class="play" :src="img" alt="">
</div>
</div>
复制代码
- 点击播放视频时
play() {
const wrapper = document.getElementById('wrapper')
const video = document.getElementById('video')
// video.addEventListener('pause', function () {
// wrapper.style.display = 'block'
// })
// 视频播放结束触发
video.addEventListener('ended', function () {
wrapper.style.display = 'block'
})
// 退出全屏播放触发
video.addEventListener("x5videoexitfullscreen", function () {
wrapper.style.display = 'block'
})
video.style.display = 'block'
wrapper.style.display = 'none'
video.play()
}
复制代码
- 点击按钮触发弹窗时
next() {
const wrapper = document.getElementById('wrapper')
const video = document.getElementById('video')
// 仅针对安卓手机
if (!this.isIphone) {
video.pause()
wrapper.style.display = 'block'
video.style.display = 'none'
}
if (this.first || this.second || this.third) {
this.$router.push('/completeSet')
} else {
// 触发弹窗
this.isSetPop = true
}
},
复制代码
poster属性不生效
poster
属性在视频未播放时默认显示第一帧的图像。
- IOS手机:视频未播放时显示空白,表现为“一张白纸上面有个播放按钮”
- Android:视频未播放时显示视频的第一帧作为背景图
// canvas截取视频第一帧作为图片
const wrapper = document.getElementById('wrapper')
const video = document.getElementById('video')
const cut = function () {
let canvas = document.createElement("canvas"); // 创建画布
canvas.width = video.videoWidth;
canvas.height = video.videoHeight; // 设定宽高比
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height); // 将视频此刻帧数画入画布
let img = document.createElement("img");
img.src = canvas.toDataURL("image/png");
wrapper.appendChild(img); // 写入到Dom
};
video.addEventListener('loadeddata', cut); // 在视频帧数已加载时执行截取
复制代码
自动播放视频
- IOS手机:监听微信
WeixinJSBridgeReady
事件触发自动播放 - Android:不能自动播放,必须引导用户手动触发
// 视频自动播放
const video = document.getElementById('video')
video.play()
document.addEventListener("WeixinJSBridgeReady", function () {
video.play()
}, false)
//Android 安卓无法自动播放
document.addEventListener('touchstart', function () {
video.play()
}, false)
复制代码