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. 将数据转换成树型层级的Json格式的String

    有时候我们项目里面需要将树型关系的数据转换成Json格式的String字符串 假设数据库中的数据如下 需要转换后输出的字符串的结果如下(对应的层级的关系) [ {name:'爷爷',id:'1',co ...

  2. DPDK- program_guide 2

    Data Plane Development Kit(DPDK) RTE_SDK and RTE_TARGET must be configured. ~EAL ~librte_mempool ~li ...

  3. Oracle数据仓库套件

    OBIEE RPD:定义不同分析的主题角度,确定相应的事实表和维度表 报表层:选取需要的维度和度量,根据筛选器选取需要的数据 可视化:用图形展示数据,支持常见的图形:如折线图,饼图,堆叠图等. ODI ...

  4. Virtualbox 虚拟机安装Linux

    背景:Win10系统   MSI主板 目标:基于Win10 利用虚拟机Virtualbox安装Linux 准备工作:Ctrl+Alt+Del打开任务管理器——>性能(查看CPU虚拟化是否开启) ...

  5. systemd的新特性及unit常见类型分析与awk用法示列

    简述systemd的新特性及unit常见类型分析,能够实现编译安装的如nginx\apache实现通过systemd来管理 系统引导的新特性 系统引导时实现服务启动: 按需激活进程: 系统状态快照: ...

  6. Nopcommerce安装,应用及二次开发视频

    CSDN课程:http://edu.csdn.net/lecturer/944

  7. Python变量和常量

    1.什么是变量 变量:核心在于变和量儿字,变->变化,量->状态如何定义? x=1 变量名 变量赋值符号:= 变量值:1 其中变量名又称为标识符: 1. 可以是字母,数字,下划线的任意组合 ...

  8. ubuntu 上安装node.js 的简单方法

    一.安装 1.$ sudo apt-get install nodejs 2.$ sudo apt-get install npm 二.升级     1.升级npm命令如下: $ sudo npm i ...

  9. branchynet

    提前退出 神经网络 https://gitlab.com/kunglab/branchynet/tree/master 修改梯度 gradients 方法,参考: https://stackoverf ...

  10. java web 登录后更新JSESSIONID

    https://huangqiqing123.iteye.com/blog/2031455 登录前的请求一般都是http的,http是不安全的,假设用户登录前的JSESSIONID被人取得,如果登录后 ...