Download presentation
Presentation is loading. Please wait.
1
Web前端开发技术与实践 第6章：多媒体 阮晓龙 13938213680 / rxl@hactcm.edu.cn
河南中医学院管理信息工程学科 河南中医学院网络信息中心 2015.9
2
本章主要内容 多媒体基础 HTML5音频与视频 播放控制 解决兼容性问题 字幕 案例：使用播放器插件实现视频播放
3
1.多媒体基础 媒体（Media）是人与人之间实现信息交流的中介，简单地说，就是信息的载体，也称为媒介。
1.1什么是多媒体 媒体（Media）是人与人之间实现信息交流的中介，简单地说，就是信息的载体，也称为媒介。 多媒体（Multimedia）就是多重媒体的意思，可以理解为直接作用于人感官的文字、图形、图像、动画、声音和视频等各种媒体的统称，即多种信息载体的表现形式和传递方式。 Web上使用的多媒体技术，就是利用计算机把文字、图形、影像、动画、声音及视频等媒体信息都数位化，并将其整合在一定的交互式界面上，使计算机具有交互展示不同媒体形态的能力。
4
1.多媒体基础 音频编码： 音频解码： 将声音调制成模拟信号，通过抽样、量化、编码三个步骤再经算法的方式将连续变化的模拟信号转换为数字编码。
1.2音频编码与音频格式 音频编码： 将声音调制成模拟信号，通过抽样、量化、编码三个步骤再经算法的方式将连续变化的模拟信号转换为数字编码。 音频解码： 将已经编码好的音频还原成连续变化的模拟信号，并给扬声器传递声音信号。
5
1.多媒体基础 编解码器包括有损和无损两种： 常见的音频格式： 无损文件太大，不适合在Web中进行播放。
1.2音频编码与音频格式 编解码器包括有损和无损两种： 无损文件太大，不适合在Web中进行播放。 有损编解码器在编码的过程中会丢失一些原来的音频信息。如果希望编码后的音频能够清晰，需要有良好的音频源、优秀的编码算法、高性能的编码软件和恰当的编码参数。 常见的音频格式： CD、WAVE、AIFF、AU、MPEG、MP3、MPEG-4、MIDI、RealAudio、VQF、OggVorbis、AMR、WMA等。
6
1.多媒体基础 视频编码： 视频解码： 通过特定的压缩算法，将某个视频的视频容器转换成另一个视频容器的方式。
1.3视频编码与视频格式 视频编码： 通过特定的压缩算法，将某个视频的视频容器转换成另一个视频容器的方式。 视频解码： 获取视频容器中的视频、音频等文件并播放的过程。
7
1.多媒体基础 视频播放器（解码器）的工作过程： 常见的视频格式：
1.3视频编码与视频格式 视频播放器（解码器）的工作过程： 解析容器格式以找出可以使用的视频和音频轨道，并分析它们的存储结构，以便接下来的解码工作。 对视频流解码，并在屏幕上显示一幅幅的图像。 对音频流解码，同时给扬声器传输声音信号。 常见的视频格式： AVI、MPEG、MOV、ASF、WMV、NAVI、RMVB、3GP、REAL VIDEO、FLV、MKV、F4V、RMVB、WebM等。
8
1.多媒体基础 1.4在Web上能够使用的音频和视频格式
10
1.多媒体基础 1.5如何在Web上播放视频 在HTML5出现之前，向网页中嵌入视频是一件非常麻烦的事，需要引入Flash并且只能使用<object>和<embed>元素来进行。 这样的嵌入方式的特点： 给Web前端开发者的开发带来了一定的困难。 使得用户在进行视频播放的时候必须安装Flash的浏览器插件才可以播放视频，不方便用户的使用。
11
现场演示： 案例6-01：在HTML4页面中播放视频文件
12
2.HTML5音频与视频 Web前端开发者可以通过audio元素播放声音文件或音频流。 audio元素支持三种音频格式：
ACC MP3 Wav Web前端开发者可以通过<source>元素来为同一个音频指定多个源，供不同的浏览器来选择适合自己的播放源。
13
2.HTML5音频与视频 2.1 Audio元素 ACC格式音频在浏览器中的支持情况
14
2.HTML5音频与视频 2.1 Audio元素 WAV格式音频在浏览器中的支持情况
15
2.HTML5音频与视频 2.1 Audio元素 MP3格式音频在浏览器中的支持情况
16
2.HTML5音频与视频 HTML5 也提供了一系列通过video元素来进行视频的标准方法。 video元素支持三种视频格式：
Ogg：带有Theora视频编码和Vorbis音频编码的Ogg文件。 MPEG4：带有H.264视频编码和AAC音频编码的MPEG 4文件 WebM：带有VP8视频编码和Vorbis音频编码的WebM文件。 Web前端开发者可以通过<source>元素来为同一个视频指定多个源，供不同的浏览器来选择适合自己的播放源。
17
2.HTML5音频与视频 2.2 Video元素 Ogg格式音频在浏览器中的支持情况
18
2.HTML5音频与视频 2.2 Video元素 MPG4格式音频在浏览器中的支持情况
19
2.HTML5音频与视频 2.2 Video元素 WEBM格式音频在浏览器中的支持情况
20
2.HTML5音频与视频 audio和video元素的元素属性大致相同：
src：指定媒体数据的URL地址，即播放视频或音频文件的URL地址。 preload：表明视频或音频文件是否需要进行预加载。 none：表示不进行预先加载。 metadata：表示只预先加载媒体的元数据，主要包括媒体字节数、第一帧、播放列表、持续时间等信息。 auto：表示预加载全部视频或音频，该值是默认值。
21
2.HTML5音频与视频 audio和video元素的元素属性大致相同：
poster：video元素的独有属性，用来在视频不可用时，向用户展示一张替代图片，从而避免视频不可用时，页面出现一片空白。 loop：指定是否循环播放视频或音频。 controls：指定是否为视频或音频添加浏览器自带的播放控制条。
22
2.HTML5音频与视频 audio和video元素的元素属性大致相同：
width和height：video元素的独有属性，指定视频的宽度和高度。 error：在读取、使用媒体数据的过程中，出现错误时，error属性将返回一个MediaError对象，该对象通过code的方式将错误状态提供出来。 1（MEDIA_ERR_ABORTED）：数据在下载中因用户操作的原因而被中止。 2（MEDIA_ERR_NETWORK）：确认媒体资源可用，但是在下载时出现网络错误，媒体数据的下载过程被中止。 3（MEDIA_ERR_DECODE）：确认媒体资源可用，但是解码时发生错误。 4（MEDIA_ERR_SRC_NOT_SUPPORTER）：媒体格式不被支持。
23
现场演示： 案例6-02：读取错误状态
24
2.HTML5音频与视频 audio和video元素的元素属性大致相同： networkState：媒体数据在加载过程中读取当前网络状态。
0（NETWORK_EMPTY）：初始状态。 1（NETWORK_IDLE）：浏览器已经选择好用什么编码格式来播放媒体，但尚未建立网络连接。 2（NETWORK_LOADING）：媒体数据加载中。 3（NETWORK_NO_SOURCE）：没有支持的编码格式，不进行加载。 currentSrc：读取正在播放中的媒体数据的URL地址。 buffered：返回一个对象，该对象实现TimeRange接口，以确认浏览器是否已缓存媒体数据，属性值为只读属性。
25
2.HTML5音频与视频 audio和video元素的元素属性大致相同：
readyState：返回媒体当前播放位置的就绪状态，其为只读属性。 0（HAVE_NOTHING）：没有获得任何媒体的信息，当前没有播放数据。 1（HAVE_METADATA）：已经获得到足够的媒体信息，但是当前播放位置没有有效的媒体数据，暂时不能够播放。 2（HAVE_CURRENT_DATA）：当前播放位置已经有数据可以播放，但没有获取到可以让播放器前进的数据。 3（HAVE_FUTURE_DATA）：当前播放位置已经有数据可以播放，而且也获取到了可以让播放器前进的数据。 4（HAVE_ENOUGH_DATA）：当前播放位置已经有数据可以播放，下一帧数据已经获得，且浏览器确认媒体数据以某一种速度进行加载，可以保证有足够的后续数据进行播放。
26
2.HTML5音频与视频 audio和video元素的元素属性大致相同： seeking和seekable
seeking属性：返回布尔值，表示浏览器是否正在请求某一特定播放位置的数据，true表示浏览器正在请求数据；false表示浏览器已经停止请求。 seekable属性：返回TimeRange对象，表示请求到的数据的时间范围。 currentTime、startTime和duration currentTime属性：读取媒体的当前播放位置，通过修改该属性值可以修改当前播放位置。 startTime属性：读取媒体播放的开始时间，通常为0。 duration属性来读取媒体文件总的播放时间。
27
2.HTML5音频与视频 audio和video元素的元素属性大致相同： played、paused和ended
played属性：返回一个TimeRange对象，读取媒体文件已经播放部分的时间段。 paused属性：返回一个布尔值，表示是否处于暂停播放状态。 ended属性：返回一个布尔值，表示是否已经播放完毕。 efaultPlaybackRate和playbackRate defaultPlaybackRate属性：读取或修改媒体默认的播放速率。 playbackRate属性：读取或修改媒体当前的播放速率。
28
2.HTML5音频与视频 audio和video元素的元素属性大致相同： volume和muted
autoplay：设置或返回音视频是否在加载后即开始播放，属性值为true或false。
29
2.HTML5音频与视频 video元素和audio元素具有四种方法：
2.4 Audio和Video的方法 video元素和audio元素具有四种方法： play：使用该方法来播放媒体，自动将元素的paused值变为false。 pause：使用该方法来暂停播放，自动将元素的paused值变为true。 load：使用load方法来重新载入媒体进行播放。 canPlayType：使用该方法来测试浏览器是否支持指定的媒体类型。 空字符串：表示浏览器不支持此种媒体类型。 maybe：表示浏览器可能支持此种媒体类型。 probably：表示浏览器确定支持此种媒体类型。
30
2.HTML5音频与视频 事件处理方式 监听：使用video或audio元素的addEventListener方法来对事件的发生进行监听。
2.5 Audio和Video的事件 事件处理方式 监听：使用video或audio元素的addEventListener方法来对事件的发生进行监听。 videoElement：表示页面上的video或audio元素。 type：事件名称。 listener：表示绑定的函数。 useCapture：一个布尔值，表示该事件的响应顺序。 使用JavaScript脚本中的获取事件句柄。
31
2.HTML5音频与视频 2.5 Audio和Video的事件 事件
33
2.HTML5音频与视频 2.6案例：在网页上使用背景音乐 简介 使用HTML5 <audio>元素实现简单的背景音乐播放，页面被打开后直接加载音频文件，音频文件加载完成后播放，并且可以循环播放音乐。
34
现场演示： 案例6-03：在网页上使用背景音乐
35
2.HTML5音频与视频 2.7案例：在网页上播放视频 简介 使用HTML5 <video>元素实现简单的视频播放功能。
36
现场演示： 案例6-04：在网页上播放视频
37
3.播放控制 预加载媒体文件是播放器中很重要的一项功能，预先将媒体文件加载，可节省等待的时间，提高用户体验。
3.1预加载媒体文件 预加载媒体文件是播放器中很重要的一项功能，预先将媒体文件加载，可节省等待的时间，提高用户体验。 HTML5实现预加载功能十分简单，只需添加preload属性并设置其属性值即可。
38
3.播放控制 <video>中提供了poster属性，可以为视频播放器添加封面图。
3.2视频封面图 <video>中提供了poster属性，可以为视频播放器添加封面图。 poster属性使用十分简单，只需要在<video>标签中加入poster属性并指定封面图路径即可。
39
3.播放控制 video元素声明了autoplay属性，页面加载完成后，视频马上会被自动播放。 video元素增加了两个事件处理函数：
3.3自动播放 video元素声明了autoplay属性，页面加载完成后，视频马上会被自动播放。 video元素增加了两个事件处理函数： 当视频加载完毕，准备开始播放的时候，会触发oncanplay函数来执行预设的动作。 当视频播放完成后，会触发onended函数以停止帧的创建。
40
3.播放控制 3.4循环播放 在video元素中添加loop属性即可实现视频的循环播放。
41
3.播放控制 进行播放控制前，需要设置一些有助于调整实例的变量： speed是视频播放速度，默认为1。 volume为视频音量，默认为1。
3.5添加变量 进行播放控制前，需要设置一些有助于调整实例的变量： speed是视频播放速度，默认为1。 volume为视频音量，默认为1。 muted设置静音状态，默认为不静音。
42
3.播放控制 3.6播放 除了<video>元素中自带的控制条之外，还可以使用<video>的方法、属性和事件来自定义控制条，其步骤为: 清除<video>默认的播放控制条。 使用CSS先定义按钮的样式。 向页面中添加播放按钮元素。 添加一个用于展示播放器状态的div元素。 添加<video>的播放函数videoPlay()。 将播放函数与播放按钮绑定，点击播放按钮后触发播放事件。
43
3.播放控制 3.7暂停 暂停操作是基于<video>的pasue事件开发的。 添加暂停操作的具体步骤和播放按钮的制作相类似。
44
3.播放控制 3.8快放、慢放、慢动作 <video>中可以通过playbackRate获取或设置video播放速度，可以通过此属性进行快放、慢放、慢动作的播放控制。
45
3.播放控制 <video>中的currentTime属性可以获取或设置视频中当前的播放位置，其获取的时间以秒为单位。
3.9快进、快退 <video>中的currentTime属性可以获取或设置视频中当前的播放位置，其获取的时间以秒为单位。
46
3.播放控制 进度条是视频播放是常用的功能，不仅显示视频播放的进度，还可以直接控制视频的播放进度。
3.10进度拖动 进度条是视频播放是常用的功能，不仅显示视频播放的进度，还可以直接控制视频的播放进度。 进度条的实现是基于currentTime属性。
47
3.播放控制 在进行视频播放时，会经常的根据需要调整音量，可增大音量、降低音量和设置静音。
3.11音量控制 在进行视频播放时，会经常的根据需要调整音量，可增大音量、降低音量和设置静音。 <video>的属性muted可以设置是否静音。 <video>的volume属性用于设置视频的音量。
48
3.播放控制 全屏播放是视频播放中很重要的一个功能，其实现过程如下： 设置全屏播放时的样式。 添加全屏播放控制按钮。 添加反射调用函数。
3.12全屏播放 全屏播放是视频播放中很重要的一个功能，其实现过程如下： 设置全屏播放时的样式。 添加全屏播放控制按钮。 添加反射调用函数。 添加全屏函数launchFullscreen()。 添加退出全屏函数exitFullscreen()。 点击全屏按钮后，执行全屏函数，将播放器全屏。
49
3.播放控制 <video>元素中提供了表示视频错误状态的error属性，根据此属性进行播放器的容错处理。
3.13播放器容错处理 <video>元素中提供了表示视频错误状态的error属性，根据此属性进行播放器的容错处理。
50
现场演示： 案例6-05：HTML5播放器-播放控制
51
4.解决兼容性问题 HTML5的Video和Audio元素具有通用、集成和可视化的播放控制API，极大的方便了用户和开发人员。
4.1浏览器对多媒体的兼容性支持 HTML5的Video和Audio元素具有通用、集成和可视化的播放控制API，极大的方便了用户和开发人员。 并不是所有的浏览器都支持该两种元素，又由于解码方式不同，不同浏览器对其元素的媒体格式支持也不同。 查看浏览器对元素的支持情况，主要有以下两种方法： 可以通过网站 以使用动态脚本的方式创建并检测特定函数是否存在。
52
现场演示： 案例6-06：使用Video和Audio的备选内容
53
4.解决兼容性问题 4.2使用多媒体格式提升兼容性 source元素为<video>和 <audio>定义媒介资源，允许规定可替换的视频/音频文件供浏览器根据自身对媒体类型或者编解码器的支持进行选择。 <source>元素的属性： src：指定视频源的URL地址。 type：指定视频源的类型。 media：指定视频的预期媒体类型。
54
现场演示： 案例6-07：使用多媒体元素提升兼容性
55
4.解决兼容性问题 4.3使用Flash提升兼容性 使用多种媒体格式提升兼容性只能提升支持video和audio元素的浏览器的兼容性，如果浏览器不支持该元素，就需要使用Flash代替video和audio元素播放多媒体。 利用脚本检测浏览器对video的支持情况，如果支持的话，使用video播放视频，不支持的话引入Flash播放视频。
56
现场演示： 案例6-08：使用Flash提升兼容性
57
5.字幕 网络视频文本轨道（简称为WebVTT）是用于标记文本轨道的文件格式。
5.1标记时间的文本轨道 网络视频文本轨道（简称为WebVTT）是用于标记文本轨道的文件格式。 它与HTML5的<track>元素相结合，可给音频、视频等媒体资源添加字幕、标题和其他描述信息，并同步显示。
58
5.字幕 文件内容 WebVTT文件是一个简单的纯文本文件，里面包含了以下几种类型的视频信息： 字幕：关于对话的转译或者翻译。
5.1标记时间的文本轨道 文件内容 WebVTT文件是一个简单的纯文本文件，里面包含了以下几种类型的视频信息： 字幕：关于对话的转译或者翻译。 标题：类似于标题，但是还包括音响效果和其他音频信息。 说明：预期为一个单独的文本文件，通过屏幕阅读器描述视频。 章节：旨在帮助用户浏览整个视频。 元数据：默认不打算展示给用户的、和视频有关的信息和内容。
59
5.字幕 文件格式 WebVTT文件是一个以UTF-8为编码，以.vtt 为文件扩展名。 WebVTT文件的头部按如下顺序定义：
5.1标记时间的文本轨道 文件格式 WebVTT文件是一个以UTF-8为编码，以.vtt 为文件扩展名。 WebVTT文件的头部按如下顺序定义： 可选的字节顺序标记（BOM）。 字符串WEBVTT。 一个空格（Space）或制表符（Tab），后面接任意非回车换行的元素。 两个或两个以上的 “WEBVTT行结束符”：回车\r，换行\n，或者同时回车换行\r\n。
60
5.字幕 5.1标记时间的文本轨道 WebVTT标记 WebVTT 文件可以包含一个或多个“WebVTT Cues”, 各个之间用两个或多个WebVTT 行结束符分隔开。 WebVTT 标记允许指定特定时间戳范围内的文字（如字幕），同时也指定一个唯一的标识符，标识符由简单字符串构成，不包含-->，也不包含任何的WebVTT行结束符。
61
5.字幕 WebVTT标记 时间戳遵循一个标准格式：
5.1标记时间的文本轨道 WebVTT标记 时间戳遵循一个标准格式： 小时部分[hh:]是可选的，毫秒和秒用一个点（如“.”）分离，而不是冒号，时间戳范围的后者必须大于前者。对于不同的Cues，时间戳可以重叠，但在单个标记中，不能有字符串-->或两个连续的行结束符。
62
5.字幕 5.1标记时间的文本轨道 WebVTT Cue设置 在时间范围值后面，可以为标记做设置，具体设置规则如下：
63
注：如果没有设置 Cue 选项，默认位置是底部居中。
5.字幕 5.1标记时间的文本轨道 注：如果没有设置 Cue 选项，默认位置是底部居中。
64
5.字幕 5.1标记时间的文本轨道 WebVTT标记内联样式
65
5.字幕 5.1标记时间的文本轨道 使用<track>元素
66
5.字幕 5.1标记时间的文本轨道 浏览器支持情况 track的浏览器支持情况
67
5.字幕 制作一个简单的包含视频字幕的播放器，主要实现在IE11浏览器上的视频音乐MV的功能，并实现字幕浏览以及播放控制功能。
5.2视频字幕 制作一个简单的包含视频字幕的播放器，主要实现在IE11浏览器上的视频音乐MV的功能，并实现字幕浏览以及播放控制功能。
68
现场演示： 案例6-09：带字幕的视频播放器
69
6.案例：使用播放器插件实现视频播放 案例说明： 插件获取： 案例代码：
插件是在Web前端开发中经常会用到的工具，本案例将通过使用播放器插件的方式实现Web前端中的视频播放。 插件获取： 插件名称为Playr，作者是Julien Villetorte可实现支持字幕，标题，及章节。 通过Github下载Playr（ 案例代码： 将JavaScript和CSS文件引入到网页中，并在video中添加类名称player_video。
71
现场演示： 案例6-10：视频播放器的实现
72
Thanks.
Similar presentations
