admin管理员组

文章数量:1564192

1.早期因为带宽和流量的因素，移动端浏览器禁止视频自动播放，现在现在流量便宜了、手机硬件越来越好了，部分可支持了
2.在移动端浏览器， video 在用户点击播放或者通过API video.play() 触发播放时，会强制以全屏置顶的形式进行播放，设计的初衷可能是因为全屏能提供更好的用户体验

  1. <video controls="controls" src="" id="ckplayer_a1" x5-video-player-type="h5" preload="metadata" playsinline="true"

  2. webkit-playsinline="true" x-webkit-airplay="true"x5-video-orientation="portraint" x5-video-player-fullscreen="true">

  3. </video>

playsinline="true" webkit-playsinline="true 解决ios自动播放全屏问题

x5-video-player-type="h5" x5-video-player-fullscreen="true" 解决安卓同层级播放

3.ios微信下通过 WeixinJSBridgeReady 事件进行自动播放

  1. document.addEventListener(

  2. 'WeixinJSBridgeReady',

  3. function() {

  4. var video = document.getElementById("ckplayer_a1");

  5. video.play();

  6. },

  7. false

  8. );

安卓可以尝试监听touchstart事件，用户触摸屏幕后自动播放

 

  1. document.addEventListener('touchstart', function(){

  2. var video = document.getElementById("ckplayer_a1");

  3. video.play();

  4. }, false);

4.推荐几个好用的第三方SDK播放器
ckplayer：http://www.ckplayer/
阿里云：https://player.alicdn/aliplayer/presentation/index.html?type=preview
腾讯：https://cloud.tencent/document/api/267/5706
七牛的：https://developer.qiniu/pili/sdk/4621/web-player-sdk

 

本文标签： 全屏自动播放浏览器手机视频

版权声明：本文标题：解决手机微信浏览器视频自动播放和默认全屏问题 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/xitong/1727475055a1116435.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。