写在前面

最近需要在公司公众号的微信网页里添加视频,这就用到了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)
复制代码