svg的在线媒体播放器设计与实现(源码)【字数：13706】
Online Media Player Design and Implement based on SVG摘 要Online Media Player Design and Implement based on SVG摘 要SVG（可缩放矢量图形）是完全基于XML定义的一种矢量图形语法。使用SVG图像作为播放器的一些小图标，使得用户可以任意缩放图像，而不会破坏图像的清晰度以及细节等。有了这一点，就可以使用HTML5、JavaScript 构建前台页面，设计一款完整且具交互性的HTML5播放器。该毕业设计是通过引入Bootstrap框架，并使用HTML5、CSS3和JavaScript技术设计并实现一款基于SVG的多媒体播放器的播放界面，再在此界面的基础上，使用HTML5和JavaScript编写前台页面，其前台界面包含用于交互的导航栏以及媒体文件的分布模块。最后使用PHP技术实现媒体文件的提取以及文件的检索。本文总结了近年来HTML5技术的发展概况，并简介了媒体播放器开发的基础知识，同时对HTML5应用的研究提出了一些看法，以期能为从事HTML5应用开发的技术爱好者们提供参考和帮助。关键词HTML5；JavaScript；PHP；在线播放
目 录
第一章 绪 论 1
1.1 研究背景及意义 1
1.2 HTML5媒体播放器研究现状 1
1.2.1 发展概况 2
1.2.2 目前存在的问题 2
1.3 本文的主要内容 2
第二章 相关技术以及环境配置 4
2.1 相关技术简介 4
2.1.1 PHP简介 4
2.1.2 SVG图标 4
2.1.3 HTML5多媒体播放 5
2.1.4 JavaScript简介 5
2.1.5 CSS3技术简介 5
2.2 开发工具与运行环境介绍 6
2.2.1 AppServ 6
2.2.2 编辑工具PhpStorm 7
2.2.3 Google Chrome浏览器 7
2.2.4 Firefox浏览器 8
2.2.5 JavaScript调试工具 8
*好棒文|www.hbsrm.com +Q: &351916072&
第三章 播放器的总体设计 10
3.1 可行性分析 10
3.1.1经济可行性 10
3.1.2技术可行性 10
3.1.3操作可行性 10
3.2 需求分析 11
3.2.1 功能分析 11
3.2.2 性能分析 12
3.3 媒体文件数据模型与ER图 12
3.4 播放器总体设计 13
3.4.1 系统设计 13
3.4.2 结构设计 14
3.5 数据库设计 17
3.5.1 电影文件表的设计 17
3.5.2 电视剧文件表的设计 17
3.5.3 动漫文件表的设计 18
3.5.4 音乐文件表的设计 18
3.5.5 综艺文件表的设计 18
第四章 播放器的详细设计与实现 20
4.1 Bootstrap框架的引用 20
4.2 播放界面的设计与实现 20
4.3 前台页面的设计与实现 22
4.3.1 图片轮播器的设计 23
4.3.2 导航栏的设计与实现 23
4.3.3 媒体文件布局 24
4.3.4 友情链接的设计 26
4.4 搜索引擎的设计 26
4.4.1 搜索界面 26
4.4.2 检索器 28
第五章 播放器的测试 31
5.1 测试平台与工具 31
5.2 测试方案设计 31
5.2.1 单元测试 31
5.2.2 功能测试 31
5.2.3 兼容性测试 31
5.3 测试结果 32
结 论 33
致 谢 35
参考文献 36
第一章 绪 论
自1999年发布HTML4.0到现在，这十余年间，互联网急速发展，各种应用更是多不胜数，但由于网络标准参差不齐，使得这方面的发展遇到瓶颈。解决网络标准问题迫在眉睫。于是，由WHATWG和万维网联盟（W3C）联合拟定的新标准——HTML5出世了，它引进了许多新的功能，并且能够真正改变用户与文档的交互方式，使得基于HTML5的多媒体播放器的设计与实现变得可能。
研究背景及意义
HTML5是HTML的最新修订版本，用于取代1999年制定的HTML 4.01、XHTML 1.0标准。近年来，互联网应用层出不穷，然而，用于支持这些应用的浏览器种类繁多，规范不一，这就带来了兼容性问题。2014年下旬， W3C宣布，历经多年的努力，HTML5标准最终完成，并已公开发布，这将推动Web开发进入一个新的时代。HTML5指的是一套技术组合，它包括CSS、HTML以及JavaScript。它提供了一些标准集，能够有效的增强网络应用[1]。
现今，计算机网络早已普及，媒体技术的发展也越来越迅速，多媒体技术开发成为IT行业的大热门。由于高清图像、音频以及视频等的信息量过大，很大程度上受到硬件条件的限制，如果从硬件上解决播放问题，将会花费极高的成本，而在软件上优化不仅成本低，而且提升空间大。但现今一些流行的多媒体播放器或支持的播放格式有限，或占系统资源多，或所占空间大，解决这些问题就迫在眉睫。在线的多媒体播放器能获得更多的青睐，原因在于它不需要下载专门的APP，并且有着良好的交互性。HTML5引进了许多强大的新特性，这使得其成为了开发在线多媒体播放器的热门选择[2]。
纵观以上因素，设计并实现一款HTML5在线多媒体播放器，符合当下媒体播放器的发展趋势。
HTML5媒体播放器研究现状
自公布HTML5草案以来，这一标准一直备受争议，虽好评如潮，但质疑之声也此起彼伏。而由于一些业内的互联网公司大力吹捧HTML5，也使得用其进行Web开发的浪潮盛极一时。下面就让我们来认识下这一新生的技术，了解一下它在媒体播放器开发方面的现状。
发展概况
知名网站YouTube在两年前开始推广HTML5播放器来代替Flash，而且国内也在渐渐普及HTML5浏览器，支持HTML5的浏览器在中国浏览器市场的份额不断增长。毫无疑问，HTML5用于Web开发已是大势所趋。
目 录
第一章 绪 论 1
1.1 研究背景及意义 1
1.2 HTML5媒体播放器研究现状 1
1.2.1 发展概况 2
1.2.2 目前存在的问题 2
1.3 本文的主要内容 2
第二章 相关技术以及环境配置 4
2.1 相关技术简介 4
2.1.1 PHP简介 4
2.1.2 SVG图标 4
2.1.3 HTML5多媒体播放 5
2.1.4 JavaScript简介 5
2.1.5 CSS3技术简介 5
2.2 开发工具与运行环境介绍 6
2.2.1 AppServ 6
2.2.2 编辑工具PhpStorm 7
2.2.3 Google Chrome浏览器 7
2.2.4 Firefox浏览器 8
2.2.5 JavaScript调试工具 8
*好棒文|www.hbsrm.com +Q: &351916072&
第三章 播放器的总体设计 10
3.1 可行性分析 10
3.1.1经济可行性 10
3.1.2技术可行性 10
3.1.3操作可行性 10
3.2 需求分析 11
3.2.1 功能分析 11
3.2.2 性能分析 12
3.3 媒体文件数据模型与ER图 12
3.4 播放器总体设计 13
3.4.1 系统设计 13
3.4.2 结构设计 14
3.5 数据库设计 17
3.5.1 电影文件表的设计 17
3.5.2 电视剧文件表的设计 17
3.5.3 动漫文件表的设计 18
3.5.4 音乐文件表的设计 18
3.5.5 综艺文件表的设计 18
第四章 播放器的详细设计与实现 20
4.1 Bootstrap框架的引用 20
4.2 播放界面的设计与实现 20
4.3 前台页面的设计与实现 22
4.3.1 图片轮播器的设计 23
4.3.2 导航栏的设计与实现 23
4.3.3 媒体文件布局 24
4.3.4 友情链接的设计 26
4.4 搜索引擎的设计 26
4.4.1 搜索界面 26
4.4.2 检索器 28
第五章 播放器的测试 31
5.1 测试平台与工具 31
5.2 测试方案设计 31
5.2.1 单元测试 31
5.2.2 功能测试 31
5.2.3 兼容性测试 31
5.3 测试结果 32
结 论 33
致 谢 35
参考文献 36
第一章 绪 论
自1999年发布HTML4.0到现在，这十余年间，互联网急速发展，各种应用更是多不胜数，但由于网络标准参差不齐，使得这方面的发展遇到瓶颈。解决网络标准问题迫在眉睫。于是，由WHATWG和万维网联盟（W3C）联合拟定的新标准——HTML5出世了，它引进了许多新的功能，并且能够真正改变用户与文档的交互方式，使得基于HTML5的多媒体播放器的设计与实现变得可能。
研究背景及意义
HTML5是HTML的最新修订版本，用于取代1999年制定的HTML 4.01、XHTML 1.0标准。近年来，互联网应用层出不穷，然而，用于支持这些应用的浏览器种类繁多，规范不一，这就带来了兼容性问题。2014年下旬， W3C宣布，历经多年的努力，HTML5标准最终完成，并已公开发布，这将推动Web开发进入一个新的时代。HTML5指的是一套技术组合，它包括CSS、HTML以及JavaScript。它提供了一些标准集，能够有效的增强网络应用[1]。
现今，计算机网络早已普及，媒体技术的发展也越来越迅速，多媒体技术开发成为IT行业的大热门。由于高清图像、音频以及视频等的信息量过大，很大程度上受到硬件条件的限制，如果从硬件上解决播放问题，将会花费极高的成本，而在软件上优化不仅成本低，而且提升空间大。但现今一些流行的多媒体播放器或支持的播放格式有限，或占系统资源多，或所占空间大，解决这些问题就迫在眉睫。在线的多媒体播放器能获得更多的青睐，原因在于它不需要下载专门的APP，并且有着良好的交互性。HTML5引进了许多强大的新特性，这使得其成为了开发在线多媒体播放器的热门选择[2]。
纵观以上因素，设计并实现一款HTML5在线多媒体播放器，符合当下媒体播放器的发展趋势。
HTML5媒体播放器研究现状
自公布HTML5草案以来，这一标准一直备受争议，虽好评如潮，但质疑之声也此起彼伏。而由于一些业内的互联网公司大力吹捧HTML5，也使得用其进行Web开发的浪潮盛极一时。下面就让我们来认识下这一新生的技术，了解一下它在媒体播放器开发方面的现状。
发展概况
知名网站YouTube在两年前开始推广HTML5播放器来代替Flash，而且国内也在渐渐普及HTML5浏览器，支持HTML5的浏览器在中国浏览器市场的份额不断增长。毫无疑问，HTML5用于Web开发已是大势所趋。
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/jsjkxyjs/844.html
