欧美精品免费观看二区/在线观看av/粉嫩国产精品14xxxxx/亚洲精品视频在线观看免费

公眾號的微信網頁里添加視頻，這就用到了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)