iOS苹果和微信中音频和视频实现自动播放的方法 - 起点终站

我们应该感谢相遇,无论结局是喜是悲....
iOS苹果和微信中音频和视频实现自动播放的方法
  • 首页 > IT技术
  • 作者:起点终站
  • 2017年1月19日 11:09 星期四
  • 浏览:56936
  • 字号:
  • 评论:1
  • 今天做个网页的时候发现手机端无法自动播放音乐。。。。于是找啊找
    通过下面的方式可以解决,在iPhone手机微信中正常自动播放。

    必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效,猜测微信接口做了处理~


    <audio preload="preload" controls id="car_audio" src="http://odl0tsy9q.bkt.clouddn.com/bainian.mp3" loop></audio> 
    <video id="video" controls="" preload="none" mediagroup="myVideoGroup" poster="http://media.w3.org/2010/05/sintel/poster.png"> 
          <source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4"> 
          <source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm"> 
          <source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg"> 
          <p>Your user agent does not support the HTML5 Video element.</p> 
    </video> 
    <!-- 必须加在微信api资源 --> 
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> 
    <script> 
         //一般情况下,这样就可以自动播放了,但是一些奇葩iPhone机不可以 
         document.getElementById('car_audio').play(); 
        //必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效 
        document.addEventListener("WeixinJSBridgeReady", function () { 
            document.getElementById('car_audio').play(); 
            document.getElementById('video').play(); 
        }, false); 
    </script> 


    亲测可用,但在safari上还是不行,苹果在safri on ios里面明确指出等待用户的交互动作后才能播放media,也就是说如果你没有得到用户的action就播放的话就会被safri拦截

    浏览器的安全设定 这没办法,但至少在微信上可以了,正常也都是微信分享哈哈

      您阅读这篇文章共花了:  
    本文作者:起点终站      文章标题: iOS苹果和微信中音频和视频实现自动播放的方法
    本文地址:https://blog.hellozwh.com/?post=234
    版权声明:若无注明,本文皆为“起点终站”原创,转载请保留文章出处。
    • blogger
    乐赚168网赚博客2017-01-20 13:53
    学习了
    返回顶部| 首页| 手气不错| 网站地图| sitemap| 装逼生成器| 站长介绍|

    Copyright © 2016-2019 起点终站 闽ICP备16011094号-1