微信h5页面video标签用法总结

写在前面

最近需要在公司公众号的微信网页里添加视频，这就用到了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="">
    
    <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截取视频第一帧作为默认显示的图片。

// 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)
复制代码

转载于:https://juejin.im/post/5c740ff1e51d453eb7802a86