這篇文章主要介紹了解決手機(jī)微信瀏覽器視頻自動(dòng)播放和默認(rèn)全屏問題(示例代碼)以及相關(guān)的經(jīng)驗(yàn)技巧，文章約1077字，瀏覽量435，點(diǎn)贊數(shù)6，值得推薦！

1.早期因?yàn)?strong>帶寬和流量的因素，移動(dòng)端瀏覽器禁止視頻自動(dòng)播放，現(xiàn)在現(xiàn)在流量便宜了、手機(jī)硬件越來越好了，部分可支持了
2.在移動(dòng)端瀏覽器， video 在用戶點(diǎn)擊播放或者通過API video.play() 觸發(fā)播放時(shí)，會(huì)強(qiáng)制以全屏置頂?shù)男问竭M(jìn)行播放，設(shè)計(jì)的初衷可能是因?yàn)槿聊芴峁└玫挠脩趔w驗(yàn)

<video controls="controls" src="" id="ckplayer_a1" x5-video-player-type="h5" 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自動(dòng)播放全屏問題

x5-video-player-type="h5" x5-video-player-fullscreen="true" 解決安卓同層級(jí)播放

3.ios微信下通過 WeixinJSBridgeReady 事件進(jìn)行自動(dòng)播放

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

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

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

?<video id="videoPlay1" poster="images/bg.jpg" playsinline="false" ?x5-video-player-type="h5" ? autoplay="autoplay" loop="loop">
? ? <source src="images/bg.mp4" type="video/mp4">
? ? <!-- poster="images/bg.jpg" -->
? ? </video>

$(function(){
? ? var video=document.getElementById("videoPlay1");
? ? //video.play();//無效

//$(window).scroll(function(){//無效
? ?//? ?video.play(); ?
? //? });

? ? $('body').click(function(){//有效
? ? ? ? video.play();
? ? });
? ?

});

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，本文為博主原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接和本聲明。

總結(jié)

以上是生活随笔為你收集整理的微信浏览器视频自动播放的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。