《第2.2.9 网页中使用音频和视频ppt课件.ppt》由会员分享，可在线阅读，更多相关《第2.2.9 网页中使用音频和视频ppt课件.ppt（33页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、在此输入您的封面副标题第2.2.9 网页中使用音频和视频中国铁道出版社中国铁道出版社 2016.92016.9李红李红 岳云康岳云康 樊东燕樊东燕 编著编著 编著：编著：李红李红 岳云康岳云康 樊东燕樊东燕中国铁道出版社2016.9中国铁道出版社中国铁道出版社 2016.92016.9李红李红 岳云康岳云康 樊东燕樊东燕 编著编著 主讲：主讲： 李红李红第章第章网页中使用音频和视频网页中使用音频和视频中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B 网页中使用音频和视频本节主要内容：1多媒体概述多媒体概述2网页中使用音视频网页中使用音视频2.3.4 HTML文件命名规则文件命名规
2、则2.3.3 HTML文档标签的使用规范文档标签的使用规范中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B 声音与视频概述 （1）常用的音频格式）常用的音频格式 （2）常用的视频格式）常用的视频格式 （3）HTML5的音、视频格式的音、视频格式中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B 1多媒体概述多媒体概述 （1）常用的音频格式）常用的音频格式 WAV格式。格式。 WMA格式。格式。 MP3格式。格式。 RM格式。格式。 MID格式。格式。中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B 常用的播放器：常用的播放器： 微软公司的媒体播放器微软公
3、司的媒体播放器(Windows Media Player)可以可以放除放除RM格式以外的大多数音频文件；格式以外的大多数音频文件； Real公司的公司的RealPlayer或或RealOne可以放除可以放除WMA格式格式以外的大多数音频文件。以外的大多数音频文件。中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B （2）常用的视频格式）常用的视频格式 WMV格式。格式。 ASF格式。格式。 RM格式。格式。 RMVB格式。格式。 AVI格式。格式。 MPG格式。格式。 Flash格式。格式。中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B （3）HTML5的音、视频格
4、式的音、视频格式 当前，当前，audio 元素支持三种音频格式：元素支持三种音频格式：Ogg、MP3、WAV。 video 元素支持三种视频格式：元素支持三种视频格式：Ogg、MPEG4、WebM。中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B Ogg是带有是带有 Theora 视频编码和视频编码和Vorbis 音频编码的音频编码的 Ogg 文件。文件。 MPEG4 是带有是带有 H.264 视频编码和视频编码和 AAC 音频编码的音频编码的 MPEG 4 文件。文件。 WebM 是带有是带有 VP8 视频编码和视频编码和 Vorbis 音频编码的音频编码的 WebM 文件。文
5、件。中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B （1）插件方式）插件方式 在在 HTML 中播放音视频一般使用插件，浏览器插件是一中播放音视频一般使用插件，浏览器插件是一种扩展浏览器标准功能的小型计算机程序。种扩展浏览器标准功能的小型计算机程序。 网页主要使用网页主要使用 或或 标签来将插件添加标签来将插件添加到到 HTML 页面。页面。中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B 标签。作用是在标签。作用是在 HTML 页面中嵌入多媒页面中嵌入多媒体元素，可以是音频，也可以是视频。基本语法格式体元素，可以是音频，也可以是视频。基本语法格式如下：如下： 其
6、中：其中：autostart控制播放形式，控制播放形式，true是自动播放，是自动播放，false表示手动播放。表示手动播放。width 和和height,控制窗口大小。控制窗口大小。如：如：中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B 标签。标签。 使用使用object标签可以在网页中嵌入各种多媒体，例如标签可以在网页中嵌入各种多媒体，例如Flash、Java Applets、MP3、QuickTime Movies等，等，也可以嵌入图像、也可以嵌入图像、ActiveX、PDF 以及以及 Flash。中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B param
7、标签通常配合标签通常配合object标签一同使用，标签一同使用，object标签内标签内除了除了param标签外，其它的内容将在浏览器不支持标签外，其它的内容将在浏览器不支持objcet标签时显示。标签时显示。object 对象提供了解决方案，通过这种方对象提供了解决方案，通过这种方式，我们能够嵌套多个式，我们能够嵌套多个 object 元素（每个对应一个浏览元素（每个对应一个浏览器）。器）。中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B （2）HTML5直接引用多媒体直接引用多媒体 HTML 5的的。 用于链接多媒体源文件。目前，用于链接多媒体源文件。目前，video 元素支
8、元素支持三种视频格式持三种视频格式ogg、MPEG4或或webM。以下。以下HTML片段片段会显示一段嵌入网页的会显示一段嵌入网页的mp4格式的视频：格式的视频：中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B 中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B 注意：注意： 元素在老式浏览器中无效，元素在老式浏览器中无效， 元素元素无法通过无法通过 HTML 4 和和 XHTML 验证。验证。 最好的最好的 HTML 解决方法是您必须把视频转换为很多不同解决方法是您必须把视频转换为很多不同的格式，并采用的格式，并采用HTML 5 + + 的方法的方法设计。如：设计。
9、如：中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B 中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B HTML5的音频标签的音频标签。在。在HTML5之前，大之前，大多数音频是通过插件来播放的，播放不同的声音需要不同多数音频是通过插件来播放的，播放不同的声音需要不同的插件。的插件。HTML5 规定了一种通过规定了一种通过 audio 元素来包含音频元素来包含音频的标准方法，目前，在的标准方法，目前，在HTML5规范的网页中规范的网页中audio 元素元素支持支持ogg、mp3、wav三种音频格式文件，设置背景音乐三种音频格式文件，设置背景音乐可以使用以下代码：可以
10、使用以下代码： 中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B HTML5中播放中播放swf格式视频文件格式视频文件3. HTML5中播放中播放FLV格式视频文件格式视频文件5. HTML5中播放其他音频或视频文件中播放其他音频或视频文件中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B 在在Dreamweaver CC中插入中插入HTML5视频的方法为：视频的方法为： 选择选择“插入插入”“媒体媒体”“HTML5 Video”，或者点，或者点击插入面板上的击插入面板上的“媒体媒体”选项卡上的图标，即可插入一个选项卡上的图标，即可插入一个HTML5 Video视频图
11、标。视频图标。 选择这个选择这个video视频图标，会出现如图视频图标，会出现如图3-29所示的所示的“视视频属性面板频属性面板”，在属性面板上可以设置相关的属性，如宽，在属性面板上可以设置相关的属性，如宽（W）、高（）、高（H）、源文件（源）、替代源文件（）、源文件（源）、替代源文件（Alt源源1、Alt源源2）等。）等。 在在“源源”后选择视频文件的文件地址，或者是后选择视频文件的文件地址，或者是Alt源源1、Alt源源2文件地址。代码如下：文件地址。代码如下：中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B 中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B 在
12、在Dreamweaver CC中插入中插入HTML5音频的方法为：音频的方法为： 选择选择“插入插入”“媒体媒体”“HTML5 Audeo”，或者点击，或者点击插入面板上的插入面板上的“媒体媒体”选项卡上的图标，即可插入一个选项卡上的图标，即可插入一个HTML5 Audeo音频图标。音频图标。 选择这个音频图标，会出现选择这个音频图标，会出现“音频属性面板音频属性面板”，如图，如图9-30，在属性面板上可以设置相关的属性，如宽源文件（源，在属性面板上可以设置相关的属性，如宽源文件（源）、替代源文件（）、替代源文件（Alt源源1、Alt源源2）等。）等。中国铁道出版社电子商务网页设计 （第2版）
13、课件 2016.9B HTML5中播放中播放FLV格式视频文件格式视频文件 在在Dreamweaver CC中插入中插入FLV格式视频的方法为：格式视频的方法为： 新建新建“插入插入”“媒体媒体”“Flash Video”，或者点击插，或者点击插入面板上的入面板上的“媒体媒体”选项卡上的图标，即可打开一个选项卡上的图标，即可打开一个“插插入入FLV”对话框，如图对话框，如图3-31所示。所示。选择flv视频源文件选择视频外观设置视频播放窗口的大小中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B 设置设置“插入插入FLV”对话框，内容如下：对话框，内容如下： URL：单击：单击“浏
14、览浏览.”按钮选择按钮选择flv视频源文件。视频源文件。 外观：单击后面的下拉菜单，选择视频控制器的外观。外观：单击后面的下拉菜单，选择视频控制器的外观。 宽度：设置网页中视频占用区域的宽度。宽度：设置网页中视频占用区域的宽度。 高度：设置网页中视频占用区域的高度。高度：设置网页中视频占用区域的高度。 自动播放：在前面的复选框中选择是否自动播放。自动播放：在前面的复选框中选择是否自动播放。 设置设置“插入插入FLV”对话框完成后，单击对话框完成后，单击“确定确定”按钮。按钮。 代码视图将添加一段代码视图将添加一段的代码和在的代码和在scripts文件夹文件夹下添加一个下添加一个js文件。其中包
15、括一段支持文件。其中包括一段支持FLV格式的非格式的非IE浏浏览器代码。览器代码。中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B HTML5中播放中播放swf格式视频文件格式视频文件 插入插入SWF格式视频文件的方法是：点击格式视频文件的方法是：点击“常用常用”工具栏工具栏上按钮，或者选择上按钮，或者选择“插入插入”“媒体媒体”“Flash SWF”，打开打开“选择选择SWF”对话框；从中选择对话框；从中选择“.swf”文件所在文件文件所在文件夹，单击确定；夹，单击确定；SWF视频属性对话框如图视频属性对话框如图3-32所示。所示。中国铁道出版社电子商务网页设计 （第2版）课件
16、 2016.9B HTML5中播放其他音频或视频文件中播放其他音频或视频文件 如果要在网页中播放其他音频或视频文件（如如果要在网页中播放其他音频或视频文件（如WMV文件文件），步骤如下：），步骤如下： 可以点击可以点击“插入面板插入面板”上的上的“媒体媒体”选项卡中的图标，选项卡中的图标，或者选择或者选择“插入插入”“媒体媒体”“插件插件”，会打开，会打开“选择文选择文件件”对话框。对话框。 选择视频文件的选择夹选中文件后，单击选择视频文件的选择夹选中文件后，单击“确定确定”。 选择刚插入的，出现如图选择刚插入的，出现如图3-33的的“插件属性面板插件属性面板”，在，在属性面板中设置插件的属性
17、面板中设置插件的“宽宽”、“高高”“”“参数参数”等属性。等属性。中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B 图图3-33 插件属性对话框插件属性对话框 选择选择“插件插件URL”后面的图标，选择插件的执行程序，后面的图标，选择插件的执行程序，如如WMV格式文件的网络插件程序是格式文件的网络插件程序是C:/program/Windows Media Player/wmplayer.exe。拷。拷贝该文件到你的文件夹下即可。此时的代码视图为：贝该文件到你的文件夹下即可。此时的代码视图为：中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B 添加背景音乐 背景音乐是体
18、现网页个性和风格的一种常用手段，但由背景音乐是体现网页个性和风格的一种常用手段，但由于背景音乐并不是一种标准的网页属性，所以需要通过于背景音乐并不是一种标准的网页属性，所以需要通过修改源代码的方式为网页添加，步骤如下。修改源代码的方式为网页添加，步骤如下。 （1 1）打开需要添加背景音乐的网页的源文件。）打开需要添加背景音乐的网页的源文件。 （2 2）在）在 和和 之间添加以下代码：之间添加以下代码：bgsound src=，如，如图所示。图所示。 在 之间添加代码 添加此段代码 中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B bgsound bgsound 标记符的基本属性：
19、标记符的基本属性： srcsrc，用于指定背景音乐的源文件；，用于指定背景音乐的源文件； looploop，用于指定背景音乐重复的次数；如果不指定该属性，用于指定背景音乐重复的次数；如果不指定该属性，则背景音乐无限循环。，则背景音乐无限循环。中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B 链接文件是将声音与视频添加到链接文件是将声音与视频添加到 Web Web 页面的一种简单而页面的一种简单而有效的方法。操作步骤如下。有效的方法。操作步骤如下。 （1 1）选择要用作超链接的文本或图像。）选择要用作超链接的文本或图像。 （2 2）在）在“属性检查器属性检查器”中，单击链接文本框后的中，单击链接文本框后的“浏览浏览文件文件”按钮按钮 ，选择站点中的音频文件或视频文件，选择站点中的音频文件或视频文件。中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B 本节主要介绍网页中音频和视频的使用。本节主要介绍网页中音频和视频的使用。中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B