摘 要SVG（可缩放矢量图形）是完全基于XML定义的一种矢量图形语法。使用SVG图像作为播放器的一些小图标，使得用户可以任意缩放图像，而不会破坏图像的清晰度以及细节等。有了这一点，就可以使用HTML5、JavaScript 构建前台页面，设计一款完整且具交互性的HTML5播放器。86863

该毕业设计是通过引入Bootstrap框架，并使用HTML5、CSS3和JavaScript技术设计并实现一款基于SVG的多媒体播放器的播放界面，再在此界面的基础上，使用HTML5和JavaScript编写前台页面，其前台界面包含用于交互的导航栏以及媒体文件的分布模块。最后使用PHP技术实现媒体文件的提取以及文件的检索。

本文总结了近年来HTML5技术的发展概况，并简介了媒体播放器开发的基础知识，同时对HTML5应用的研究提出了一些看法，以期能为从事HTML5应用开发的技术爱好者们提供参考和帮助。

毕业论文关键词：HTML5；JavaScript；PHP；在线播放

Abstract SVG (Scalable Vector Graphics) is completely based on XML to define a vector graphics syntax。 Use SVG images as a player’s small icons so that the user can zoom the image, without destroying the image sharpness and other details。 With this, we can use HTML5, JavaScript build reception interface, design a complete Juju interactive HTML5 player。

The player through the introduction of Bootstrap framework, and uses HTML5, CSS3 and JavaScript techniques to design and implement a multimedia player based on SVG player interface, and then on the basis of this interface using HTML5 and JavaScript to programming the front page, its reception interface includes distribution module for interactive navigation and media files。 Finally, using PHP technology to retrieve media files and extract the files。

This paper summarizes the development situation of HTML5 technology in recent years, Introduction to the basics and media player development, while research HTML5 application proposes some views, in order to provide information and help technology enthusiasts in the HTML5 application development。

Keywords: HTML5; JavaScript; PHP; online play

目 录

第一章 绪 论 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

第三章 播放器的总体设计