html5如何插入可自动播放的音频(图文)_html5 audio 自动播放-程序员宅基地

技术标签: web前端  css  基础教程  html+css  vue.js  html  javascript  

经常浏览网站或者经常进行页面布局的人,应该对页面中的音频,视频不陌生吧,正在学习HTML5的小伙伴,你知道HTML5中怎么插入音频并自动播放吗?这篇文章就和大家一起研究html5中的音频标签以及HTML5插入音频的代码,有一定的参考价值,可以参考一下。

需要面试题点击下面链接查看,有很多:

打造全网web前端全栈资料库(总目录)看完学的更快,掌握的更加牢固,你值得拥有(持续更新)

HTML5中的<audio>标签可以插入音频,control属性可以控制音频的播放,暂停,调节音量等。布局时可以根据需要设置音频的长width和高height。

<audio> 与 </audio> 标签里面的内容用于给不支持 audio 标签的浏览器显示的。

插入音频需要用到的相关标签的描述:

<audio> 用来设置声音内容

<source>用于设置音频的资源,一般在 <video> 与 <audio>标签中使用,可以使用多个

注意:在使用<audio>音频标签时,要注意浏览器的兼容性问题,浏览器的兼容性如下如所示:音频标签时,要注意浏览器的兼容性问题,浏览器的兼容性如下如所示:

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/lin123_00/article/details/106259199

智能推荐

ElementUI Pagination 分页修改背景色_el-pagination 美化-程序员宅基地

文章浏览阅读2.4k次。CSS 代码可以在CSS里面增加其他代码,设置选中后的背景颜色等::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active { background-color: #ff2832;}修改前修改后_el-pagination 美化

flask 返回前端可以拖动进度的视频流_http flask 206-程序员宅基地

文章浏览阅读1.7k次。近期在做一个pc webview的项目,用的是熟悉的flask+pywebview, 涉及到本地视频文件在前端页面上播放,最开始尝试直接打开文件,然后返回read的值,发现前端无法拖动进度条,查阅之后,才知道需要传输视频流,条件是:前端请求头携带 Range, 其值表示视频文件的读取起点后端需要在响应头中添加Content-Length,Content-Range,Accept-Range状态码需返回206具体配置如下,至于原因,不详,自己猜出来的。大概就是通过移动文件的指针来指定开始读取的地_http flask 206

深入java虚拟机 - 垃圾收集 - 火车算法-程序员宅基地

文章浏览阅读2.1k次,点赞4次,收藏4次。主要看《深入java虚拟机》这本书。 下面转自http://blog.csdn.net/zouxinfox/article/details/1594216 垃圾收集算法一个很大的缺点就是难以控制垃圾回收所占用的CPU时间,以及何时需要进行垃圾回收。火车算法是分代收集器所用的算法,目的是在成熟对象空间中提供限定时间的渐进收集。目前应用于SUN公司的Hotspot虚拟机_火车算法

深入分析RocketMQ 长轮询推送机制_rocketmq长轮询原理-程序员宅基地

文章浏览阅读2.7k次,点赞4次,收藏8次。RocketMQ消费端有两种获取消息的方式,Push方式和Pull方式。但这两种方式都有一定的缺陷,后来采用了一种折中的方法,采用”长轮询“的方式,它既可以拥有Pull的优点,又能达到保证实时性的目的。长轮询的思想:服务端接收到新消息请求后,如果队列里没有新消息,并不急于返回,通过一个循环不断查看状态,每次waitForRunning一段时间(默认是5秒),然后再Check。Broker默认最长阻塞时间为15秒,默认情况下当Broker一直没有新消息,第三次Check的时候,等待时间超过最长阻塞时间,就_rocketmq长轮询原理

php安装扩展的四种方法_群晖 phpize-程序员宅基地

文章浏览阅读1k次。转自:http://doc3.workerman.net/appendices/install-extension.html如何确定PHP安装了哪些扩展运行php -m会列出命令行 PHP CLI 已经安装的扩展,结果类似如下:~# php -m[PHP Modules]libeventposixpcntl...如何确定PHP的php.ini文件的位置当我们..._群晖 phpize

杭电acm——6376 度度熊剪纸条(2018百度之星初赛(A))-程序员宅基地

文章浏览阅读282次。题目链接:http://bestcoder.hdu.edu.cn/contests/contest_showproblem.php?cid=825&amp;pid=1003题目如下:1003任何时候的纸条(最初的纸条或者剪下来后的部分)都不能前后翻转度度熊剪纸条 Accepts: 488 Submissions: 5471 Time Limit: 2000/1000 MS (J...

随便推点

GBase 8a集群性能优化之group by 多列hash重分布_hash group by 优化-程序员宅基地

GBase 8a集群对随机分布表进行多列group by操作时,会以第一列进行hash重分布,可能造成数据倾斜影响性能。

解决 重定向次数过多 尝试清除cookie 的问题_重定向次数过多清除也没用-程序员宅基地

文章浏览阅读10w+次,点赞14次,收藏44次。在做登录防止用户没有登录而访问其他web资源的时候,写了一个过滤器,却在浏览器无法打开,出现重定向次数过多 尝试清除cookie,试过没有用。出现这个问题的原因是因为在过滤器中出现了无限循环重定向。出现无限循环重定向的原因分析如下:先上代码:package net.book.util;import javax.servlet.*;import javax.servlet.a..._重定向次数过多清除也没用

Android实现点击按钮跳转另外页面_android点击按钮跳转到另一个页面-程序员宅基地

文章浏览阅读6.1k次,点赞8次,收藏47次。在manifests->AndroidManifest.xml中添加创建的跳转的界面的activity。_android点击按钮跳转到另一个页面

C++几何库——cgal编译_cgal库 c++-程序员宅基地

文章浏览阅读1.4k次。资源准备cgal安装包:https://www.cgal.org/download/windows.html或者github上的cgal:https://github.com/CGAL/cgal(如果用这个的话,还是需要安装cgal,因为这个项目依赖的gmp的库在安装包里是直接编译好的)cmake安装包:https://cmake.org/boost库:https://dl.bi..._cgal库 c++

分享一个不错的数据分析实战案例【全程附图】EXCEL_数据分析实例-程序员宅基地

文章浏览阅读7w次,点赞59次,收藏419次。利用最近一次的营销活动的信息,分析什么对推销结果的影响最大,如何确定银行定期产品推销中最具价值的客户。_数据分析实例

华为2019校招实习笔试-软件题_华为2018软件类实习笔试题-程序员宅基地

文章浏览阅读8.1k次,点赞2次,收藏32次。[编程|100分] 字符串重排题目描述 给你一个原始字符串,根据该字符串内每个字符出现的次数,按照ASCII码递增顺序重新调整输出。【温馨提示】 (1).原始字符串中仅可能出现“数字”和“字母”; (2).请注意区分字母大小写。 输入描述: eeefgghhh 输出描述: efghegheh 示例1 输入 eeefgghhh 输出 efghegheh[编程|..._华为2018软件类实习笔试题