摘要：随着互联网行业的不断革新，用户对互联网的需求日益增大，基于现在视频行业的不断崛起，人们也对精神物质文化追求提出了更多的需求。同时随着前端的日益成熟网络宽带的普及和各方面条件的支持，视频播放器是最近几年来颇受人们运用的娱乐学习工具，也就引领了一群有志之士的创新者加入改革大军中，因此目前市场上视频播放器种类繁多。

本课题主要研究的是基于JavaScript的Web视频播放器。在设计过程中运用HTML5这一新媒体标签脱离对视频平台的使用直接做到对视频的播放，在这之中充分的实现了视频的播放界面、控制视频播放进度、声音控制、视屏截图和横屏播放等功能,并进一步优化,吸引用户。利用CSS3技术对页面进行修饰来满足用户的使用感。因此对于前端开发技术而言，最核心的三个技术分别就是：JavaScript、HTML5以及CSS3。通过三者的有效结合交互使用，直接的将产品信息展示给用户，并且丰富用户的沟通交流交互去优化的过程。本论文主要针对视频播放器中开发工具的使用、系统需求分析和播放模块的实现作出具体介绍。

关键词：JavaScript；HTML5；CSS3；Web；视频播放器

目 录

摘 要

ABSTRACT

第一章  概述-5

1.1 前端发展历史-5

1.2 课题背景-5

1.3 设计系统目标-6

1.4  本课题研究优势-6

1.5  本章小结-7

第二章  开发背景-7

2.1 开发系统的选择-7

2.2 开发工具的介绍-7

2.2.1 JavaScript简介-7

2.2.2 HTML5简介-8

2.2.3 CSS 3简介-8

2.2.4 Vue.js简介-9

2.3 本章小结-10

第三章 系统分析-10

3.1 系统需求分析-10

3.1.1 视频播放器的界面分析-10

3.1.2 视频播放器的功能分析-11

3.2 系统总体设计-12

3.2.1 视频播放器主界面的设计-12

3.2.2 视频播放器功能的设计-13

3.3 本章小结-14

第四章  视频播放器模块的实施-14

4.1  前期准备-15

4.2 编写程序-16

4.2.1 视频播放功能控件-16

4.2.2 播放功能控件效果图-18

4.2.3 视频播放界面功能-18

4.3 本章小结-20

第五章  总结与展望-21

5.1 总结-21

5.2 展望-21

参考文献-22

致谢-23

附录-24