HTML5基础知识-HTML5多媒体标签.pptx

单元一 HTML5基础知识端基础前WebHTML5多媒体标签1常用多媒体格式2播放音频audio播放视频video34其他多媒体标签1常用多媒体格式音频格式1、WAV 微软和IBM共同开发的PC标准声音格式，文件后缀名.wav。2、MP3 MP3是一种音频压缩技术。文件后缀名.MP3，它被设计用来大幅度地降低音频数据量。3、OGG（Ogg Vorbis） Ogg全称应该是OGG Vobis(ogg Vorbis) 是一种较新的音频压缩格式，文件后缀名.ogg 。1常用多媒体格式视频格式1、MP4 MP4是一套用于音频、视频信息的压缩编码标准，文件扩展名.MP4。2、SWF swf(shock wave flash)是Macromedia（现已被ADOBE公司收购）公司的动画设计软件Flash的专用格式，扩展名为.swf。swf 可以用Adobe Flash Player打开，浏览器必须安装Adobe Flash Player插件。3、WebM WebM由Google提出，是一个开放、免费的媒体文件格式。扩展名为.webm。2使用音频HTML5 规定了一种通过 audio 元素来包含音频 HTML5是Web开发中的一个重要里程碑，它引入了许多新特性，其中多媒体标签的使用极大地丰富了网页内容的表现形式。本篇文章将深入探讨HTML5中的多媒体标签，包括音频和视频的处理，以及其他一些相关多媒体标签。 HTML5支持的多媒体格式有多种。在音频方面，常见的格式有WAV、MP3和OGG。WAV是由微软和IBM合作开发的无损音频格式，文件体积大但音质优秀。MP3是一种广泛使用的有损压缩格式，能够大幅减少文件大小，适合网络传输。OGG是Ogg Vorbis压缩算法的文件格式，提供高质量的音频压缩，同时保持文件尺寸相对较小。 在视频领域，常用的格式包括MP4、SWF和WebM。MP4是目前最流行的视频编码标准，支持各种设备和浏览器。SWF是Adobe Flash的专属格式，过去常用于在线视频和动画，但现在随着Flash逐渐被淘汰，其使用已大大减少。WebM是由Google提出的开放源代码视频格式，旨在提供高质量且高效的网络视频解决方案。 HTML5中，`<audio>`元素用于播放音频文件。基本结构如下： ```html <audio src="音频文件url" controls="controls"> 您的浏览器不支持audio元素。 </audio> ``` `controls`属性使得浏览器显示播放、暂停和音量控制。为了跨浏览器兼容，可以使用多个`<source>`元素，每个元素指定不同格式的音频文件，浏览器会选择首个可识别的格式。 同样，`<video>`元素用于包含和播放视频。基本结构与`<audio>`类似： ```html <video src="视频文件url" width="320" height="240" controls="controls"> 您的浏览器不支持video标签。 </video> ``` `width`和`height`属性定义视频的尺寸，`loop`属性则可以使视频循环播放。对于视频文件，也需要考虑跨浏览器兼容性，可以使用`<source>`元素链接不同格式的视频。 除了`<audio>`和`<video>`，HTML5还有其他多媒体标签。例如，`<embed>`元素通常用于嵌入第三方内容，如音频和视频文件。`<a>`标签也可以指向多媒体文件，大多数浏览器会自动调用合适的插件或应用程序来打开。 ```html <embed src="music/南信版成都.MP4"></embed> <!-- 视频 --> <embed src="music/虫儿飞.mp3"></embed> <!-- 音频 --> <a href="music/虫儿飞.mp3">虫儿飞</a> <!-- 通过链接播放音频 --> ``` 另外，`<marquee>`标签用于创建滚动文本效果，提供了`direction`、`behavior`、`scrollamount`、`scrolldelay`和`loop`等属性来定制滚动行为。 HTML5的多媒体标签极大地提升了网页内容的交互性和用户体验，使得开发者能够更加灵活地处理音频和视频，提供丰富的多媒体体验。然而，为了保证跨浏览器的兼容性，开发者需要对不同格式的多媒体文件有所了解，并正确使用这些标签的属性和兼容性策略。