第8章 多媒体技术_补充案例.docxVIP

博学谷——让IT教学更简单，让IT学习更有效 PAGE 1 第八章 补充案例 【案例8-1】 制作音频播放界面 一、案例描述 考核知识点 在HTML5中插入音频 练习目标 掌握插入音频的方法 复习浮动的设置方法 需求分析 歌曲播放页面相信大家都不陌生，接下来，通过使用插入音频的方法模仿一个音频播放界面的演示效果。 案例分析 效果如图8-1所示。 音乐播放界面效果展示 具体实现步骤如下： 定义一个大盒子，里面嵌套两个小盒子来搭建结构。 两个小盒子分别左右浮动，左边的盒子用来添加背景图片，右边的盒子用来添加文字内容和歌曲内容。 二、案例实现 1、制作页面结构 新建HTML页面，代码如下： !doctype html html head meta charset=utf-8 title制作音频播放页面/title /head body div class=box div class=left/div div class=right a href=#奔跑/a p歌手：羽泉/p audio src=media/benpao.mp3 controls=controls/audio /div /div /body /html 2、定义CSS样式 使用内嵌式CSS样式表为页面添加样式，具体CSS代码如下： style type=text/css .box{ width:600px; height:300px; border:1px solid #ccc; } .left{ width:300px; height:300px; float: left; background:url(images/guangpan.gif) 0 0 no-repeat; } .right{ padding-top: 100px; width:300px; height:200px; float: right; } /style 保存后，在谷歌浏览器中预览，效果如图8-2所示。 音乐播放界面效果展示 注意： 1、controls属性供添加播放、暂停和音量控件。 【案例8-2】 一、案例描述 考核知识点 CSS控制视频的宽高 练习目标 掌握视频的插入方法。 掌握CSS控制视频宽高的方法。 需求分析 插入视频为HTML5新增的特性，为了进一步掌握这一特性，接下来，带领大家制作一个视频播放小页面。 案例分析 效果如图8-3所示。 视频播放效果展示 具体实现步骤如下： 为了使视频在页面居中显示，需在外部嵌套一层大盒子。 通过video元素插入视频，并设置相关属性。 二、案例实现 1、制作页面结构 新建HTML页面，代码如下： !doctype html html head meta charset=utf-8 title制作视频播放小页面/title /head body div class=box video autoplay controls loop source src=media/movie.ogg /video /div /body /html 2、定义CSS样式 使用内嵌式CSS样式表为页面添加样式，具体CSS代码如下： style type=text/css .box{ width:300px; margin:0 auto; } video{width:300px;} /style 保存后，在谷歌浏览器中预览，效果如图8-4所示。 视频播放效果展示 注意： 1、在HTML5中，运用source元素可以为video元素或audio元素提供多个备用文件。 【案例8-3】 海洋生物 一、案例描述 考核知识点 在HTML5中插入视频 练习目标 视频的插入方法。 复习盒子宽与高的使用方法。 复习导航栏的设置。 需求分析 观看视频时，通常可以通过控制视屏下方的播放控件来调节视频的播放效果，接下来，制作一个包含视频播放控件的视频播放页面。 案例分析 效果如图8-5所示。 视频及控件效果展示 具体实现步骤如下： 先设定一个大盒子，内部嵌套视频及播放控件。 通过video元素插入视频。 控件结构由无序列表定义，并设置li左浮动。 定义文字样式等。 二、案例实现 1、制作页面结构 新建HTML页面，代码如下： !doctype html html head meta charset=utf-8 title海洋生物/title /head body div class=box video autoplay controls loop source src=media/movie.mp4 /video nav ul li播放/li li暂停/li li音量﹢/li