首页 » 编程语言 » html » 正文

HTML5标签:source元素的使用方法及作用

html元素<source> 标签是html5中新增的标签,主要用于指定音频、视频、图片类型的媒体资源。有关<source> 标签的使用方法及作用详解如下:

<source> 标签的定义

<source> 标签是为<video>、<audio>和<picture>标签指定多个媒体资源,比如音频、视频、图片。

<source> 标签通常将相同内容的媒体资源,以多种格式的形式,提供给浏览器,浏览器优先选择自己支持格式的媒体内容。

<source> 标签是 HTML 5 中新增的标签

浏览器支持情况

 <source> 标签已被 IE9+, Firefox, Opera, Chrome 以及 Safari 支持;

但在Internet Explorer 8 以及更早的版本中,是不被支持的。

<source> 标签用法

<source>标签来为同一个媒体数据指定多个播放格式与编码方式,以确保浏览器可以从中选择一种自己支持的播放格式进行播放,浏览器的选择顺序为代码中的书写顺序,它会从上向下判断自己对该播放格式是否支持,直到选择到自己支持的播放格式为止。

<source>标签本身不代表任何含义,不能单独出现。,往往嵌套在媒体标签<audio>和<video>以及<picture>等标签内;

1、嵌套在<audio>内,指定多种音频格式供浏览器选择

<audio  controls >
  <source src="music.ogg" type="audio/ogg"> 
  <source src="music.mp3" type="audio/mpeg"> 
  <source src="music.wav" type="audio/Wav"> 
  当前浏览器不支持 audio 标签 
</audio>

相关连接:<audio>标签的用法及作用

2、嵌套在<video>内,指定多种视频格式供浏览器选择

<video controls>
   <source src="shipin.webm" type="video/webm">  
   <source src="shipin.ogg" type="video/ogg">   
   <source src="shipin.mov" type="video/quicktime"> 
   当前浏览器不支持 video 标签 
</video>

相关连接:<video>标签的用法及作用  

3、嵌套在<picture>内,指定多种不同处理图片的方式

picture标签,可以根据屏幕分辨率,让浏览器自己选择加载什么图片

<picture>
      <source srcset="large.jpg" media="(min-width: 800px)">
      <source srcset="medium.jpg" media="(min-width: 600px)">
      <img srcset="small.jpg" alt="默认显示的图片">
</picture>

相关连接:<picture>标签的用法及作用  

<source> 标签属性

 <source> 标签包含src、type、media三个属性,分别介绍如下:

属性描述
media
media_query说明媒体在何种媒介中使用,不设置时默认值为all,表示支持所有媒介。
src
URL

规定媒体文件的URL地址。

type
MIME_type规定媒体资源的 MIME 类型,帮助浏览器在获取媒体前判断是否支持此类别的媒体格式



欢迎您发表评论或留言