這篇文章主要介紹了解決手機微信瀏覽器視頻自動播放和默認全屏問題(示例代碼)以及相關的經驗技巧，文章約1077字，瀏覽量435，點贊數6，值得推薦！

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

<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自動播放全屏問題

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

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

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

安卓可以嘗試監聽touchstart事件，用戶觸摸屏幕后自動播放

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();
? ? });
? ?

});

以上就是本文的全部內容，希望對大家的學習有所幫助，本文為博主原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接和本聲明。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。