摘 要

随着文化的发展和融合，国内很多视频网站开始使用弹幕来增强观众间的互动，弹幕播放器在视频网站中发挥着越来越重要的作用。弹幕已成为观众增强互动的重要途径。然而大多数视频网站在弹幕播放器研发方面存在一些不足，对于弹幕播放器的研究受到越来越普遍的关注。

论文介绍了HTML5、Node.js等相关开发技术，综合各项技术设计与实现了基于HTML5的弹幕播放器。HTML5是一个功能完善、强大的规范，通过这个规范，图像、动画、视频、音频、交互都被标准化。HTML5弹幕播放器利用HTML5 web技术和CSS动画，根据Node.js返回的弹幕数据，渲染出不同类型和不同颜色的弹幕，进而根据碰撞检测算法展示出弹幕动画。HTML5弹幕播放器系统实现了播放视频文件、发送弹幕、保存弹幕等需求。相对于传统的Flash弹幕播放器，HTML5弹幕播放器系统可以实现更好的性能和更低的系统资源占用。

关键词：弹幕播放器；视频播放器；HTML5

Abstract

With the development and fusion of culture, many online video websites began to use danmaku to increase interactions between audience, danamku video palyer in online video websites plays a more and more important role. Danmaku has become an important way to increase interactions between audience. However, most danmaku player development in online video websites exists some deficiencies, for danmaku player development has been studied by more and more widespread attention.

This thesis introduces the development technology of HTML5 Node.js, and the comprehensive technology design and implement the danmaku player system based on HTML5. HTML5 is a fully functional and powerful standard, by means of this standard, image, animation, video, frequency and interaction are standardized. HTML5 danmaku player system can use HTML5 technology, and CSS animation, and receive data form Node.js, render danmaku with different tyle and color, and show danmaku animation according to collision detection. HTML5 danmaku player system realize playing video, sending danmaku, showing danmaku, saving danmamu. Relative to traditional Flash danmaku player, the system have a better performance and a lower resources occupation rate.

Key words: danmaku player; video player; HTML5

目 录

第1章 绪论 1

1.1 研究背景 1

1.2 国内外研究现状 1

1.3 研究目的及意义 2

1.4 论文结构 2

第2章 系统分析与概要设计 3

2.1 功能需求 3

2.2 可行性分析 3

2.3 系统功能结构 4

2.4 系统模块功能设计 5

2.4.1 功能模块用例图 5

2.4.2 功能模块用例表 6

2.5 数据库设计 8

第3章 系统开发关键技术 10

3.1 代码优化技术 10

3.2 样式开发的预处理技术 11

3.3 Node.js和Express开发框架 11

第4章 系统详细设计与实现 13

4.1 弹幕功能模块 13

4.1.1 弹幕界面设计 14

4.1.2 弹幕发送 15

4.1.3 弹幕寻轨算法 15

4.1.4 弹幕更新与渲染 17

4.1.5 后端接口与弹幕存储 18

4.2 视频播放模块 20

4.2.1 视频播放与暂停 20

4.2.2 播放控制 21

4.2.3代码优化 23

第5章 系统测试 24

5.1 测试简介 24

5.2 功能测试 24

5.3 性能测试 28

第6章 总结与体会 30

参考文献 31

致 谢 32

第1章 绪论

1.1 研究背景

弹幕播放器是在普通视频播放器上加上弹幕功能，虽然不同弹幕发送的时间有所不同，但是弹幕会记录被发送时的视频进度，弹幕会在视频播放到某一个特定的进度时出现，这就保证了在视频进度相同的时间展示的弹幕拥有同样的主题，观众在参与发送弹幕和观看视频时就会有和其他人进行即时交互的感觉。而普通的视频播放器不同，普通视频播放器的评论与视频播放器之间是没有联系的，评论的内容多数是关于这个视频的评价，对观众来说没有即时交互的感觉。

弹幕的出现和发展得益于ACG文化的衍生物——吐槽文化，反映了国内发展迅速的ACG文化。大家基于对ACG的热爱，运用ACG语言，聚在一起互相交流，满足了一些ACG爱好者的心理需求。但是相对主流文化来说，ACG爱好者更加分散。他们在现实中身边极少有相同ACG爱好的人，弹幕提供给ACG爱好者了一次实时互动观看视频的机会和体验。

HTML5的诞生和发展不仅是技术上的进步，更标志着宽广的发展空间和自由开放的趋势。HTML5是一个标准化、功能完善强大的规范，通过这个规范，图像、动画、视频、音频、交互都被标准化^[1]。HTML5弹幕播放器在浏览器中运行，不用依靠封闭狭隘的桌面软件，可以直接在浏览器中播放弹幕视频，虽然实现HTML5不同平台的兼容性还有多事情要完善，但Web正在被HTML5改变着^[2]。

1.2 国内外研究现状

现在比较流行的弹幕播放器多数使用Flash编写，除了最基本的视频播放功能以外，弹幕播放器还增加了发送和展示弹幕的功能，用户发送的弹幕通过后台接口保存在服务器的数据库中，在播放器加载的时候会读取数据库，加载以前的弹幕，但是移动版Flash的开发被Adobe公司宣布终止，加上HTML5的快速发展，Flash弹幕播放器已经不能满足用户的所有需求。

以当前用户数较大的哔哩哔哩和斗鱼的弹幕播放器为例，他们目前使用的是Flash弹幕播放器，存在着系统资源占用较大、不支持移动端等不足，鉴于这些不足，哔哩哔哩和斗鱼逐渐在移动端页面上将Flash弹幕播放器替换HTML5弹幕播放器来解决Flash暴露的这些问题。

HTML5是一个标准化、功能完善强大的标准，通过这个标准，图像、动画、视频、音频、交互都被标准化，适合弹幕播放器的使用需求。

Node.js是一个强大的平台，它基于Chrome的运行时建立，可以用来方便地搭建性能高反应快、容易扩展功能的Web应用，它适用于高并发的实时Web应用，它使用事件驱动机制和非阻塞I/O模型，保证了在高并发的情况下也能及时响应^[4]。

1.3 研究目的及意义

近几年互联网发展速度极快，互联网正在向着更加轻量和快捷发展，现在的互联网已经和传统的互联网差距越来越大。人们可以通过手机、平板等移动端的设备来进行娱乐、获取知识和使用软件，以后也会影响人们生活的各方各面。本课题的弹幕播放器基于HTML5进行探索，完成HTML5完善之前不可能使用Web技术来完成的系统，相对于Flash，HTML5的性能会提升很多，而且有足够的的创新性和前景，而且移动版Flash的开发被Adobe公司宣布终止，加上HTML5的快速发展，Flash弹幕播放器已经不能满足用户的所有需求，使用HTML5编写的弹幕播放器才能全面满足PC端和移动端用户各个层次的需要^[6]。

1.4 论文结构