美文网首页
OS 微信 音频 视频自动播放

OS 微信 音频 视频自动播放

作者: O蚂蚁O | 来源:发表于2018-05-09 16:26 被阅读0次

OS 微信 音频 视频自动播放

(2017-07-05 16:54:20)[<cite style="font-style: normal; font-family: Verdana; cursor: pointer !important; text-decoration: none;">编辑</cite>][[<cite onclick="$articleManage('166b5ae740102xqkg',1,{callback:function(){window.location.href='http://blog.sina.com.cn/u/6018150004';}});" style="font-style: normal; font-family: Verdana; cursor: pointer !important; text-decoration: none;">删除</cite>]](javascript:;)

[<cite style="font-style: normal; line-height: 23px; padding: 0px 20px 0px 32px; display: inline-block !important; height: 23px; background-repeat: no-repeat; background-position: right -28px; min-width: 1px; overflow-x: visible; white-space: nowrap; text-align: left; font-size: 12px !important; background-image: url("../../../image/4/4_11/images/sg_newsp.png"); width: 34px;"> image

转载</cite>](javascript:;)

| | |

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

在做爆米兔的时候,遇到上面的问题,各种尝试都没有结果。最后发现:

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

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

可以用iPhone手机在微信中打开这里,查看效果~

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

 preload="preload" controls id="car_audio" src="http://media.xitaoinfo.com/ei_zamenjiehunba.mp3" loop>
 id="video" controls="" preload="none" mediagroup="myVideoGroup" poster="http://media.w3.org/2010/05/sintel/poster.png">
       id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
       id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm">
       id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg">
      Your user agent does not support the HTML5 Video element.

     //一般情况下,这样就可以自动播放了,但是一些奇葩iPhone机不可以
     document.getElementById('car_audio').play();
    //必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效
    document.addEventListener("WeixinJSBridgeReady", function () {
        document.getElementById('car_audio').play();
        document.getElementById('video').play();
    }, false);

@Nokey 提问:最近又发现一个问题,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;
}

相关文章

  • OS 微信 音频 视频自动播放

    OS 微信 音频 视频自动播放 (2017-07-05 16:54:20)[ 编辑 ][[ 删除 ]](javas...

  • 移动端音频视频的坑

    记录下最近开发的微信公众网页中坑(微信中。。微信中。。微信中。。。) 关于自动播放 音视频不能自动播放是移动端的常...

  • 微信网页ios自动播放音频、视频

    安卓自动播放直接加autoplay但是由于ios安全方面的考虑,不让自动播放媒体资源,怎么办呢?微信有办法~ 这里...

  • 微信和iOS

  • HTML5新标签

    音频和视频 属性 描述 autoplay 媒体加载后自动播放 controller...

  • 微信浏览器中音频自动播放

    需求: 移动端微信浏览器+vue音频自动播放+ 翻页会有不同的BGM效果实现 实现: 第一步: 音频需要预加...

  • 工作总结

    主要是古诗的新功能实现与测试修改 问题 IOS的长音频播放前有一个不能避免的延时(凯叔也有) 微信的音频自动播放必...

  • 微信开发的常用接口

    1.监听摇一摇 2.微信分享 3.自动播放音频(否则只有触摸屏幕才会开始播放) 4.录音及播放 //调用微信录音接...

  • 微信公众号文章:音频、视频、图片一键保存

    微信公众号文章:音频、视频、图片一键保存工具 关键字:微信公众号文章;音频下载;视频下载;图片下载;文章保存; 这...

  • 音视频播放

    音频播放标签 视频播放标签 属性: autoplay 自动播放 loop 循环播放 controls 是否显示默认...

网友评论

      本文标题:OS 微信 音频 视频自动播放

      本文链接:https://www.haomeiwen.com/subject/fjcorftx.html