微信浏览器视频自动播放

Posted 北方的刀郎

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信浏览器视频自动播放相关的知识,希望对你有一定的参考价值。

这篇文章主要介绍解决手机微信浏览器视频自动播放和默认全屏问题(示例代码)以及相关的经验技巧,文章约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 版权协议,转载请附上原文出处链接和本声明。

以上是关于微信浏览器视频自动播放的主要内容,如果未能解决你的问题,请参考以下文章

微信浏览器视频自动播放

微信浏览器视频自动播放

用微信的浏览器打开有 video 标签播放视频的页面怎么不让它全屏播放呢?

微信公众平台能添加自动播放音乐吗

关于H5视频自动播放问题

h5中利用canvas绘制video 忽略浏览器自带视频播放控件