用WPF实现一个弹幕播放器

最近写了一系列关于WPF二维动画的Blog,今天准备写个程序来实战一下。由于手头上确实没有什么好的例子,便写了个离线的弹幕播放器,效果如下:

实际上,用WPF实现一个弹幕播放器还是比较简单的,主要分为如下几个步骤:

  1. 下载离线弹幕文件,并解析为程序比较方便的识别格式
  2. 加载弹幕数据,并生成弹幕动画TimeLine,这里我将每一个弹幕用一个TextBlock表示,用一个Canvas来承载这些弹幕。用关键帧动画来表示弹幕,并将动画和TextBlock关联起来。
  3. 使用MediaElement加载弹幕,使用时钟模式控制,即用MediaTimeline来控制动画的播放
  4. 将MediaTimeLine和弹幕动画放在一个Storyboard中,这样弹幕和视频在时间上就关联起来了。
  5. 将MediaElement和弹幕Canvas放在一个Grid中,这样弹幕和视频在空间上就关联起来了。
  6. 播放Storyboard,就能看到下图所示的弹幕播放器了。

所用到的技术点:

  1. 用MediaTimeline来控制MediaElement播放视频。
    貌似网上的一些例子都是非常入门的使用独立模式控制MediaElement,这种方式下获取不到TimeLine,不过官方的MSDN也挺详细的:http://msdn.microsoft.com/zh-cn/library/system.windows.media.mediatimeline(v=vs.90).aspx
  2. 弹幕文件的获取和解析。
    貌似目前有三大弹幕网站ABC,并且各大弹幕网站的格式都不一样,因为我想找一个弹幕比较多的来测试一下效果和性能,选取的B站的弹幕,视频取的是其今天首页的Fate/stay night UBW,(顺便说一句,这个动画的画质实在太赞了),关于其弹幕的下载和解析方式可以参看这一地址:BILIBILI网站视频真实地址解析策略 ,BILIBILI站弹幕内容地址解析策略 。
  3. 弹幕动画的实现。
    弹幕动画实际上是一个由静止(动画播放开始到弹幕出现)和移动(弹幕出现到弹幕小时)两个状态组成的关键帧动画,可以参看我之前写的文档: http://www.cnblogs.com/TianFang/p/4060397.html

性能优化:

既然涉及到了动画,那么性能就是一个比较令人关心的问题,我这里选取的是比较热门的视频,有3k多条弹幕,由于我这里只是练习,只选取了其中的滚动弹幕,貌似仍然有近2800条,最火的视频应该基本上也和它是一个数量级了。

我这里的实现方式非常简单,2800多个弹幕对应2800个TextBlock和TimeLine,并且是一开始全部创建及播放,这么做有性能问题吗?结果测试,如果一上来就这么干的话,加载视频的速度明显较慢,但是播放的过程还算流畅,但CPU占用较高。如何对它来进一步优化呢?

首先我们可以将操作细化一下,大概分为如下三个部分:

  1. 创建弹幕对应的Animation和TextBlock
  2. 将TextBlock放置到Canvas中
  3. 播放所有Animation

分别简单的测试了一下,1和3的开销非常小,呈现近3k个TextBlock的开销则是非常大的,如何优化呢?非常简单:一开始不加载所有的TextBlock,只把即将要显示到界面上的载TextBlock放到Canvas中,当其不在界面上呈现后,从Canvas中删除即可(这种方式简单粗暴,但改变了最开始的逻辑,导致时间线控制变复杂了,最好的方式是实现一个虚拟化的Canvas,随着时间线自动加载和卸载TextBlock)。

经过这一优化,在60帧的的播放速率下,基本上CPU的占用在13%左右,我是一个比较老的四核的i5,应该是占了一个cpu的一半,还是非常理想的。虽然还有进一步的优化空间,但感觉没有太大必要了。

实现过程感想:

用WPF实现弹幕播放器确实非常简单,只需要在最开始创建弹幕的TextBlock和Timeline,将其组装到一起,和视频的MediaTimeline关联到一起就可以了。中间过程完全不用关心,WPF动画框架都可以自动帮你完成,暂停,播放,进度跳转都不需要额外的编码。就连其它的弹幕播放器没有实现的快放和慢放它都能直接实现(这本身就是Timeline的一个属性,直接设置即可)。

到此为止,这个弹幕播放器的关键点都已经列举出来了,相信认真看过这篇文章和我之前的动画的那一系列Blog的朋友已经能够写出自己的弹幕播放器了。这个弹幕播放器本身只是我的一个饭后练手的作品,一共大概也就花了两个多小时,并且很大一部分的时间还是花在学习MediaElement的使用、解析B站数据的上面了,真正实现弹幕播放器的时间比写这篇文章还少。另外,这个播放器的目的是练习WPF动画的使用,而不是做一个弹幕播放器,实现得非常随意,代码实在无法见人。并且细节实现也是非常不完善的。

真正要实现一个弹幕播放器估计要话费数十倍于此时间,以后如果有时间的话可能会将其完善后发布成一个开源项目(当前工作太忙,短期内可能性不大)。有技术讨论欢迎留言交流,但要实现类似功能的朋友请不要在此留言索取代码了,貌似本身开源的弹幕播放器就有不少了。

时间: 2024-10-10 02:34:39

用WPF实现一个弹幕播放器的相关文章

用WPF写了一个弹幕播放器

