第8章多媒体技术PPT课件

让信息技术教学更简单，信息技术学习更有效。第8章多媒体技术，HTML5多媒体功能嵌入视频和音频，视频和音频方法和事件，多媒体支持条件CSS控制视频宽度和高度，内容，8.1HTML5多媒体功能，知识介绍，HTML5多媒体功能，8.1知识点解释。在HTML5出现之前，没有将视频和音频嵌入页面的标准方法。在大多数情况下，多媒体内容是通过集成到网络浏览器中的第三方插件或应用程序放在页面上的。以这种方式实现的音视频功能不仅需要第三方插件的帮助，还可以实现复杂冗长的代码。在HTML5中使用新添加的视频和音频标签可以避免这样的问题。1、HTML5多媒体功能，8.2多媒体支持条件，知识介绍，视频和音频编解码器，多媒体格式，支持视频和音频的浏览器，8.2知识点说明，(1)视频编解码器具体介绍如下。H.264H.264是继MPEG4之后，由国际标准化组织(ISO)和国际电信联盟(ITU)联合提出的新一代数字视频压缩格式。它是国际电信联盟(ITU-t)以H.26x系列命名的视频编解码技术标准之一。TheoraTheora是一种自由开放的视频压缩编码技术，支持从VP3HD到MPEG-4/DiVX的视频格式。VP8VP8是第八代On2视频，它可以用更少的数据提供更高质量的视频，并且可以用更少的处理能力播放视频。1、视频和音频编解码器，8.2知识点解释，(2)音频编解码器对它们的具体介绍如下。ACCACC是高级音频编码的简称，这是一种基于MPEG-2的音频编码技术，取代了MP3格式。在2000年MPEG-4标准出现后，AAC重新整合了它的特点，加入了SBR技术和PS技术。MP3MP3是MPEG-1音频层3的缩写。它旨在大大减少音频数据量。有了这项技术，音乐可以被压缩成压缩率为1:10甚至1:12的更小的文件，而不会显著降低音质。OggOgg是一种新的音频压缩格式，类似于现有的音乐格式，如MP3。OGGVorbis有一个支持多通道的突出特性。1、视频和音频编解码器，8.2知识点讲解，(1)视频格式视频格式包括视频编码、音频编码和容器格式。嵌入在HTML5中的视频格式主要包括Ogg、MPEG4、WebM等。详情如下。Ogg:指具有Theora视频编码和Vorbis音频编码的Ogg文件。MPEG4:指的是一个MPEG4文件与H.264视频编码和AAC音频编码。WebM:带有VP8视频编码和Vorbis音频编码的WebM文件。2、多媒体格式，8.2知识点讲解，(2)音频格式音频格式指的是要在计算机中播放或处理的音频文件。嵌入在HTML5中的音频格式主要包括Vorbis、MP3、Wav等。详情如下。Vorbis:另一个类似于ACC的免费开源音频编码，是用来取代MP3的下一代音频压缩技术。MP3:是一种音频压缩技术，它的全称是视频专家压缩的标准音频层3(movingpictureexpertsgroupadiolayeriii)，缩写为MP3。它旨在大大减少音频数据量。这是一种标准的视窗文件格式。文件扩展名为“WAV”。数据本身是PCM或压缩的，是无损音乐格式之一。2，多媒体格式，8.2知识点讲解，到目前为止，许多浏览器已经实现了对HTML5视频和音频元素的支持。下表显示了每个浏览器的支持。3。支持视频和音频的浏览器，8.3嵌入视频和音频，知识介绍，在HTML5中嵌入视频，在HTML5中嵌入音频，在音频和视频中嵌入源元素，调用网页多媒体文件，8.3解释知识点。在HTML5中，视频标签用于定义播放视频文件的标准，它支持三种视频格式，即Ogg、WebM和MPEG4。基本语法格式如下：在上述语法格式中，src属性用于设置视频文件的路径，controls属性用于为视频提供回放控制。这两个属性是视频元素的基本属性。1.在HTML5中嵌入视频，并解释8.3中的知识点。值得一提的是，可以向视频元素添加其他属性，以进一步优化视频的播放效果，如下表所示。1.在HTML5中嵌入视频，并解释8.3中的知识点。在HTML5中，音频标签用于定义播放音频文件的标准。它支持三种音频格式，即Ogg、MP3和wav。其基本格式如下：在上述基本格式中，src属性用于设置音频文件的路径，controls属性用于为音频提供播放控制，这与视频元素的属性非常相似。对于不支持音频元素的浏览器显示，也可以在和之间插入文本。2.在HTML5中嵌入音频，并解释8.3中的知识点。值得一提的是，可以向音频元素添加其他属性，以进一步优化音频播放效果，如下表所示。2.在HTML5中嵌入音频，并在8.3中解释知识点。尽管html5支持Ogg、MPEG4和WebM视频格式以及Vorbis、MP3和Wav音频格式，但浏览器并不完全支持这些格式，如下表所示。在HTML5中，源元素可用于为视频元素或音频元素提供多个备份文件。使用源元素添加音频的基本格式如下：源元素通常设置两个属性：src:用于指定媒体文件的URL地址。类型：指定媒体文件的类型。(1)获取音频和视频文件的网址。打开网页，在搜索工具栏中输入搜索关键字“MP3”。页面上将出现下载歌曲的网站的链接，如下图所示。(4)调用网页的多媒体文件，(8.3)讲解知识点，(1)获取音视频文件的网址。选择一首歌曲，点击标有线框的下载按钮，弹出如下图所示的歌曲下载界面。4.调用网络多媒体文件，8.3。解释知识点，并(1)获取音频和视频文件的网址。选择“标准质量”MP3音乐，点击下载按钮，弹出如下图所示的歌曲下载对话框。线框标记的部分是歌曲的网址。选择并复制网址路径。(2)插入音频文件并将复制的网址路径粘贴到音频文件的样本代码中，如下：调用网络视频文件的方法类似于调用音频文件的方法，还需要获取相关视频文件的网址地址，然后通过相关代码插入视频文件。示例代码如下。调用网络多媒体文件，调用网络音频文件，调用网络视频文件，8.4CSS控制视频的宽度和高度，知识介绍，CSS控制视频的宽度和高度，8.4知识点讲解。在HTML5中，通常通过向视频元素添加宽度和高度来为视频保留一定的空间，以便浏览器在加载页面时提前确定视频的大小，为其保留合适的空间，并使页面布局不变。1、CSS控制视频宽度和高度，8.5视音频方法和事件，知识介绍，视音频方法和事件，8.5知识点讲解，(1)视音频方法。HTML5为视频和音频提供了一种接口方法，如下表所示。1、视听方法和事件，8.5知识点讲解，(2)视听事件。HTML5还为视频和音频元素提供了一系列接口事件，如下表所示。1、视音频方法和事件，8.6HTML5音视频发展趋势，知识介绍，HTML5音视频发展趋势，8.6知识点讲解，(1)流媒体音视频目前HTML5视频范围内，没有比特率切换标准，所以对视频的支持仅限于所有的加载和回放。然而，流媒体格式是一种理想的格式，需要在未来的设计中进行标准化。(HTML5媒体的跨资源共享受限于超文本传输协议的跨资源共享。HTML5为跨资源共享提供了特殊的规范，不仅限于音频和视频。1、HTML5音视频发展趋势，8.6知识点说明，(3)字幕支持如果在HTML5中编辑音视频可能还需要控制字幕。基于SRT流行字幕格式的字幕支持规范仍在准备中。(4)支持编解码器使用HTML5的最大缺点是缺乏对通用编解码器的支持。随着时间的推移，最终将形成一个通用高效的编解码器，未来的多媒体形式将比现在更加丰富。1、HTML5音视频发展趋势，8.7制作音乐播放界面，本章前几节重点介绍多媒体格式、浏览器对HTML5音视频的支持，以及在HTML5页面中嵌入音视频文件的方法。为了加深读者对网页上多媒体标签的理解和应用，本节将以案例的形式逐步制作一个音乐播放界面，效果如下图所示。案例介绍，8.7案例实施，本章总结。本章首先介绍了HTML5的多媒体特性、多媒体格式和浏览器支持，然后解释了在HTML5页面中嵌入多媒体文件的方法，最后简要介绍了HTML5的音视频方法、事件和发展趋势，并利用所学知识制作了一个音乐播放页面。通过本章的学习，读者应该能够了解HTML5多媒体文件的特点，熟悉