zoukankan      html  css  js  c++  java
  • html5 -audio-移动端如何自动播放

    最近在做一些活动类页面或者类似于易企秀类型的轻应用经常遇到关于audio标签的应用,对于audio相关的常用知识点以及一些相关的问题如下:

       <audio id="audios" src="xxxx.mp3" autoplay controls="controls">
            您的浏览器不支持 audio 标签。
        </audio>
        不支持audio元素的浏览器会显示标签内文字
        
        audio相关属性:
            src:音频地址
            autoplay:音频加载完毕后自动播放。
            controls:显示播放控制条。
            loop:播放完毕后会重复播放。
            preload: auto 预加载音频视频。metadata 只预加载音频视频元数据。 有autoplay时此属性无效。
            
        js控制媒体
            play()    播放
            pause()    暂停
            load()    重新加载
        
        相关事件:    
            oncanplay       //在用户可以开始播放视频/音频(audio/video)时触发(页面加载完毕)
            onerror            //在音频/视频(audio/video)加载发生错误时触发
            ontimeupdate    //在视频/音频(audio/video)当前的播放位置发送改变时触发  event.currentTime
            onended            //在视频/音频(audio/video)播放结束时触发
        
        微信端和手机不能支持自动播放问题
            原因是:android ios 内部原因 为了节省流量,规定不自动播放音频视频
            解决方法:
                //--创建页面监听,等待微信端页面加载完毕 触发音频播放
                document.addEventListener('WeixinJSBridgeReady', function() {
                    document.getElementById('audios').play()
                })
    
                //--创建触摸监听,当浏览器打开页面时,触摸屏幕触发事件,进行音频播放
                document.addEventListener('touchstart', function() {
                    document.getElementById('audios').play()
                })
  • 相关阅读:
    hdu 1159 Common Subsequence(最长公共子序列)
    Codeforces Round #313 (Div. 2)
    cf 558A Lala Land and Apple Trees
    zoj 2193 Window Pains
    poj 2031 Building a Space Station(最小生成树)
    zoj 1060 Sorting It All Out(拓扑排序)
    拓扑排序
    poj 1287 Networking
    zoj 1586 QS Network
    poj 1679 The Unique MST
  • 原文地址:https://www.cnblogs.com/changxue/p/9576470.html
Copyright © 2011-2022 走看看