05-插入多媒体标签

引入：

我们已经学过在网页中插入图片，今天我们来学习在网页中插入flash动画、音频和视频等多媒体内容。

标签

特点：

可以在网页中嵌入flash动画、音频和视频等等多媒体内容，它并不是HTML的标准，但是一般的浏览器对其支持都较好。（最新的firefox也已经开始支持该标签）

基本语法：

常用属性

属性	描述
width	指定嵌入对象的宽度（单位像素）
height	指定嵌入对象的宽度（单位像素）
loop	是否循环，值有true或false,默认是false
hidden	设置多媒体播放软件的是否隐藏，默认false,即可见
type	指明嵌入对象的MIME类型

代码

播放

您的浏览器不支持播放，请升级到最新的浏览器

特点：

标签不是w3c认可的标签，如果需要在网页中嵌入音频和视频，只要该浏览器支持HTML5标签，则可以使用

基本语法：

常用属性

属性	描述
autoplay	嵌入对象在页面加载后自动播放
controls	显示控制播放按钮
preload	嵌入对象在页面加载时进行加载并预备播放，会被autoplay属性覆盖
poster	设置视频下载时或用户单击播放前显示的图像

另外：还有width、height、loop、hidden以及type等属性和embed相同，因此不另作介绍。

代码

为什么要写三段source?同样是因为浏览器的兼任性问题。详细见下图：

image.png

备注：

• 注意MPEG4的视频编码必须为H.264。这个在视频转码的时候要注意。
• 随着浏览器的更新，对视频格式的支持可能越来越好，我们做网页时需要多用几个浏览器测试兼容性。
• 国内目前因为流量很贵，视频一般很少放自己服务器上，通常是上传到视频网站上，再链接过来。

HTML5 规定了一种通过 audio 元素来包含音频的标准方法。

基本语法：

常用属性

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
preload	preload	如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性

总结

• 对于flash动画、音频和视频在网页上的呈现，以前W3C没有统一的标准，因而各浏览器有自己的解决方案，即是浏览器厂商提供的一种解决方案。W3C在HTML5中又提供了
• 在之前，微软提供了一个类似的