zoukankan      html  css  js  c++  java
  • Html5-audio标签简介及手机端不自动播放问题

    1、audio:html5音频标签

    <audio loop src="/photo/aa.mp3" id="audio" autoplay preload="auto">该浏览器不支持audio属性</audio>
     

    不支持audio元素的浏览器会显示标签内文字

    src:音频地址

    autoplay:音频加载完毕后自动播放。

    controls:显示播放控制条。

    loop:播放完毕后会重复播放。

    preload:1)auto 预加载音频视频。2)metadata 只预加载音频视频元数据。  有autoplay时此属性无效。

    (h5 推荐使用OGG Vobis格式)

    2、js控制媒体

    play()播放

    pause()暂停

    load()重新加载

    3、微信端和手机不能支持自动播放问题

    原因是:android  ios 内部原因 为了节省流量,规定不自动播放音频视频

    所以采用以下方式解决

    //--创建页面监听,等待微信端页面加载完毕 触发音频播放
    document.addEventListener('DOMContentLoaded', function () { function audioAutoPlay() { var audio = document.getElementById('audio'); audio.play(); document.addEventListener("WeixinJSBridgeReady", function () { audio.play(); }, false); } audioAutoPlay(); });
    //--创建触摸监听,当浏览器打开页面时,触摸屏幕触发事件,进行音频播放 document.addEventListener(
    'touchstart', function () { function audioAutoPlay() { var audio = document.getElementById('audio'); audio.play(); } audioAutoPlay(); });
  • 相关阅读:
    oracle里某列插入多行数据
    子类与父类的一些关系
    math.round()的值怎么取的
    oracle replace函数
    spring5.1.5使用的jackson依赖版本
    eclipse设置新建jsp页面的默认编码为utf-8
    c3p0启动失败
    sql的左联右联合内联的区别
    eclipse安装spring tools插件的问题
    HTML点击按钮button跳转页面的四种方法
  • 原文地址:https://www.cnblogs.com/volare/p/6759835.html
Copyright © 2011-2022 走看看