zoukankan      html  css  js  c++  java
  • 微信浏览器播放音频的问题:preload属性


    测试工具:ios微信。

    h5的Audio对象有个很重要的属性:preload;preload 属性规定是否在页面加载后载入音频。有4个值:
    auto - 当页面加载后载入整个音频
    meta - 当页面加载后只载入元数据
    none - 当页面加载后不载入音频
    空字符串 - 等效于auto属性

    对于Audio对象,如果不需要展示播放界面,我们完全可以在js里构造这个对象:

    var audio = new Audio;
    audio.preload = 'none';//设置none属性
    //当点击第一个div元素是播放音频
    document.getElementsByTagName('div')[0].addEventListener('click', function () {
    	audio.play()
    },false)
    

      

    如果是考虑到初次加载页面显示快慢的问题,我们完全可以将preload设置为'none',这样就不会在页面首次加载的时候下载音频资源。
    以上做法在safari(手机浏览器)和chrome(电脑浏览器)里,没有任何问题,打开chrome的network,发现页面初始化确实不会加载音频,只有当点击的时候,调用auido的play()方法时,才会下载音频。但是,事情并没有那么顺利,我们在ios的微信里,发现根本不播放音频。解决办法:
    1.不设置preload值或者设置preload为auto,微信浏览器都可以播放,但是页面音频比较多,第一次都会加载,网页速度慢。
    2.在设置audio.preload = 'none',不提前加载的情况下:用微信内置的方法:

    if(typeof WeixinJSBridge === 'object'){
    	 WeixinJSBridge.invoke('getNetworkType', {}, function(e) {
            audio.play();
         });
    }else{
    	audio.play()
    }
    

     

    注意,网上有很多资料说要用:document.addEventListener("WeixinJSBridgeReady")。我测试的都不会触发这个事件!!!

  • 相关阅读:
    关于NSDictionary的一点感悟
    (转)UITableView使用详解 相当详细,不错的东东
    UITextField的总结
    警告框(AlertView)与进度轮结合使用
    [转]自定义UITableView各种函数
    UISegmentedControl的所有操作总结
    英特尔多核平台编程优化大赛报告
    Makefile完全解析PART1.入门
    Makefile完全解析PART3.书写规则
    Makefile完全解析PART2.原理
  • 原文地址:https://www.cnblogs.com/xiaochongchong/p/10007517.html
Copyright © 2011-2022 走看看