HTML5 source标签:媒介元素定义媒介资源
HTML5 source标签是一种媒介元素(比如 <video> 和 <audio>)来定义媒介资源。<source> 标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。 这里主机吧给大家讲一下source标签的应用属性和实例。
<source>标签属性:
| 属性 | 值 | 描述 |
| media | media query | 规定媒体资源的类型。 |
| src | url | 规定媒体文件的 URL。 |
| type | numeric value | 规定媒体资源的 MIME 类型。 |
<source> 标签支持HTML中的全局属性和事件属性。
应用实例:
拥有两份源文件的音频播放器。浏览器应该选择它所支持的文件(如果有的话):
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
输出:

HTML 4.01 与 HTML 5 之间的差异
<source> 标签是 HTML 5 中的新标签。
HTML5 source标签:媒介元素定义媒介资源的更多相关文章
- 20190325-HTML框架、audio标签、vedio标签、source标签、HTML表单
目录 1.HTML框架 frameset:框架标记 frame:框架内文件 iframe:内嵌框架 2.audio标签 src:URL(可以用source标签替代) autoplay:自动播放 pre ...
- html5\CSS3有哪些新特性、移除了哪些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分HTML和HTML5?
(1)HTML5现在已经不是SGML的子集,主要是关于图像,位置,存储,地理定位等功能的增加. 绘画canvas元素: 用于媒介回放的video和audio元素: 本地离线存储localStorage ...
- HTML5有哪些新特性,移除了哪些元素?如何处理HTML5新标签的浏览器兼容性问题?如何区分HTML和HTML5?
HTML5现在已经不是SGML的子集,主要是关于图像,位置,存储,多任务等功能的增加. 绘画canvas: 用于媒介回放的video和audio元素: 本地离线存储localStorage长期存储数据 ...
- html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?
* HTML5 现在已经不是 SGML(标准通用标记语言,是一种定义电子文档结构和描述其内容的国际标准语言) 的子集,主要是关于图像,位置,存储,多任务等功能的增加. * 拖拽释放(Drag an ...
- HTML5<canvas>标签:使用canvas元素在网页上绘制线条和圆(1)
什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...
- HTML5 <template>标签元素简介
一.HTML5 template元素初面 <template>元素,基本上可以确定是2013年才出现的.干嘛用的呢,顾名思意,就是用来声明是“模板元素”. 目前,我们在HTML中嵌入模板H ...
- html5新标签转
HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准.它希望能够减少浏览器对于需要插件的丰富性网络应用服务(p ...
- Html5新标签解释及用法
Html5新标签解释及用法 HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准.它希望能够减少浏览器对于需要 ...
- Html5新标签及用法
HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准.它希望能够减少浏览器对于需要插件的丰富性网络应用服务( ...
随机推荐
- 《Spring实战》读书笔记——如何实现自动化装配
加我微信公众号,一起夯实Java基础,向着诗和远方出发吧~ 如果所有的装配工作都交给Spring来自动完成,减少人工的干预,是不是就能减少依赖关系配置带来的麻烦呢?认真做自己的事儿吧,装配交给Spri ...
- Spark 灰度发布在十万级节点上的成功实践 CI CD
原创文章,转载请务必将下面这段话置于文章开头处. 本文转发自技术世界,原文链接 http://www.jasongj.com/spark/ci_cd/ 本文所述内容基于某顶级互联网公司数万节点下 Sp ...
- redis服务问题解决办法
Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API.ps aux|grep redis部署虚拟机失败,代码中添加任 ...
- PA教材提纲 TAW12-2
Unit1 Adjustment of SAP Standard Software(SAP标准软件修改) 1.1 Adjusting SAP Standard Software(如何修改SAP标准软件 ...
- Lucene架构
先整体上看一下Lucene的架构设计图(见下图),先看上层应用,首先是信息采集的过程,文件系统.数据库.万维网以及手工输入的文件都可以作为信息采集的对象,也是要搜索的文档的来源,采集万维网上的信息一般 ...
- kylin cubing algorithm(算法)
看到这一块的视频,结合光方博客的一些文档及自己的一点理解,记个笔记,以备不时之需. by layer cubing 1.on MR 这个算法的对cube的计算就像它的名字一样是按player进行的. ...
- C# 代码补全
cw + Tab + Tab 输出 Console.WriteLine(); try +Tab+Tab 输出 try catch代码块 foreach + Ta ...
- xampp 丢失api-ms-win-crt-runtimel1-1-0.dll 解决方案
关于api-ms-win-crt-runtimel1-1-0.dll缺失的解决方案 原创 2016年02月29日 21:30:06 标签: 解决方案 / 补丁 / win7 / api-ms-win ...
- vue.js学习第一天,了解vue.js
vue.js是一个前端框架,他与jquery不同,jquery是一个js库,而vue.js是js的前端框架. vue.js对我们前端页面入侵比较大,而jquery则不然.那我们还为什么要使用vue.j ...
- 学习笔记TF053:循环神经网络,TensorFlow Model Zoo,强化学习,深度森林,深度学习艺术
循环神经网络.https://github.com/aymericdamien/TensorFlow-Examples/blob/master/examples/3_NeuralNetworks/re ...