看弹幕视频的时候,如果不发弹幕,一个本地的弹幕播放器往往能带来更好的体验.目前已经有一些实现了,最初用过一个MukioPlayer, 后来又用过一个用C++写的BiliLocal,这个程序能自动下载弹幕,播放格式也非常宽泛,功能和性能基本上都没有什么值得挑剔的地方,感觉主要的一个Bug就是进度跳转的时候弹幕要消失一阵子(包括显示/隐藏弹幕的时候). 前段时间为学习WPF的动画的时候顺便做了一个本地的弹幕播放器练手,后来发现效果还不错,便将其完善了下,现在已经能基本可用了.虽然BiliLocal已

将WPF版的弹幕播放器给优化了一下

年前较闲的时候研究了一下WPF的性能优化,练手的时将之前写的弹幕播放器给重新写了一下.年前的时间不大够,没有写完,这两天接着弄了一下,基本上弄得差不多了. 主要重写了底层的渲染算法,优化后效果还是非常明显的,试了几个BiliBili上的热门的弹幕,基本上满屏的弹幕依然能流畅播放.在我的i5-750上,cpu占用基本上在16%左右(光播放视频基本上CPU就占用了7%),还是比较令人满意的.并且我这里还是用的比较简单的算法,一开始就把所有的弹幕全部给加载了,也没有使用多线程渲染,还是有一定的优化空间

一个可扩展的弹幕播放器的HTML5实现范例---ABPlayerHTML5

ABPlayerHTML5 是一个简单易懂的现代弹幕魔法播放器.这个项目意在取代基于 Flash 的 ABPlayer,同时也希望能为新一代的HTML5弹幕播放器打造一个实现范例.这个播放器將用相对通俗易懂的方法,实现最基础的弹幕播放器功能,以供开发者参照. 在你的应用中加入ABPlayerHTML5请在 head 元素内引入如下的库. <link rel="stylesheet" href="http://jabbany.github.io/ABPlayerHTML5

关于弹幕播放器的起步

我想,很多的宅男,宅女,包括很多的技术宅都知道弹幕这个词语,起源于niconico这个著名的弹幕视频分享网站,我想,如果自己来做个弹幕播放器怎么样? 于是我找了很多的大神和朋友,其中我很感谢他们帮助我,没有他们我不会学到这些知识. 接下来我公开这名大神的源代码地址 https://code.google.com/p/mukioplayer/ 你懂得,我就不说了. 接下来,我所使用的不是这个源代码,而是这个大神用他的源代码写的一个wordpress插件,总之我先截图吧,让你们看看我现在安装之后的画

做个简单的本地弹幕播放器

前言 本文仅仅是做一个简单的弹幕播放器 本文弹幕播放器仅仅是演示一下发送弹幕功能 请跳转本文底部的在线调试代码进行调试 最终实现效果如下: Okay.首先你得找到一个弹幕开源库就是这个啦:https://github.com/jabbany/CommentCoreLibrary 其次你得准备好一个HTML文件 准备完后lets do it 更多内容请见原文链接:http://www.gbtags.com/gb/share/5769.htm 引入两个重要的弹幕开源库文件 这里用了我blog的文件

Android MVC实现一个音乐播放器

MVCPlayer 我尝试在android上使用MVC模式来开发一个音乐播放器.GitHub地址:https://github.com/skyhacker2/MVCPlayer 什么是MVC 来自维基百科 控制器 Controller - 负责转发请求,对请求进行处理. 视图 View - 界面设计人员进行图形界面设计. 模型 Model - 程序员编写程序应有的功能(实现算法等等).数据库专家进行数据管理和数据库设计(可以实现具体的功能). 那么在android上,Activity就是Cont

每天看一片代码系列(三):codepen上一个音乐播放器的实现

今天我们看的是一个使用纯HTML+CSS+JS实现音乐播放器的例子,效果还是很赞的: codePen地址 HTML部分 首先我们要思考一下,一个播放器主要包含哪些元素.首先要有播放的进度信息,还有播放/暂停或者上一首下一首等必要的按钮,同时还要显示一些当前播放的音乐名称等信息.播放多首歌曲时,要显示播放列表...因此,从语义上可以构造出基本的HTML结构: // 背景区块,用于显示当前播放音乐的图片 <div class='background' id='background'></di

ios开发:一个音乐播放器的设计与实现

github地址:https://github.com/wzpziyi1/MusicPlauer 这个medo,关于歌曲播放的主要功能都实现了的.下一曲.上一曲,暂停,根据歌曲的播放进度动态滚动歌词,将当前正在播放的歌词放大显示,拖动进度条,歌曲跟着变化,并且使用Time Profiler进行了优化,还使用XCTest对几个主要的类进行了单元测试. 已经经过真机调试,在真机上可以后台播放音乐,并且锁屏时,显示一些主要的歌曲信息. 首页: 歌曲内部播放: 当拖动小的进度条的时候,歌曲也会随之变化.

QT制作一个图片播放器

前言:使用qt制作了一个简单的图片播放器,可以播放gif.png等格式图片 先来看看播放器的功能(当然是很简陋的,没有很深入的设计): 1.点击图片列表中图片进行播放. 2.自动播放,播放的图片的间隔时间可以自己设定,时间的单位是秒. 3.自动播放的时候再点击图片列表会停止自动播放,保存当前播放的图片的顺序,再次点击自动播放的时候将从当前开始. 4.自动播放到最后一张图片的时候将会停止自动播放,再次点击自动播放的时候将会从第一张图片开始. 先上图看看具体功能: 说完功能我们聊聊制作思路和使用到的