zoukankan      html  css  js  c++  java
  • ios微信h5音频audio无法自动播放

    iPhone手机音频、视频无法自动播放?

    通过下面的方式可以解决,在iPhone手机微信中正常自动播放。

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

    测试了90%的iPhone机型,大部分直接调用audio的play方法就可以自动播放了,但是一些奇葩iPhone机不可以

    <audio preload="preload" controls id="audio" src="audio.mp3" loop></audio>
    <video id="video" controls="" preload="none" mediagroup="myVideoGroup" poster="video.png">
          <source id="mp4" src="video.mp4" type="video/mp4">
          <source id="webm" src="video.webm" type="video/webm">
          <source id="ogv" src="video.ogv" type="video/ogg">
          <p>您的浏览器不支持</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('audio').play();
            document.getElementById('video').play();
        }, false);
    </script>

    最近又发现一个问题,Android不能同时播放两个音频? @李猜猜回答:因为ready只会触发一次,所以不能播放多个音频。但是如果需要播放多个音频,其实只要调用一下eixinJSBridge进行包裹即可。 示例代码如下

    function playAudio() {
        if (setting.autoplay) {
            if (window.WeixinJSBridge) {
                WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
                    audio.play();
                }, false);
            } else {
                document.addEventListener("WeixinJSBridgeReady", function () {
                    WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
                        audio.play();
                    });
                }, false);
            }
            audio.play();
        } else {
            audio.pause();
        }
        return false;
    }
  • 相关阅读:
    git 获取之前某个版本
    mysql默认查询顺序
    tp5链式查询fetchSql(true)方法
    微信中关闭网页输入内容时的安全提示
    SourceTree + BeyondCompare 配置 + 使用教程
    SourceTree 免登录跳过初始设置
    git 常规发布流程
    Git常用操作命令
    手动安装phpRedisAdmin
    docker-compose快速搭建lnmp+redis服务器环境
  • 原文地址:https://www.cnblogs.com/yangwenzhi/p/7678188.html
Copyright © 2011-2022 走看看