【原】[webkit移动开发笔记]之无法自动播放的audio元素

摘要:
2、 音频属性3。音频的编写方法1:<audiosrc=“baisha.mp3”autoloop>您的浏览器不支持编写方法2:<audiocontrols=“controls”><sourcesrc=“baisha.ogg”type=“audio/ogg”><source src=“baisa.mp3“type=“audio/mpeg”mp3˂/audio>4。项目中使用音频。最初,它是在Chrome浏览器下使用自动播放和循环属性进行测试的。当页面打开时,它会自动播放和循环。Chrome已成功支持它。在发布到测试环境后,音乐将不会在iOS和Android手机中自动播放--!

HTML5新增了video元素和audio元素,替代了传统HTML4使用复杂的object元素与embed来播放视频或者音频的方法。这次的一个项目,产品经理要求手机加载开始时播放音乐,想到播放音乐,又是在ios和android平台,那audio元素必然是首选。

一、audio的基本知识

 audio:标签定义声音,比如音乐或其他音频流。 

二、audio的属性

【原】[webkit移动开发笔记]之无法自动播放的audio元素第1张

三、audio的写法

写法一:

<audio src="baishu.mp3"  auto loop>你的浏览器还不支持哦</audio>

写法二:

<audio controls="controls">
<source src="baishu.ogg" type="audio/ogg">
<source src="baishu.mp3" type="audio/mpeg">
优先播放音乐baishu.ogg,不支持在播放baishu.mp3
</audio>

四、audio实战

在项目中使用audio,一开始在chrome浏览器下做测试,使用了autoplay和loop属性,在页面打开时自动播放并循环,在chrome是成功支持,发布到测试环境后,在ios和android手机中音乐不会自动播放- -!,做了一系列测试,使用JS,还是无法自动播放...

想用回HTML4的object元素与embed,但手机中有些浏览器禁止了控件....

后来在外国网站找了一些对audio使用的资料:

【原】[webkit移动开发笔记]之无法自动播放的audio元素第2张

 【原】[webkit移动开发笔记]之无法自动播放的audio元素第3张

【原】[webkit移动开发笔记]之无法自动播放的audio元素第4张

对audio的使用,总结如下:

1.audio元素的autoplay属性在ios和andriod上无法使用的,在PC端上正常

2.audio元素没有设置controls时,在ios和android上会占据空间大小,而在PC端chrome是不会占据任何空间

后来,跟产品经理商量后,暂不使用音乐了....如果大家有办法能在iso和android上自动播放背景音乐,请联系我~~~Thx

参考资料:

http://stackoverflow.com/questions/4259928/how-can-i-autoplay-media-in-ios-4-2-1-mobile-safari

http://www.ibm.com/developerworks/library/wa-ioshtml5/index.html

http://www.w3school.com.cn/html5/html5_audio.asp

免责声明:文章转载自《【原】[webkit移动开发笔记]之无法自动播放的audio元素》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇express中间件数学概念的提出(一) —— 熵的定义式 H(x)=-log2(p(x))下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

用原生css实现高斯模糊、黑白等滤镜效果

  —引导— 在CSS3中,有一个强大的属性,那就是filter属性,filter顾名思义就是“滤镜”的意思,用filter属性可以让图片无需PS处理就达到一些简单的显示效果。 —定义和使用— filter 属性定义了元素(通常是<img>)的可视效果(例如:模糊与饱和度)。 默认值 none 继承 none 动画支持 是 版本...

VS2017 移动开发(Android and IOS) 序

序    公司原因,要求用C#开发移动端app,老板觉得用现在会的C#做会比较快。。。 从零开始,折腾一个多星期,重装系统三遍(强迫症),其它各种折腾,终于手机运行上了第一个APP,看看就好。。。   不得不吐槽几个按钮没有任何事件安装包有40M+。    (2018.04.03补充安装包大小可以多个设置进行减小)    因为Xamarin被微软收购,所以...

Android webkit 事件传递流程详解

前言:基于android webview 上定制自己使用的可移植浏览器apk,遇到好多按键处理的问题。所以索性研究了一下keyevent 事件的传递流程。 frameworks 层 keyevent 事件开始是从/frameworks/base/core/java/android/webkit目录下WebViewClassic.java 中的onKeyDo...

swiper横向轮播(兼容IE8)

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet"href="idangerous.swiper.cs...

Chrome源代码结构

首先,开始接触Chrome的童鞋可能有一个疑惑,Chrome和Chromium是同一个东西吗?答案是,Chrome是Google官方的浏览器项目名称,Chromium是Google官方对Chrome开源项目。说白了就是Chrome是Google自己的官方浏览器版本,而Chromium是开源项目,所有有兴趣的开发者都可以参加,Chromium中出现的新技术...

几个常见的布局的多种实现方式及margin负值总结

 第一部分:几个常见的布局实现方式 一、左右两边固定, center中间自适应未知 html代码中 center 部分首先要放在box的最前部分。然后是left,right 圣杯布局: <div class="box"> <div class="center"></div> <div class...