摘 要

随着21世纪互联网的飞速发展和人民生活水平的提高以及对物质文化方面的需求，人们开始喜欢上在网络上观看视频这种娱乐方式，同样市场上对网页上的各种高效便捷的视频播放器有了强烈的开发需求。并且网络用户对于网站的性能和用户体验方面的要求也日渐增长，传统的FlashPlayer等插件式播放器渐渐体现出诸多弊端。适逢HTML飞速发展，HTML5的出现更是对音乐视频类的网站产生了较大的变革。

本文叙述了一个基于HTML5的视频播放器的设计方法。视频播放器的实现主要依赖于HTML5标准中新提出的lt;videogt;标签，这个标签提供了一种不需要插件就可以播放视频的方法，这无疑提高了用户体验和网页的性能。本设计还用到了CSS3、JavaScript和Python技术。其中CSS技术对网页排版进行美化，JavaScript则用在用户和网页的交互上，Python是用来编写web服务器用以模拟云端视频传输。

在最后，本设计完成了一个基于HTML5的具有弹幕、截图、倍速播放等功能的web视频播放器，并扩展支持flv格式视频的播放，本播放器还可以边浏览当前网页边使用悬浮窗观看视频。基本满足了设计要求。

关键词：HTML5；video；视频传输；视频播放器

Abstract

With the rapid development of the Internet in the 21st century and the improvement of people’s living standards and the need for material and cultural aspects, people have begun to enjoy watching entertainment on the Internet. The same is true on the market for efficient and convenient video playback. The device has a strong development demand. In addition, the requirements for the performance and user experience of the website users are also growing day by day. Traditional plug-in players such as Flash Player gradually show many shortcomings. Coinciding with the rapid development of HTML, the emergence of HTML5 has brought about a major change in the music video website.

Thesis describes a design method for a HTML5-based video player.The implementation of the video player mainly relies on the newly proposed lt;videogt; tag in the HTML5 standard. This tag provides a method for playing video without the need for a plug-in. Improved user experience and web page performance. The design also uses CSS, JavaScript, and Python technologies. CSS technology is used to beautify web pages, and JavaScript is used to interact with users and web pages. Python is used to write web servers to simulate cloud video transmission.

At the end of the design completed a web-based video player with a barrage, screenshots, double-speed playback and other features of HTML5, and extended playback support flv format video, the player can also while browsing the current Web while using a floating window to watch video. Basically meet the design requirements.

Key Words：HTML5, video, video transmission, video player

目录

第1章 绪论 1

1.1 研究背景 1

1.2 研究现状 1

1.2.1 HTML5发展历程 1

1.2.2 HTML5应用现状 2

1.3 研究意义 3

1.4 主要研究内容及论文结构 4

第2章 整体需求分析及技术探讨 5

2.1 系统各部分需求分析 5

2.1.1 视频播放格式的分析 5

2.1.2 播放器的功能分析 6

2.1.3 服务器程序的需求分析 7

2.2 系统设计技术概述 8

2.2.1 web结构设计的技术概述 8

2.2.2 播放器界面各部分样式设计技术概述 10

2.2.3 web行为交互设计的技术概述 11

2.2.4 服务器端传输程序设计技术概述 12

2.2.5 开发平台的简述 12

第3章 视频播放器各模块设计 13

3.1 播放器界面的设计 13

3.2 播放器控制栏各功能的设计 14

3.2.1 播放暂停功能的设计 14

3.2.2 音量调节功能的设计 15

3.2.3 截图功能的设计 16

3.2.4 弹幕功能的设计 16

3.2.5 相关设置功能的设计 18

3.3 悬浮窗播放视频的设计 21

3.4 播放器扩展播放flv格式视频的设计 21

3.5 服务器程序的设计 22

第4章 视频播放器的实现与测试 24

4.1 播放器界面的实现与测试 24

4.2 视频播放的实现与测试 24

4.2.1 HTML5原本支持的格式视频的播放 24

4.2.2 扩展支持flv格式的实现与测试 25

4.3 截图功能的实现与测试 25

4.4 弹幕相关功能的实现与测试 26

4.5 相关设置的实现与测试 27

4.6 悬浮窗播放视频的实现与测试 28

第5章 总结与展望 29

5.1 总结 29

5.2 展望 29

参考文献 31

致 谢 32

第一章 绪论

1.1 研究背景

在当下的信息化时代，网络对于人们是不可或缺的，人们越来越来青睐于网络娱乐。诸如爱奇艺、优酷、bilibili和抖音等视频娱乐方式作为多媒体的一种能更快地给人们带来欢乐，而随着人民日渐美好的生活水平所带来的改变则是对自身的用户体验以及服务方的网站性能的要求的提高。

目前大部分人使用的视频传输技术是流媒体技术，对Flash或者Silverlight等插件有较大的依赖性。一方面，用户在使用Adobe Flash Player等插件播放视频文件时需要用户在本机安装软件并集成到浏览器中，并不是由浏览器直接提供支持，这就在一定程度上让用户付出了使用成本，甚至有时候插件安装失败或者插件的更新都为用户带来一定的麻烦，很大程度上降低了用户体验。同时关于flash的可靠性和安全性也同样被用户质疑甚至抨击，由于性能和可靠性问题而造成MAC死机的例子屡见不鲜[1]。另一方面，在市场上，由于Adobe这家公司对他们的产品有绝对的技术专利，包括对flash的改进、更新等都只能由Adobe公司来进行，一旦哪天Adobe Flash Player出了什么问题，而众多视频网站的公司没有除此之外的第二选择，那么这些公司将会受到巨大的利益损失。相信互联网巨头是肯定不愿意自家的利益被掌控在另一家公司手上。再从开发人员角度考虑，PC端和移动端应用的重复开发以及为Windows、苹果和安卓等不同系统需提供不同的解决方案为开发人员带来许多麻烦，并且还大大增加了成本[2]。2014年新完成的web标准规范语言HTML5被W3C推向市场，特别值得人们注意的是在HTML5中新包含了一个lt;videogt;元素，这个元素很好地解决了上述视频播放以及应用开发的顾忌和问题[3]。

HTML5标准下的lt;videogt;标签以及为video对象提供的方法和事件，都提供了一种在网页中嵌入视频播放器而不需要装任何插件的方法。更重要的是web通过lt;videogt;标签播放的视频可以与网页中其他元素交互，这不仅极大地提高了web开发的创新性和功能性，还对用户体验有很大改善。目前的绝大部分浏览器均都支持HTML5标准，利用HTML5可以让用户享受到更好的视频播放体验。

1.2 研究现状

1.2.1 HTML5发展历程

从上世纪90年代起，这长达20多年的web标准发展过程中，浏览器供应商的态度对web标准的制定与完善有着举足轻重的影响。在2012年以前IE占领着市场上的绝大多数份额，但却对HTML5支持度极低，这样严重了阻碍了新web标准的制定与完善。2012年起微软公司开始投入大量资源到HTML5上，同时市场上大部分浏览器都开始支持HTML5新标准，这极大促进了HTML5的开发[4]。2014年W3C宣布HTML5开发完成。PC端各浏览对HTML5支持程度趋势如图所示。