实验三 HTML5音视频嵌入实验 .docVIP

信息工程学院

实验报告用纸

实验名称:HTML5音视频嵌入姓名:刘波实验场地:产教A111同组者：

第页

实验名称：HTML5音视频嵌入

1、实验目的

1）掌握HTML5多媒体技术。

2）掌握列表标签的使用。

2、实验要求

运用HTML5多媒体技术及给出的素材制作一个视频播放页面，效果如图2-1所示。其中头部的导航栏需要添加超链接，当鼠标悬浮时，导航项的背景变为灰色；当页面加载完成后，视频文件会自动循环播放，如图2-2所示。

图2-1视频播放页面

图2-2鼠标悬浮

3、实验环境

硬件：PC机

软件：XP、WIN11系统，Web浏览器，HBuilder

4、实验操作步骤

1.搭建基本结构，如图4-1所示。

图4-1搭建基本结构

保存并运行实践案例，效果如图4-2所示。

图4-2鼠标悬浮

2．定义CSS样式

（1）引入CSS样式

linkrel=stylesheettype=text/csshref=style.css

（2）定义基础样式，代码如图4-3所示。

图4-3定义基础样式

（3）为导航部分添加CSS样式，代码如图4-4所示。

图4-4为导航部分添加CSS样式

（4）为视频部分添加CSS样式，代码如图4-5所示。

图4-5为视频部分添加CSS样式

（5）为视频列表部分添加