三、【技能锤炼】
【案例8-1】 制作音频播放界面
一、案例描述
1、考核知识点
在HTML5中插入音频
2、练习目标
Ø 掌握插入音频的方法
Ø 复习浮动的设置方法
3、需求分析
歌曲播放页面相信大家都不陌生，接下来，通过使用插入音频的方法模仿一个音频播放界面的演示效果。
4、案例分析
1) 效果如图8-1所示。
图8-1 音乐播放界面效果展示
2) 具体实现步骤如下：
a) 定义一个大盒子，里面嵌套两个小盒子来搭建结构。
b) 两个小盒子分别左右浮动，左边的盒子用来添加背景图片，右边的盒子用来添加文字内容和歌曲内容。
二、案例实现
1、制作页面结构
新建HTML页面，代码如下：
2、定义CSS样式
使用内嵌式CSS样式表为页面添加样式，具体CSS代码如下：
保存后，在谷歌浏览器中预览，效果如图8-2所示。
图8-2 音乐播放界面效果展示
注意：
1、controls属性供添加播放、暂停和音量控件。
【案例8-2】
一、案例描述
1、考核知识点
CSS控制视频的宽高
2、练习目标
Ø 掌握视频的插入方法。
Ø 掌握CSS控制视频宽高的方法。
3、需求分析
插入视频为HTML5新增的特性，为了进一步掌握这一特性，接下来，带领大家制作一个视频播放小页面。
4、案例分析
1) 效果如图8-3所示。
图8-3 视频播放效果展示
2) 具体实现步骤如下：
a) 为了使视频在页面居中显示，需在外部嵌套一层大盒子。
b) 通过video元素插入视频，并设置相关属性。
二、案例实现
1、制作页面结构
新建HTML页面，代码如下：
2、定义CSS样式
使用内嵌式CSS样式表为页面添加样式，具体CSS代码如下：
保存后，在谷歌浏览器中预览，效果如图8-4所示。
图8-4 视频播放效果展示
注意：
1、 在HTML5中，运用source元素可以为video元素或audio元素提供多个备用文件。
【案例8-3】 海洋生物
一、案例描述
1、考核知识点
在HTML5中插入视频
2、练习目标
Ø 视频的插入方法。
Ø 复习盒子宽与高的使用方法。
Ø 复习导航栏的设置。
3、需求分析
观看视频时，通常可以通过控制视屏下方的播放控件来调节视频的播放效果，接下来，制作一个包含视频播放控件的视频播放页面。
4、案例分析
1) 效果如图8-5所示。
图8-1 视频及控件效果展示
2) 具体实现步骤如下：
a) 先设定一个大盒子，内部嵌套视频及播放控件。
b) 通过video元素插入视频。
c) 控件结构由无序列表定义，并设置li左浮动。
d) 定义文字样式等。
二、案例实现
1、制作页面结构
新建HTML页面，代码如下：
2、定义CSS样式
使用内嵌式CSS样式表为页面添加样式，具体CSS代码如下：
保存后，在谷歌浏览器中预览，效果如图8-6所示。本案例只需完成页面展示效果即可，按钮功能需通过引入JavaScript代码来实现。
图8-2 视频及控件效果展示
【案例8-4】 为视频添加背景音乐
一、案例描述
1、考核知识点
在HTML5中嵌入音频
在HTML5中嵌入视频
2、练习目标
Ø 掌握音视频的嵌入方法。
Ø 复习定位的设置方法。
3、需求分析
通常在网页中显示的视频是已经添加了背景音乐的，但是，并不是所有的视频都自带背景音乐。接下来，制作一个为视频添加背景音乐的小案例。
4、案例分析
1) 效果如图8-7所示。
图8-3 荷塘月色效果展示
2) 具体实现步骤如下：
a) 设置一个大盒子，内部嵌套音频和视频。
b) 设置大盒子的宽并做相对定位。
c) 设置视频的宽。
d) 设置音频的宽高，并作绝对定位。
二、案例实现
1、制作页面结构
新建HTML页面，代码如下：
2、定义CSS样式
使用内嵌式CSS样式表为页面添加样式，具体CSS代码如下：
保存后，在谷歌浏览器中预览，效果如图8-8所示。
图8-4 荷塘月色效果展示
