摘要：随着网络时代的加速发展，人们的生活方式也发生了变化。从2G到5G的网络提速，从台式机的局限到随时用手机上网的便捷，地球已经变成了“地球村”，互联网在不断进步的同时，改善了人们的生活质量。与此同时，计算机的语言也在更新换代。原本的网页只用HTML和CSS来实现，而现在可以使用最新的HTML5和CSS3来实现了，并且还能够通过JavaScript和JQuery等来为网页添加很多的交互和过渡效果，使得现在的网页变得越来越美观。

本次的毕业设计主要研究的是基于HTML5的视频网站的设计与实现。前端使用HTML5和CSS3来实现，同时配合JavaScript和JQuery来美化。后端的数据通过PHP和MySQL来实现，最终实现一个基本的视频网站。

在实现了网页的背景和视频的播放功能后，会增加一些后台管理的操作，方便对数据库中的视频资源进行更新。视频大多来源于腾讯视频的官方下载的免费资源且不做商用。旨在实现一个完整的视频播放的网站效果。

关键词：HTML5  CSS3  JavaScript  web前端  视频网站

目录

摘要

Abstract

1. 绪论-1

1.1 选题背景及目的-1

1.2 国内外web前端网页应用研究现状-1

2. 网页开发及相关技术-3

2.1 开发工具-3

2.1.1 Adobe Photoshop-3

2.1.2 HbuilderX-3

2.1.3 Navicat-3

2.2 网页开发相关技术-4

2.2.1 HTML5+CSS3简介-4

2.2.2 JavaScript简介-5

2.2.3 jQuery简介-5

2.2.4 MySQL简介-6

2.2.5 PHP简介-6

2.3 小结-6

3. 系统可行性及需求分析-7

3.1 技术可行性分析-7

3.2 经济可行性分析-7

3.3 需求分析-7

4．网页详细设计与实现思路-9

4.1 网站首页-9

4.2 下载页面-9

4.3 频道详情页面-9

4.4 视频播放页面-10

4.5 数据库设计-10

4.5.1 概念模型设计-10

4.5.2 数据库设计-12

5. 主要功能的实现-14

5.1 网站首页的实现-14

5.1.1滚动条返回顶部-14

5.1.2轮播效果-14

5.2 下载页面的实现-15

5.2.1动态背景-15

5.2.2新版本特性展开与收起-15

5.2.3安装文件下载-15

5.3 频道详情页面的实现-16

5.4 视频播放页面的实现-16

5.4.1video标签引入视频文件-16

5.4.2video标签的实用属性-17

5.5 数据库的连接实现-17

6. 效果展示-19

6.1 网站首页的展示-19

6.2 下载页面的展示-21

6.3 频道详情页面的展示-22

6.4 视频播放页面的展示-23

7. 总结-25

参考文献-27