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()
                })
  • 相关阅读:
    恢复spark挂掉的节点
    启动spark集群
    记录一下SparkStreaming中因为使用redis做数据验证而导致数据结果不对的问题
    ps -aux与ps -ef
    Operation category READ is not supported in state standby
    spark web ui中的skipped的含义
    关于spark ui中executor显示的内存量与设置的内存量不符的问题
    flume修改配置文件
    maven中的各种问题
    java 的集合框架
  • 原文地址:https://www.cnblogs.com/changxue/p/9576470.html
Copyright © 2011-2022 走看看