audio在ios下不自动播放_audio在ios不能自动播放 - CSDN
  • 我们都知道,iOS下的safari是无法自动播放音乐的,主动出发点击事件也没用, 微信自己做了处理后用以下方法可以解决 document.addEventListener("WeixinJSBridgeReady", function () { audio.play(); ...

    我们都知道,iOS下的safari是无法自动播放音乐的,主动触发点击事件也没用,
    微信自己做了处理后用以下方法可以解决

     document.addEventListener("WeixinJSBridgeReady", function () {  
        audio.play();  
     }, false); 
    但是现在实际上在微信ready的时候就可以直接调用了
    
        wx.ready(function() {
                audio.play();  
        });
    展开全文
  • audio设置了自动播放安卓系统上可以自动播放,但是在IOS系统上由于限流机制自动播放,所以要用户触发播放事件才能播放 <audio id="singleDog" autoplay="autoplay" loop="loop"> <source src=...

    audio设置了自动播放,在安卓系统上可以自动播放,但是在IOS系统上由于限流机制不能自动播放,所以要用户触发播放事件才能播放

    <audio id="singleDog" autoplay="autoplay" loop="loop">
          <source src="singleDog.wav" type="audio/wav">
    </audio>

    解决IOS微信环境下不能自动播放

    const singleDog= document.getElementById('singleDog');
    if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
            singleDog.play();
    } else {
        if (document.addEventListener) {
             document.addEventListener("WeixinJSBridgeReady", function() {
                singleDog.play();
             }, false);
        } else if (document.attachEvent) {
             document.attachEvent("WeixinJSBridgeReady", function() {
                singleDog.play();
             });
             document.attachEvent("onWeixinJSBridgeReady", function() {
                singleDog.play();
             });
        }
    }

     

    展开全文
  • 最近微信浏览器中开发踩了很多坑,今天说下iosaudio不自动播放的问题 pc端浏览器和Android微信浏览器中加上autoplay 属性都可以自动播放,只有ios不行。查了资料,可能是ios出于用户体验做的限制?。。...

    微信浏览器中ios 中audio不能自动播放怎么办?

    最近在微信浏览器中开发踩了很多坑,今天说下ios中audio不能自动播放的问题

    在pc端浏览器和Android微信浏览器中加上autoplay 属性都可以自动播放,只有ios不行。查了下资料,可能是ios出于用户体验做的限制?。。(ios不能自动播放audio, Android不能自动播放video。。)

    探索了一个被腾讯和谐掉的接口 WeixinJSBridge,.但是腾讯又没把 WeixinJSBridge 这个 API 所有功能都和谐掉,所以我用WeixinJSBridge的 WeixinJSBridgeReady方法实现了ios的自动播放

    WeixinJSBridge是微信浏览器的内置对象,但不是WebView一打开就有,客户端需要初始化这个对象,当这个对象准备好的时候,客户端会抛出事件 “WeixinJSBridgeReady”,因此,在调用 WeixinJSBridge 相关 api 时,需要做好 WeixinJSBridge 存在与否的判断.

    需要注意的是vue中,在vue中要在第一个加载的页面或者app中初始化,其他页面初始化无法拿到事件WeixinJSBridgeReady。

    <template>
    	<div id="play">
    	  <div class="player">
    	    <video id="video" class="video" controls="controls" x5-video-player-type="h5" x5-playsinline="true" x5-video-orientation="portraint">
    	        <source src="http://cdn.tencent.neigou.com/Public/Home/mobileAsset/images/tencent2018/video5.mp4">
    	    </video>
    	    <audio :src="require('../../assets/audio/signTips.mp3')" class="audio" controls="controls" width="100%" height="100%" preload="auto" playsinline="true" webkit-playsinline="true" x5-playsinline="true" id="audio">
    	    </audio>
    	  </div>
    	</div>
    </template>
    
    mounted() {
       // audio 预先play
       this.audio = document.getElementById('appAudio');
       let isPhone = /iPhone/i.test(navigator.userAgent);
    
       let that = this;
       if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
         that.audio.play();
       } else if(isPhone){
         //监听客户端抛出事件"WeixinJSBridgeReady"
         if (document.addEventListener) {
             document.addEventListener("WeixinJSBridgeReady", function(){
                 that.audio.play();
             }, false);
         } else if (document.attachEvent) {
             document.attachEvent("WeixinJSBridgeReady", function(){
                 that.audio.play();
             });
             document.attachEvent("onWeixinJSBridgeReady", function(){
                 that.audio.play();
             });
         }
       }
     },
    
    展开全文
  • 在IOSaudio自动播放audio必须点击的情况才能播放 以下是全部代码 当你点击页面某个地方 都可以触发audio播放 延时的原因是 页面渲染事件大概17毫秒 时间随自己设定,这是我 ...

    在IOS端 audio是不能自动播放的 audio必须在点击的情况下才能播放
    1 以下是js全部代码 当你点击页面某个地方 都可以触发audio播放
    setTimeout(() => {
    (function () {
    var audio = document.querySelector(’#audio’);
    function PlayAudio() {
    audio.load(); // iOS 9 需要load一下, 否则直接play无效
    audio.play(); // iOS 7/8 需要play一下
    }
    audio.addEventListener(‘play’, function () {
    // 当 audio 能够播放后, 移除这个事件
    window.removeEventListener(‘touchstart’, PlayAudio, false);
    }, false);
    window.addEventListener(‘touchstart’, PlayAudio, false);
    })();
    }, 500)
    let user = window.localStorage.getItem(‘ethelWxUserInfo’)
    if (!user || user == undefined || user == ‘undefined’) {
    window.localStorage.removeItem(‘ethelWxUserInfo’)
    }
    延时的原因是 页面渲染事件大概17毫秒 时间随自己设定

    2 以下是html部分
    <audio src=“https://aiser.oss-cn-beijing.aliyuncs.com/media/shinian.mp3” autoplay=“autoplay” loop="" audio/》

    展开全文
  • 前言:为什么单说ios说安卓呢,因为ios的安全机制,把audio的canplay事件禁止了,导致了ios设备上自动播放功能能简单的实现,需要用户点击一次才能播放。而安卓却没有这些问题,这也算是展现了两个系统的对于...
  • 允许audio和video自动播放,所以想要获取页面上的audio标签然后给src值,然后使用自动播放那是实现了的,即使给play()也是播放了; 解决方法是直接创建一个audio对象,当时问题是iOS也是允许主动创建对象...
  • //解决ios audio无法自动播放、循环播放的问题 var music = document.getElementById('video'); var state = 0; document.addEventListener('touchstart', function(){ if(state==0){ music.play(); state=....
  • 因此,iosaudio不能直接通过audio.play()播放,需要用户click事件或者touch事件中执行audio.play()才能播放。 解决办法 引入微信jsdk后 就可以 wx.ready()里 控制播放了。 1.第一步:加载一个微信JS-SDK <...
  • 最近做了个H5产品的宣传活动,用到了audio标签并且要求自动播放,我们都知道safri on ios里面明确指出等待用户的交互动作后才能播放media,也就是说如果你没有得到用户的action就播放的话就会被safri拦截。...
  • audio标签自动播放在安卓播放正常,IOS不自动播放 <img class="musicPic" src="./music.png" id="musicIcon" /> <audio style="display:...
  • audio标签安卓系统上面只需要设置audio标签的一些属性就可以实现自动播放和循环播放功能,但是在ios系统中因为其独特的安全设置原因,自动播放和循环播放,下面是我项目中的解决办法: 用js判断当前浏览器...
  • 播放链接的情况先调用一次xxx.play(),然后暂停xxx.pause()2.请求到数据以后,替换链接3.判断readyState的值0 = HAVE_NOTHING - 没有关于音频是否就绪的信息1 = HAVE_METADATA - 关于音频...
  • 在ios系统中自动播放,此时需要设置,进入页面自动播放音乐。 第一步,先引入js微信 <script src="js/jweixin-1.2.0.js?ver=222"></script>  第二步,wx.ready中进行默认播放,这个时候...
  • 微信H5页面,实现audio自动播放: function initMusic() { var audio = document.createElement('audio'); audio.setAttribute('id', 'audio'); audio.setAttribute('autoplay', 'autoplay'); audio.setAttribut...
  • // iOS 7/8 仅需要 play 一下 audioEl.play();  // iOS 9 需要先load()然后再play() audioEl.load() audioEl.play();
  • ios不自动播放音频

    2017-10-07 23:50:54
    audio,利用trigger('play')在ios能触发audio播放,原因ios 内置浏览器safari要播放音频,需要人为去触发,或者微信WeixinJSBridgeReady()函数内设置自动触发。给audio设置autoplay也生效。 html代码如下...
  • 最近开发微信公众号H5页面的时候,audio标签在ios系统上无法进行自动播放,最后发现audio在ajax回调中无法调用Play,所以查找很多资料终于解决了。 首先html中添加如下代码:html <audio id="bg-music" src="$...
  • 最近做一个关于aduio的项目,奈何audio在pc端能正常播放在ios端确无法播放,着实踩了不少的坑!!! 也看了不少的网上的教程,最后的实现结果如下: 1、html代码 // html <audio id="audio" :src="src" ref=...
  • 解决在IOS系统及微信中audio、video自动播放的问题
  • 前几天做了一个H5活动页面,产品要求初始化播放音乐,因晓得H5 Audio标签支持Autoplay... 然后网上查了发现iOS上禁止了Audio的Autoplay属性,原因如下: User Control of Downloads Over Cellular Networks I...
1 2 3 4 5 ... 20
收藏数 9,377
精华内容 3,750
关键字:

audio在ios下不自动播放