HTML5 source标签

发表于2015-05-22 15:06:07| --次阅读| 来源webkfa| 作者小五

摘要：source标签为媒介元素（比如 video 和 audio）定义媒介资源

实例
拥有两份源文件的音频播放器。浏览器应该选择它所支持的文件（如果有的话）：

		html5代码
	

运行代码

<!DOCTYPE html>
<html>
<body>

<audio controls>
<source src="http://www.w3school.com.cn/i/horse.ogg" type="audio/ogg">
<source src="http://www.w3school.com.cn/i/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<audio controls>
<source src="http://www.w3school.com.cn/i/horse.ogg" type="audio/ogg">
<source src="http://www.w3school.com.cn/i/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

</body>
</html>

浏览器支持
Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <source> 标签。
注释：Internet Explorer 8 以及更早的版本不支持 <source> 标签。

定义和用法
<source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。
<source> 标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。

HTML 4.01 与 HTML 5 之间的差异
<source> 标签是 HTML 5 中的新标签。

属性
new : HTML5 中的新属性。
//规定媒体资源的类型。
media属性实例

		html5代码
	

运行代码

<!DOCTYPE html>
<html>
<body>

<video width="320" height="240" controls>
<source src="http://www.w3school.com.cn/i/movie.mp4" type="video/mp4" media="screen and (min-width:320px)">
<source src="http://www.w3school.com.cn/i/movie.ogg" type="video/ogg" media="screen and (min-width:320px)">
Your browser does not support the video tag.
</video>

<p><b>注释：</b>目前几乎没有浏览器支持 media 属性。</p>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<video width="320" height="240" controls>
<source src="http://www.w3school.com.cn/i/movie.mp4" type="video/mp4" media="screen and (min-width:320px)">
<source src="http://www.w3school.com.cn/i/movie.ogg" type="video/ogg" media="screen and (min-width:320px)">
Your browser does not support the video tag.
</video>

<p><b>注释：</b>目前几乎没有浏览器支持 media 属性。</p>

</body>
</html>

//规定媒体文件的 URL。

src属性实例

			html5代码
		

运行代码

<!DOCTYPE html>
<html>
<body>

<audio controls>
<source src="http://www.w3school.com.cn/i/horse.ogg" type="audio/ogg">
<source src="http://www.w3school.com.cn/i/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<audio controls>
<source src="http://www.w3school.com.cn/i/horse.ogg" type="audio/ogg">
<source src="http://www.w3school.com.cn/i/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

</body>
</html>

//规定媒体资源的 MIME 类型。
type属性实例

		html5代码
	

运行代码

<!DOCTYPE html>
<html>
<body>

<audio controls>
<source src="http://www.w3school.com.cn/i/horse.ogg" type="audio/ogg">
<source src="http://www.w3school.com.cn/i/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<audio controls>
<source src="http://www.w3school.com.cn/i/horse.ogg" type="audio/ogg">
<source src="http://www.w3school.com.cn/i/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

</body>
</html>

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

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

HTML5 source标签

发表于2015-05-22 15:06:07| --次阅读| 来源webkfa| 作者小五

相关文章

html5标题快速浏览33

相关文章