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标签：媒介元素定义媒介资源的更多相关文章

  1. 20190325-HTML框架、audio标签、vedio标签、source标签、HTML表单

    目录 1.HTML框架 frameset:框架标记 frame:框架内文件 iframe:内嵌框架 2.audio标签 src:URL(可以用source标签替代) autoplay:自动播放 pre ...

  2. html5\CSS3有哪些新特性、移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？

    (1)HTML5现在已经不是SGML的子集,主要是关于图像,位置,存储,地理定位等功能的增加. 绘画canvas元素: 用于媒介回放的video和audio元素: 本地离线存储localStorage ...

  3. HTML5有哪些新特性，移除了哪些元素？如何处理HTML5新标签的浏览器兼容性问题？如何区分HTML和HTML5？

    HTML5现在已经不是SGML的子集,主要是关于图像,位置,存储,多任务等功能的增加. 绘画canvas: 用于媒介回放的video和audio元素: 本地离线存储localStorage长期存储数据 ...

  4. html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

    * HTML5 现在已经不是 SGML(标准通用标记语言,是一种定义电子文档结构和描述其内容的国际标准语言) 的子集,主要是关于图像,位置,存储,多任务等功能的增加.   * 拖拽释放(Drag an ...

  5. HTML5<canvas>标签:使用canvas元素在网页上绘制线条和圆(1)

    什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...

  6. HTML5 <template>标签元素简介

    一.HTML5 template元素初面 <template>元素,基本上可以确定是2013年才出现的.干嘛用的呢,顾名思意,就是用来声明是“模板元素”. 目前,我们在HTML中嵌入模板H ...

  7. html5新标签转

    HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准.它希望能够减少浏览器对于需要插件的丰富性网络应用服务(p ...

  8. Html5新标签解释及用法

    Html5新标签解释及用法 HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准.它希望能够减少浏览器对于需要 ...

  9. Html5新标签及用法

    HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2  HTML 标准.它希望能够减少浏览器对于需要插件的丰富性网络应用服务( ...

随机推荐

  1. mysql数据库简单一些简单操作和总结

    1. mysql 数据库操作方法: 进入数据库 mysql -uroot -p 退出 quite exit 默认引擎 innodb 查看版本 select verison(); 查看时间 select ...

  2. 注意C语言 / 要想得到精确结果

    #include <stdio.h> int main(){    double r;    while(scanf("%lf",&r)!=EOF)    {  ...

  3. python基础（六）

    一.内置函数 # input()# type()# len()# print()# enumerate()# list()# dict()# tuple()# set()# str()# int()# ...

  4. 1.继承（extends）、超类（superClass）、子类（subClass）

    注意:继承主要使用的is-a关系 在子类中用一个新的方法来覆盖超类中的方法(override),需要注意的是如果子类之中的方法或者域  被覆盖时,仍然想访问superClass中的方法和域,此时必须使 ...

  5. Spring（转载二）

    在网上看到一篇文章,感觉写得挺不错的,转载一下,本文转载自:http://blog.csdn.net/m13666368773/article/details/7802126 一. IoC理论的背景 ...

  6. 使用 ReSharper，输入即遵循 StyleCop 的代码格式化规范

    使用 ReSharper,输入即遵循 StyleCop 的代码格式化规范 StyleCop 可以帮助强制执行代码格式化规范,ReSharper 可以帮助你更高效地编写代码.把两者结合起来,你便能高效地 ...

  7. Visual Stdio2017 使用

    1. 快捷键: https://www.cnblogs.com/happyzwt/p/7769129.html 2.

  8. 普通路由器刷开源固件DD-WRT的简单过程

    DD-WRT是基于Linux的无线路由软件,功能强大,它提供了许多一般路由器的软体所没有的功能,将路由器固件升级到DD-WRT可以提升内建于预设固件的限制,并将其转换成强大且具有进阶功能的商业级路由器 ...

  9. mvc框架模式

    首先分为3个板块 路由的api相当于一个域名. 根据当前地址在执行路由里的代码; 逻辑层: 书写业务逻辑的都代码都放在controller层 数据处理层: model 写数据的增删改查方法,导出一般供 ...

  10. 手机游戏引擎 Cocos

    Cocos是全球最受欢迎的移动游戏开发解决方案,整合了Cocos 2d-x.Cocos 2d-js.Cocos Studio.Cocos Code IDE等框架及工具,无论您是开发新手还是行业资深人士 ...