HTML source 标签

🌙
手机阅读
本文目录结构
axihe

HTML <source> 概述

HTML <source> 元素为 <picture>, <audio> 或者 <video> 元素指定多个媒体资源, picture 参考 这里

这是一个空元素。它通常用于以不同浏览器支持的多种格式提供相同的媒体内容。

HTML <source> 标签功能

<source> 标签为媒体元素(比如 <video><audio>)定义媒体资源。

<source> 标签允许您规定多个视频 / 音频文件供浏览器选择(根据它对媒体类型或者编解码器的支持进行选择)。

HTML <source> 标签用法

带有两个源文件的音频播放器。浏览器需要选择它所支持的源文件(如果都支持则任选一个):

<audio controls>
    <source src="horse.ogg" type="audio/ogg">
    <source src="horse.mp3" type="audio/mpeg">
    您的浏览器不支持 audio 元素。
</audio>

又一个的例子

<video controls>
  <source src="foo.webm" type="video/webm">
  <source src="foo.ogg" type="video/ogg">
  <source src="foo.mov" type="video/quicktime">
  I'm sorry; your browser doesn't support HTML5 video.
</video>

本示例演示如何为浏览器支持 Ogg 格式的用户提供 Ogg 格式的视频,以及为浏览器支持 Ogg 格式的用户提供 QuickTime 格式的视频。

如果浏览器不支持 audioor video 元素,则会显示一条通知。如果浏览器支持该元素但不支持任何指定的格式,error 则会引发一个事件,并且默认媒体控件(如果启用)将指示错误。

浏览器支持

IE 9+、Firefox、Opera、Chrome 和 Safari 都支持 标签。

注释:IE 8 或更早版本的 IE 浏览器都不支持 标签。

https://a.axihe.com/api/html/iexplore_fAEf4Purd6.png

https://a.axihe.com/api/html/Code_Ltstn8q31n.png

引入html5media.js, 可以使<source>兼容低版本 IE

HTML4 与 HTML5 之间的差异

<source> 标签是 HTML5 中的新标签。

属性

New :HTML5 中的新属性。

属性描述
mediaNewmedia_query规定媒体资源的类型,供浏览器决定是否下载。
srcNewURL规定媒体文件的 URL。
typeNewMIME_type规定媒体资源的 MIME 类型。
sizes———–描述了源表示的图像的最终渲染宽度
srcset———–指示由浏览器使用的源表示的一组可能的图像

sizes

是源尺寸的列表,描述了源表示的图像的最终渲染宽度。每个源大小均包含一个以逗号分隔的媒体条件长度对列表。浏览器使用此信息来确定在布局页面之前 srcset 使用哪个定义的图像。仅当元素是元素的直接子元素时, 该 sizes 属性才有效。<source><picture>

src

媒体资源的<audio>和必需<video>。将<source>元素放置在<picture>元素内部时,将忽略此属性的值。

srcset

由逗号分隔的一个或多个字符串的列表,指示由浏览器使用的源表示的一组可能的图像。每个字符串由以下组成: * 图片的一个网址, * 宽度描述符,即正整数,后跟’w’。如果缺失,则默认值为无穷大。 * 像素密度描述符,即正浮点数,后跟’x’。如果缺少默认值,则为 1x。 列表中的每个字符串必须至少具有一个宽度描述符或一个像素密度描述符才有效。在列表中,必须只有一个字符串,其中包含相同的宽度描述符和像素密度描述符元组。

浏览器选择最适当的图像以在给定的时间点显示。仅当元素是元素的直接子元素时, 该 srcset 属性才有效。<source><picture>

type

资源的 MIME 类型,可以选择包含 codecs 参数。有关如何指定编解码器的信息,请参见 RFC 4281。

media

资源预期媒体的媒体查询;仅应在<picture>元素中使用。

如果未指定 type 属性,则从服务器检索媒体的类型,并检查 Gecko 是否可以处理它;如果无法渲染,则检查下一个来源。如果指定了 type 属性,则会将其与 Gecko 可以播放的类型进行比较,如果无法识别,则甚至不会查询服务器。而是一次检查下一个源元素。

全局属性

<source> 标签支持 HTML 全局属性

事件属性

<source> 标签支持 HTML 事件属性


AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili 和抖音。

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

Bilibili(B站)

朱安邦

Anbang