溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

解決手機微信瀏覽器視頻自動播放和默認全屏問題

發(fā)布時間:2020-07-21 09:42:01 來源:網(wǎng)絡 閱讀:10695 作者:取什么昵稱 欄目:web開發(fā)

1.早期因為帶寬和流量的因素,移動端瀏覽器禁止視頻自動播放,現(xiàn)在現(xiàn)在流量便宜了、手機硬件越來越好了,部分可支持了
2.在移動端瀏覽器, video 在用戶點擊播放或者通過API video.play() 觸發(fā)播放時,會強制以全屏置頂?shù)男问竭M行播放,設(shè)計的初衷可能是因為全屏能提供更好的用戶體驗

<video  controls="controls" src="" id="ckplayer_a1" x5-video-player-type="h6" preload="metadata" playsinline="true"
            webkit-playsinline="true"  x-webkit-airplay="true"x5-video-orientation="portraint" x5-video-player-fullscreen="true">
</video>

playsinline="true" webkit-playsinline="true 解決ios自動播放全屏問題

x5-video-player-type="h6" x5-video-player-fullscreen="true" 解決安卓同層級播放

3.ios微信下通過 WeixinJSBridgeReady 事件進行自動播放

document.addEventListener(
    'WeixinJSBridgeReady',
    function() {
        var video = document.getElementById("ckplayer_a1");
        video.play();
    },
    false
);

安卓可以嘗試監(jiān)聽touchstart事件,用戶觸摸屏幕后自動播放

document.addEventListener('touchstart', function(){ 
    var video = document.getElementById("ckplayer_a1");
        video.play();
}, false);

4.推薦幾個好用的第三方SDK播放器
ckplayer:http://www.ckplayer.com/
阿里云:https://player.alicdn.com/aliplayer/presentation/index.html?type=preview
騰訊:https://cloud.tencent.com/document/api/267/5706
七牛的:https://developer.qiniu.com/pili/sdk/4621/web-player-sdk

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI