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. 2018 ICPC南京网络赛 L Magical Girl Haze 题解

    大致题意: 给定一个n个点m条边的图,在可以把路径上至多k条边的权值变为0的情况下,求S到T的最短路. 数据规模: N≤100000,M≤200000,K≤10 建一个立体的图,有k层,每一层是一份原 ...

  2. java中数组实现的错误

    作为一个刚学java的小白 真是错误百出 下面就是一个大神会非常不屑的一个小错误 数组在初始化的时候仅仅是定义了一个数组,并未其中的内容初始化. 附上错误代码 : class student{publ ...

  3. 关于python的创立模块和导入

    首先,模块就是所有的.py文件,而模块的作用便是简化代码,使其看得简易. 例如这就是模块: 'a test'这是注释,并没有什么作用. 而创立模块的第一步:建立一个.py文件例如:这是上方这串代码的模 ...

  4. java基本数据类型和运算符

    一.基本数据类型 种类: 内置数据类型 引用数据类型 1.内置数据类型 一共有八种基本类型,六个数字类型(四个整数类型,两个浮点型),一个布尔型,一个字符类型. (1)byte: byte数据类型是8 ...

  5. Python 二分法

    # coding = utf-8 import random def Creat_Arr(): arr = [] for i in range(0,50) : arr.append(random.ra ...

  6. creator rotationY的问题

    最近在做一个2D的小游戏,碰撞方面由于懒,就直接使用cocos自带的物理组件RigidBody了. 但是在父节点挂载RigidBody之后,会导致设置rotationY时失效,具体原因没有深查,估计是 ...

  7. P2930 [USACO09HOL]假期绘画Holiday Painting

    线段树水题,考虑到只有15列,所以我们对于每一列,我们都去维护一个线段树. 现在来考虑一下修改操作,因为每次修改的时候,我们都是将黑的改成白的,白的改成黑的,所以我们对线段树的每个节点维护当前这段区间 ...

  8. python练习题3:N的多次方

    N的多次方 描述 编写一个程序,计算输入数字N的0次方到5次方结果,并依次输出这6个结果,输出结果间用空格分隔.其中:N是一个整数或浮点数. print()函数可以同时输出多个信息,采用如下方法可以使 ...

  9. 转载一篇阿里云Terraform 开发指南

    连接:https://www.jianshu.com/p/0aebea117cae 是一个比较详细的开发指南          

  10. C# - 匿名对象属性的赋值与取值

    在new出匿名对象的函数内可以直接调用该匿名对象的属性取值. 可是在其它函数就无法调用匿名对象的属性或方法. 这时,我们可以通过c#的反射机制取值: 文章出处:https://www.cnblogs. ...