html5的视频网站的设计与实现【字数：10530】
随着网络时代的加速发展，人们的生活方式也发生了变化。从2G到5G的网络提速，从台式机的局限到随时用手机上网的便捷，地球已经变成了“地球村”，互联网在不断进步的同时，改善了人们的生活质量。与此同时，计算机的语言也在更新换代。原本的网页只用HTML和CSS来实现，而现在可以使用最新的HTML5和CSS3来实现了，并且还能够通过JavaScript和JQuery等来为网页添加很多的交互和过渡效果，使得现在的网页变得越来越美观。本次的毕业设计主要研究的是基于HTML5的视频网站的设计与实现。前端使用HTML5和CSS3来实现，同时配合JavaScript和JQuery来美化。后端的数据通过PHP和MySQL来实现，最终实现一个基本的视频网站。在实现了网页的背景和视频的播放功能后，会增加一些后台管理的操作，方便对数据库中的视频资源进行更新。视频大多来源于腾讯视频的官方下载的免费资源且不做商用。旨在实现一个完整的视频播放的网站效果。
目 录
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 概念模型设计 1 *好棒文|www.hbsrm.com +Q: ^351916072*
0
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
1. 绪论
1.1 选题背景及目的
如今的互联网已经十分普及，网络渗透进了人们生活的每一个角落。10年前很多家庭还没有电脑，而现在家中不仅有台式电脑还有便携式笔记本电脑。浏览网页变得随心所欲，人们上网的频率也大大提高。在紧张的工作之后，晚上或者周末的空闲时间里很多的人会选择在网上观看视频来放松。由于手机的小屏幕并不能给人提供饱满的视听感受，于是人们会选择PC端的视频网页满足感官体验。PC端相较于移动端具有屏幕更大更清晰、视觉效果冲击力强、听觉效果震撼人心等诸多优势。那么需要实现一个完整的视频网站，就需要用到前端的技术来制作页面和后端的数据来完成功能。
互联网的飞速发展，使得前端开发技术也更新得十分迅速。早期的网站完全由文本组成，只有一些小的图片，所谓的修饰也不过是加标题和段落，页面更谈不上布局。表格的出现使得网页的布局多了一种选择，而这种布局也只是使得页面看起来稍微整齐了一些。随后Flash便诞生了，Flash因为其强大的功能和良好的兼容性在1998年到2005年之间通过Flash3.0至Flash8.0成为了那个时期一骑绝尘的英雄，但它的光芒也在HTML5出现之后开始渐渐暗淡。2015年，微软宣布鼓励网站放弃原有技术，转而使用HTML5技术。而与此同时，YouTube也彻底抛弃了Flash，实现了向HTML5的全面转变。之后的一年内，Twitch和Google也相继放弃了Flash选择了HTML5。就这样HTML5逐渐取代了Flash的霸主地位，Flash的时代从此落下帷幕。
本课题围绕前端网页来展开，通过选取当下比较流行的腾讯视频为参考，结合HTML5+CSS3的网页制作技术，配合JavaScript和jQuery强大的自定义参数动画脚本，让界面的切换、交互等动作显得更加地自然、顺畅。最后，绝大部分的数据都由后台统一提供和管理，后台的数据主要通过PHP操作MySQL数据库来实现。
结合以上所有涉及的知识，本次课题将开发一个页面较为美观，功能较为完善的完整的视频网站，并且具有一定的实用价值。
1.2 国内外web前端网页应用研究现状
HTML5对前端网页开发起到了很大的推动作用。从国外角度看，Google的Web store中的APP、扩展功能等都有用到HTML5的技术，并且Google开发的Chrome浏览器对HTML5也有很好的兼容性支持。HTML5在获得了Google的支持之后，也开始顺利地发展。
HTML5的发展顺应时代潮流，但发展过程也比较曲折汉坎坷。早期的HTML应用性能较差，而且图形渲染主要依赖CPU,无法达到当时流畅度的需求。2012年，Facebook高调宣布其放弃了HTML5，Facebook当时的CEO马克扎克伯格表示，“Facebook的应用完全依赖HTML5是最大的失误，导致浪费了2年宝贵的时间，将来要改为原生应用。”这使得HTML5在初期遭受重创。昔日力推HTML5的苹果，也因为利益限制而为HTML5设置了诸多障碍，HTML5一度跌落谷底。
目 录
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 概念模型设计 1 *好棒文|www.hbsrm.com +Q: ^351916072*
0
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
1. 绪论
1.1 选题背景及目的
如今的互联网已经十分普及，网络渗透进了人们生活的每一个角落。10年前很多家庭还没有电脑，而现在家中不仅有台式电脑还有便携式笔记本电脑。浏览网页变得随心所欲，人们上网的频率也大大提高。在紧张的工作之后，晚上或者周末的空闲时间里很多的人会选择在网上观看视频来放松。由于手机的小屏幕并不能给人提供饱满的视听感受，于是人们会选择PC端的视频网页满足感官体验。PC端相较于移动端具有屏幕更大更清晰、视觉效果冲击力强、听觉效果震撼人心等诸多优势。那么需要实现一个完整的视频网站，就需要用到前端的技术来制作页面和后端的数据来完成功能。
互联网的飞速发展，使得前端开发技术也更新得十分迅速。早期的网站完全由文本组成，只有一些小的图片，所谓的修饰也不过是加标题和段落，页面更谈不上布局。表格的出现使得网页的布局多了一种选择，而这种布局也只是使得页面看起来稍微整齐了一些。随后Flash便诞生了，Flash因为其强大的功能和良好的兼容性在1998年到2005年之间通过Flash3.0至Flash8.0成为了那个时期一骑绝尘的英雄，但它的光芒也在HTML5出现之后开始渐渐暗淡。2015年，微软宣布鼓励网站放弃原有技术，转而使用HTML5技术。而与此同时，YouTube也彻底抛弃了Flash，实现了向HTML5的全面转变。之后的一年内，Twitch和Google也相继放弃了Flash选择了HTML5。就这样HTML5逐渐取代了Flash的霸主地位，Flash的时代从此落下帷幕。
本课题围绕前端网页来展开，通过选取当下比较流行的腾讯视频为参考，结合HTML5+CSS3的网页制作技术，配合JavaScript和jQuery强大的自定义参数动画脚本，让界面的切换、交互等动作显得更加地自然、顺畅。最后，绝大部分的数据都由后台统一提供和管理，后台的数据主要通过PHP操作MySQL数据库来实现。
结合以上所有涉及的知识，本次课题将开发一个页面较为美观，功能较为完善的完整的视频网站，并且具有一定的实用价值。
1.2 国内外web前端网页应用研究现状
HTML5对前端网页开发起到了很大的推动作用。从国外角度看，Google的Web store中的APP、扩展功能等都有用到HTML5的技术，并且Google开发的Chrome浏览器对HTML5也有很好的兼容性支持。HTML5在获得了Google的支持之后，也开始顺利地发展。
HTML5的发展顺应时代潮流，但发展过程也比较曲折汉坎坷。早期的HTML应用性能较差，而且图形渲染主要依赖CPU,无法达到当时流畅度的需求。2012年，Facebook高调宣布其放弃了HTML5，Facebook当时的CEO马克扎克伯格表示，“Facebook的应用完全依赖HTML5是最大的失误，导致浪费了2年宝贵的时间，将来要改为原生应用。”这使得HTML5在初期遭受重创。昔日力推HTML5的苹果，也因为利益限制而为HTML5设置了诸多障碍，HTML5一度跌落谷底。
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/jsjkxyjs/632.html
