解决在IOS系统及微信中audio、video不能自动播放的问题

最新推荐文章于 2024-07-12 16:06:10 发布

原创最新推荐文章于 2024-07-12 16:06:10 发布 · 5k 阅读

2 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

21 篇文章

订阅专栏

本文详细介绍了在微信浏览器中使用video标签实现视频自动播放时遇到的bug，以及如何通过调用微信JSAPI的WeixinJSBridgeReady()方法来解决这一问题，确保在iOS和Android设备上都能正常工作。

             <video id="shakeVideo" src='video/shakingRedbagVideo.mp4' autoplay="autoplay" controls="controls" style="background:url(img/shaking_bg.jpg);"></video>

bug: 在video标签内定义的属性autoplay，在ios或者android内的微信浏览器是不生效的
利用微信的JSAPI 的WeiixinJSBridgeReady()可以解决视频不能自动播放的问题。

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script> 
              //这样的写法在android 和ios下都不能生效
          $('#shakeVideo').play();
          //必须在weixin JSAPI的WeixinJSBridgeReady才能生效
          document.addEventListener('WeixinJSBridgeReady',function(){
              $('#shakeVideo').play();
          },false);
</script>