1. 程式人生 > >微信H5同層播放器以及視訊自動播放

微信H5同層播放器以及視訊自動播放

iOS之前已經解決了視訊播放預設全屏,且浮在頁面最頂端的問題

playsinline

webkit-playsinline

這樣就可以在視訊之上進行一些操作,實現諸如彈幕、自定義播放控制元件等的效果。
但是安卓端卻一直遲遲沒有一種比較完美的解決方案,直到騰訊規範了H5同層播放器
在安卓端啟用H5同層播放器也是十分的簡單:

x5-video-player-type="h5"

同時也可根據專案需要選擇是否開啟全屏的同層播放器:

x5-video-player-fullscreen="true"

有的時候因為視訊的尺寸問題,設定全屏以後橫向或者縱向會留有空邊,此時再配合css屬性:

object-fit:fill



這個屬性是設定替換元素的內容應該如何適應到其使用的高度和寬度確定的框。

另外近期有一種很流行的H5模式:一進入頁面是一段很酷炫的視訊,視訊播放完畢後會有一個頁面,上面承載一些業務需求的模組。這種H5大多數需要用到視訊自動播放的功能,同樣的,在iOS端已經有很多種hack方法解決(各種事件監聽),網上有很多方法,這裡記錄了目前可用的兩種。

第一種:使用微信的wx.ready事件,首先要引入一個js檔案

<script src=" https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

頁面裡部署js程式碼:

function autoPlayAudio() {
    wx.config({
        // 配置資訊, 即使不正確也能使用 wx.ready
        debug: false,
        appId: '',
        timestamp: 1,
        nonceStr: '',
        signature: '',
        jsApiList: []
    });
    wx.ready(function() {
        document.getElementById('media').play();//video標籤id=media
}); } autoPlayAudio();


第二種:監聽WeixinJSBridgeReady事件

var ua = navigator.userAgent;
var vi = document.getElementById('media'); document.addEventListener("WeixinJSBridgeReady", function onBridgeReady() {
    if (ua.indexOf("iPhone") > 0) {
        vi.play();
    } else if (ua.indexOf("Android") > 0) {
        vi.play();
        if (vi.currentTime === 0) {
            alert('1');
            //這裡的定時器你可以不需要,也可以變成你需要的事件,而且也不一定在這個位置,主要是裡面的play
            vi.play();
        }
    }
});


然而不幸的是,安卓端目前還沒有穩定可用的視訊自動播放方案,所以在設計時需考慮新增一個播放按鈕,或者將播放事件繫結在touchstart上來近似的達到想要的效果。