三、【技能锤炼】
【案例8-5】制作视频播放列表
一、案例描述
1、考核知识点
在HTML5中嵌入视频
2、练习目标
Ø 掌握视频的插入方法。
Ø 掌握视频宽与高的设置方法。
Ø 复习盒子模型。
Ø 复习定位的设置方法。
3、需求分析
播放列表页对于大家来说并不陌生，主要用于显示视频的播放顺序和当前播放的视频画面，接下来，将模仿制作一个视频播放列表页。
4、案例分析
1) 效果如图8-9所示。
图8-1 视频播放列表效果展示
2) 具体实现步骤如下：
a) 设置一个大盒子内部嵌套视频和无序列表。
b) 设置视频的宽，并相对大盒子做绝对定位。
c) 设置无序列表的宽、高，同样相对大盒子做绝对定位。
d) 设置<img>标记左浮动，<p>标记右浮动。
二、案例实现
1、制作页面结构
新建HTML页面，代码如下：
2、定义CSS样式
使用内嵌式CSS样式表为页面添加样式，具体CSS代码如下：
保存后，在谷歌浏览器中预览，效果如图8-10所示。这里只演示页面展示效果，视频切换需通过JavaScript实现。
图8-2 视频播放列表效果展示
【案例8-6】 梦幻仙境
一、案例描述
1、考核知识点
在HTML5中插入视频
2、练习目标
Ø 掌握视频的插入方法。
Ø 复习盒子宽、高的设置。
Ø 复习定位的设置方法。
3、需求分析
播放中的视频通常可以进行点赞，分享给好友，锁屏等操作，接下来，就带领大家模仿一款视频操作页面。
4、案例分析
1) 效果如图8-11所示。
图8-3 播放中视频效果展示1
2) 当鼠标悬浮到视频上时，效果如图8-12所示。
图8-4 播放中视频效果展示2
3) 具体实现步骤如下：
a) 设置一个大盒子，内部嵌套视频和无序列表结构。
b) 将无序列表定位到大盒子的右侧，并隐藏显示。
c) 设置<li>标记的宽高等样式。
二、案例实现
1、制作页面结构
新建HTML页面，代码如下：
2、定义CSS样式
使用内嵌式CSS样式表为页面添加样式，具体CSS代码如下：
保存后，在谷歌浏览器中预览，效果如图8-13所示。
图8-5 播放中视频效果展示1
当鼠标悬浮到视频上时，效果如图8-14所示。
图8-6 播放中视频效果展示2
本章前几节重点讲解了多媒体的格式、浏览器对HTML5音视频的支持情况以及在HTML5页面中嵌入音视频文件的方法。为了加深读者对网页多媒体标记的理解和运用，本节将通过案例的形式分步骤制作一个音乐播放界面，其效果如图8-15所示。
图8-16 音乐播放界面效果图
8.1.1 分析效果图
1、结构分析
观察效果图8-15容易看出音乐播放界面整体由背景图、左边的唱片以及右边的歌词三部分组成。其中背景图部分是插入的视频，可以通过video标签定义，唱片部分由两个盒子嵌套组成，可以通过两个div进行定义，而右边的歌词部分可以通过h2和p标记定义。效果图8-15对应的结构如图8-16所示。
图8-17 页面结构图
2、样式分析
控制效果图8-15的样式主要分为以下几个部分：
（1）. 通过最外层的大盒子对页面进行整体控制，需要对其设置宽度、高度、绝对定位等样式。
（2）. 为大盒子添加视频作为页面背景，需要对其设置宽度、高度、绝对定位和外边距，使其始终显示在浏览器居中位置。
（3）. 为左边控制唱片部分的div添加样式，需要对其设置宽高、圆角边框、内阴影以及背景图片。
（4）. 为右边歌词部分的h2和p标记添加样式，需要对其设置宽高、背景以及字体样式。其中歌曲标题使用特殊字体，因此需要运用@font-face属性添加字体样式。
8.1.2 制作页面结构
根据上面的分析，使用相应的HTML标记来搭建网页结构，如例8-4所示。
例8-4 example04tml
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>音乐播放页面</title>
6 </head>
7 <body>
8 <divid="box-video">
9 <videosrc="video/mailang.webm" autoplay="autoplay"loop="loop">浏览器不支持video标签</video>
10 <divclass="cd">
11 <divclass="center"></div>
12 </div>
13 <div>
14 <h2>风中的麦浪</h2>
15 <p>爱过的地方<br/>当微风带着收获的味道<br/>吹向我脸庞<br/>想起你轻柔的话语<br/>曾打湿我眼眶<br/>嗯…啦…嗯…啦…<br/>我们曾在田野里歌唱<br/>在冬季盼望<br/>却没能等到阳光下</p>
16 <audiosrc="http://yinyueshiting.baidu.com/data2/music/123303367/1241435144815766164.mp3?xcode=040035f9879b39136f333bb99c6701d9"autoplay="autoplay" loop="loop" ></audio>
17 </div>
18 </div>
19 </body>
20 </html>
在例8-4中，最外层的div用于对音乐播放页面进行整体控制，第10~12行代码用于控制页面唱片部分的结构，第13~17行代码用于控制页面歌词部分的结构。
运行例8-4，效果如图8-17所示。
图8-18 HTML页面效果图
8.1.3 定义CSS样式
搭建完页面的结构，接下来为页面添加CSS样式。本节采用从整体到局部的方式实现图8-15所示的效果，具体如下。
1、 定义基础样式
在定义CSS样式时，首先要清除浏览器默认样式，具体CSS代码如下：
*{margin:0; padding:0; }
2、 整体控制音乐播放界面
通过一个大的div对音乐播放界面进行整体控制，需要将其宽度设置为100%，高度设置为100%，使其自适应浏览器大小，具体代码如下。
#box-video{
width:100%;
height:100%;
position:absolute;
overflow:hidden;
}
在上面控制音乐播放界面的样式代码中，“overflow:hidden;”样式用于隐藏浏览器滚动条，使视频能够固定的浏览器界面中，不被拖动。
3、 设置视频文件样式
运用video标签在页面中嵌入视频。由于视频宽高远超出浏览器界面大小，因此在设置时要通过最小宽度和最大宽度将视频大小限制在一定范围内，使其自适应浏览器大小。具体代码如下。
/*插入视频*/
#box-video video{
min-width:100%;
min-height:100%;
max-width:4000%;
max-height:4000%;
position:absolute;
top:50%;
left:50%;
margin-left:-1350px;
margin-top:-540px;
}
在上面控制视频的样式代码中，通过定位和margin属性将视频始终定位在浏览器界面中间位，这样无论浏览器界面放大或缩小，视频都将在浏览器界面居中显示。
4、 设置唱片部分样式
唱片部分，可以将两个圆看做成嵌套在一起的父子盒子，其中父盒子需要对其应用圆角边框样式和阴影样式，子盒子需要对其设置定位是其始终显示在父元素中心位置。具体代码如下。
/*唱片部分*/
.cd{
width:422px;
height:422px;
position:absolute;
top:25%;
left:10%;
z-index:2;
border-radius:50%;
border:10pxsolid #FFF;
box-shadow:5px5px 15px #000;
background:url(images/cd_img.jpg)no-repeat;
}
.center{
width:100px;
height:100px;
background-color:#000;
border-radius:50%;
position:absolute;
top:50%;
left:50%;
margin-left:-50px;
margin-top:-50px;
z-index:3;
border:5pxsolid #FFF;
background-image:url(images/yinfu.gif);
background-position:center center;
background-repeat:no-repeat;
}
在上面控制唱片样式的代码中，需要对父盒子应用“z-index:2;”样式，对子盒子应用“z-index:3;”样式，使父盒子显示在video元素上层、子盒子显示在父盒子上层。
5、 设置歌词部分样式
歌词部分可以看做是一个大的div内部嵌套一个h2标记和一个p标记，其中p标记的背景是一张渐变图片，需要让其沿X轴平铺，具体代码如下。
/*歌词部分*/
.song{
position:absolute;
top:25%;
left:50%;
}
@font-face{
font-family:MD;
src:url(font/MD.ttf);
}
h2{
font-family:MD;
font-size:110px;
color:#913805;
}
p{
width:556px;
height:300px;
font-family:"微软雅黑";
padding-left:30px;
line-height:30px;
background:url(images/bg.png)repeat-x;
box-sizing:border-box;
}
至此，我们就完成了效果图8-15所示音乐播放界面的CSS样式部分。将该样式应用于网页后，效果如图8-18所示。
图8-19 页面最终效果图
