HTML5+CSS3网页设计基础教程第6章.ppt

HTML5+CSS3网页设计基础教程 第6章 音频与视频 第*页 第6章 音频与视频 本章概述 本章的学习目标 主要内容 第*页 本章概述 本章讲讨论如何在HTML5中实现音频和视频的播放和控制的革新，认识HTML5的两个重要元素——audio和video，介绍如何利用它们创建引人注目的应用。audio和video元素的出现让HTML5的媒体应用多了新选择，开发人员不必使用插件就能播放音频和食品。对于这两个元素，HTML5规范提供了通用、完整、可脚本化控制的API。然后，会演示如何通过API编程的方式来控制页面中的音频和视频。最后探讨HTML5 Audio和Video在实际中的应用。 第*页 本章的学习目标 掌握音频、视频解码器的基本理论 学会检测浏览器对音频、视频格式的支持 熟悉audio元素和video元素的使用 掌握为音频、视频添加字幕的方法 第*页 主要内容 6.1 HTML5多媒体技术概述 6.2 浏览器音视频支持检测 6.3 audio元素与video元素 6.4 综合实战 6.5 对音频或视频添加字幕 6.6 本章小结 第*页 6.1 HTML5多媒体技术概述 6.1.1 关于编解码器 6.1.2 音频编解码器 6.1.3 视频编解码器 第*页 6.1.1 关于编解码器 音频文件和视频文件其实只是一个容器文件，其中包含了音频和视频的音频轨道、视频轨道和其他元数据。元数据可以是音频或视频的标题、子标题、作者、艺术家、字母等信息。 编解码器的作用是读取特定的容器格式，并对其中的音频和视频轨道进行解码，然后实现播放。大多数编码器对原始音频和视频文件进行了有损压缩，以求得更小的文件大小和更高的压缩比。无损压缩文件大，因此在互联网中没什么优势。 第*页 6.1.2 音频编解码器 AAC（Advanced Audio Coding，高级音频编码） MPEG-1 音频层3 Ogg Vorbis WAV 第*页 6.1.3 视频编解码器 H.264 Ogg Theora VP8 第*页 主要内容 6.1 HTML5多媒体技术概述 6.2 浏览器音视频支持检测 6.3 audio元素与video元素 6.4 综合实战 6.5 对音频或视频添加字幕 6.6 本章小结 第*页 6.2 浏览器音视频支持检测 浏览器 MP3 Wav Ogg Internet Explorer 9+ √ NO NO Chrome 6+ √ YES YES Firefox 3.6+ √ √ √ 浏览器 | 影音格式 Ogg Theora MP4(H.264) WebM Microsoft Internet Explorer9 × √ × Mozilla Firefox5+ √ × √ Google Chrome13+ √ √ √ Apple Safari5+ × √ × Opera11+ √ × √ 第*页 主要内容 6.1 HTML5多媒体技术概述 6.2 浏览器音视频支持检测 6.3 audio元素与video元素 6.4 综合实战 6.5 对音频或视频添加字幕 6.6 本章小结 第*页 6.3 audio元素与video元素 audio元素：HTML5规定了在网页上嵌入音频元素的标准，即使用audio元素。 audio controls source src=horse.ogg type=audio/ogg source src=horse.mp3 type=audio/mpeg source src=horse.wav type=audio/wav 您的浏览器不支持 audio 元素。 /audio 第*页 6.3 audio元素与video元素 HTML5规定了一种通过video元素来包含视频的标准方法。 video元素的使用格式如下： video width=320 height=240 controls source src=movie.mp4 type=video/mp4 source src=movie.ogg type=video/ogg 您的浏览器不支持 HTML5 video 标签。 /video 第*页 主要内容 6.1 HTML5多媒体技术概述 6.2 浏览器音视频支持检测 6.3 audio元素与video元素 6.4 综合实战 6.5 对音频或视频添加字幕 6.6 本章小结 第*页 6.4 综合实战 6.4.1 用脚本控制音乐播放 6.4.2 用脚本控制视频播放 第*页 6.4.1 用脚本控制音乐播放 audio元素一般都提供了默认的播放控制界面。但实际项目中，很多时候需要对播放控制界面进行自定义。这种时候