2.HTML5音频.pptVIP

* * Web直到现在，仍然没有一项在网页上播放音 频和视频的标准。 * 主讲：郭海燕 2、HTML5音频 本章重点 多媒体元素基本属性 多媒体元素常用方法 多媒体元素重要事件 HTML5音频视频 网页上，大多数音频、视频都是通过插件（如 Flash）来播放的。然而，并非所有浏览器都拥有同样的插件。 HTML 5 提供了播放音频和视频的标准。 规定通过 audio 元素来包含音频的标准方法，通过 video元素来包含视频的标准方法。 HTML5中播放音频、视频文件，只要添加audio、video元素，并简单设置元素的一些基本属性，就可以在页面中播放多媒体文件 audio用于播放音乐文件、其他音频流。 video用于播放电影文件、其他视频流。 说明： 标记中间放置文本内容，可以在不支持该元素的浏览器中使用。 HTML5音频 属性设置 src属性，设置播放的音频、视频文件的URL。 说明： autoplay：自动播放功能,值为true或false，默认值为false。 controls：值为true，表示显示音频元素自带的控制条工具。添加播放、暂停和音量控件。 audio id=“adoMain” src=“aud.mp3” autoplay=“true” controls=“true” 你的浏览器不支持音频 /audio 音频格式 audio 元素支持三种音频格式： Ogg全称OGG Vobis，一种新的音频压缩格式，类似于MP3等现有的音乐格式。 有一点不同的是，它完全免费、开放和没有专利限制的,它有一个很出众的特点，就是支持多声道。 IE9 Firefox3.5 Opera10.5 Chrome3.0 Safari3.0 Ogg Vorbis √ √ √ Mp3 √ √ √ Wav √ √ √ audio 标签的属性 属性 值 描述 autoplay true或false 自动播放功能,默认值为false。音频就绪后马上播放。 controls true或false 值为true，表示显示音频元素自带的控制条工具。添加播放、暂停和音量控件。 loop loop 音频播放完毕后，循环播放 preload preload 音频在页面加载时进行加载，并预备播放。如果使用autoplay，则忽略该属性。 src url 要播放的音频的URL 音频格式 练习： ?!DOCTYPE HTML ? html body audio src=/i/song.ogg controls=controls Your browser does not support the audio element. /audio /body /html ? 使用多媒体元素播放文件 video id = vdomain“ src = “1.mov“ autoplay =true 您的浏览器不支持视频 /video audio id=adomain src=“3.mp3 autoplay=true controls=true /audio 音频使用 上例使用一个 Ogg 文件，适用于 Firefox、Opera 以及 Chrome 浏览器。 要确保适用于 Safari 浏览器，音频文件必须是 MP3 或 Wav 类型。 audio 元素允许多个 source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式： 实例 audio controls=controls source src=song.ogg type=audio/ogg source src=song.mp3 type=audio/mpeg Your browser does not support the audio tag. /audio 练习： !DOCTYPE HTML html body video width=320 height=240 controls=controls source src=/i/movie.ogg type=video/ogg source src=/i/movie.mp4 type=video/mp4 Your browser does not support the video tag. /video /body /html 上面的例子使用一个Ogg文件，适用于 Firefox、Opera 以及 Chrome 浏览器。 要确保适用于 Safari 浏览器，视频文件必须是 MPEG4 类型。 音频格式 实例： !D