【教程】如何自己搭建一个B站一样的弹幕网站

barnett2010

Mukioplayer是一个优秀的基于Flex/AIR/Flash的开源弹幕播放器项目，让我们在A/B站之外有了更多选择（例如基于mukio修改版的tucao.cc）。不过对于我这种完全没有接触过Flex相关技术的人来说，即使从svn下载好了最新版的代码和文档也不会编译和使用>_<。好在作者好心地提供了编译后的swf文件，我们直接拿原版来放到网站上就可以使用了。

所以这篇文章就是简单介绍一下MukioPlayer 1.x版(web版)和2.x版(plus版)的配置和调用方法，希望对你有所帮助：

MukioPlayer版本

这篇文章要介绍的是MukioPlayer的Web版和Plus版。当然还有其他一些版本例如wordpress版html版之类，那些因为功能阉割比较严重所以都不在讨论范围内。

Web

MukioPlayer Web版是比较老的一个版本，版本号为1.xx，最后更新时间为2010-9-27。从界面上来看是不是有些似曾相识？貌似是很多年前acfun的播放器样式来着：

功能上也是很简单的，支持加载新浪源/AB站弹幕，支持过滤，支持发送弹幕/Zoome弹幕。

Plus

MukioPlayer Plus是基于Web版重构后的版本，据说是因为代码太混乱而且使用的技术比较古老了。版本号为2.x，目前编译版本的最后的更新时间是2011-6-11（想要最新的编译版？自己去SVN拿最新代码然后编译吧哈哈）。界面重新制作，感觉上比较接近现代弹幕播放器了。。。

这个版本除了web版的特性之外还支持拉伸/宽屏模式/各种视频源(没有具体测试过)/高级脚本弹幕/等等新功能

Web版配置方法

1.首先你需要下载编译好的Mukioplayer.swf文件

mukioplayer web 20100927.zip

将swf文件放到你的网站某个目录中，例如 http://mukioplayer/mukioplayer.swf

这里假设你的网站网址是 http://mukioplayer/

2.生成一个网页用来调用flash播放器，例如http://mukioplayer/test.html

<embed id="MukioPlayer"
src="http://mukioplayer/mukioplayer.swf?vid={新浪源VideoID}&type=video&sort=new"type="application/x-shockwave-flash"
allowscriptaccess="always"
quality="high"
allowfullscreen="true"
/>

注意swf后面的vid参数

3.在用户点击开始播放后，MukioPlayer会向你的服务器的两个位置请求弹幕

http://mukioplayer/newflvplayer/xmldata/{VideoID}/comment_on.xml?r=0.8410263122059405
http://mukioplayer/pcomment/{VideoID}/permanent/?r=0.11147068487480283

VideoID为视频ID，r是随机数，comment_on.xml对应着普通弹幕池的文件，permanent对应着锁定弹幕池（类似于acfun的comment_lock？）

请返回一个类似于Bilibili弹幕格式的XML即可

4.用户发送弹幕时，播放器会向服务器的特定网址POST一个数据，位置是：

http://mukioplayer/newflvplayer/cnmd.aspx （←_←意味深长）

数据内容
mode=1&playTime=11.1&color=16777215&message={Encode后的弹幕内容}&playerID={视频ID}&date=2013-01-29 10:16:16&fontsize=25

服务器只需返回个空的HTTP 200即可

Plus版配置方法

1.下载编译好的MukioPlayerPlus.swf文件

mukioplayerv2.000r83.zip

将压缩包中的swf文件和conf.xml放到你的网站某个目录中，例如 http://mukioplayer/mukioplayerplus.swf和 http://mukioplayer/conf.xml

这里假设你的网站网址是 http://mukioplayer/

2.生成一个网页用来调用flash播放器，例如http://mukioplayer/test.html

<embed id="MukioPlayer"
src="http://mukioplayer/mukioplayerplus.swf?vid={新浪源VideoID}&type=video&sort=new"
type="application/x-shockwave-flash"
allowscriptaccess="always"
quality="high"
allowfullscreen="true"
/>

注意swf后面的vid参数。这里的plus版可能支持更多的参数，例如qid/ykid什么的，不过我没有测试过

Web/Plus 的简单使用方式" style="border: 0px none; list-style: none;">

3.修改conf.xml

这个真的不用我解释了吧，请注意conf\server节点下的load和send的设置。变量只有{$id}这一个

<?xml version="1.0" encoding="utf-8"?>
<conf>
<performance>
<!-- 最长弹幕/像素 -->
<maxwidth>2048</maxwidth>
<!-- 最高弹幕/像素 -->
<maxheight>768</maxheight>
<!-- 表面弹幕容量,包括有特效和无特效 -->
<maxonstage>120</maxonstage>
<!-- 特效弹幕容量,如果超出该容量,但是未达到表面弹幕容量,超出部分为无特效 --><maxwitheffect>80</maxwitheffect>
</performance>

<server>
<!-- 使用mukio播放器的方法处理参数,不用改变 -->
<onhost>yes</onhost>
<!-- 弹幕加载地址,变量{$id}为弹幕id -->
<load>http://mukioplayer/{$id}.xml</load>
<!-- POST发送地址,如果不提供则不发送,变量可用 -->
<send>http://mukioplayer/{$id}/post</send>
<!-- Amf的POST发送地址,优先gateway -->
<gateway></gateway>
</server>
</conf>

4.在用户点击开始播放后，MukioPlayer会向你在conf.xml中设置的地址请求弹幕

如上面的设置，这个地址类似于 http://mukioplayer/12345.xml?r=789

请返回一个类似于Bilibili弹幕格式的XML即可，这里支持高级弹幕的说

5.用户发送弹幕时，播放器会向你在conf.xml中设定的网址POST一段数据

如上面的设置，这个地址类似于 http://mukioplayer/12345/post

数据内容
mode=1&user=test&stime=2.522&message={encode后的弹幕内容}&color=16777215&size=25

服务器返回个空的HTTP 200即可

其他注意事项

大概就是这些，web版比较古老了，如果不是超简单的应用不太建议使用（毕竟有更强大的plus版）。

相对于web版，Plus版中POST弹幕时videoid从post data中移动到了url中，这一点需要注意一下。

Plus版中user名称始终是test，也就是说弹幕播放器没有内建用户管理的功能。

Plus版中可以发射脚本弹幕，而脚本弹幕权限很高可能会造成播放器崩溃，所以服务器端在接收弹幕时需要进行一下过滤。

不同于A/B站，Web版和plus版都不支持从服务器拉取默认的屏蔽列表。

Plus版需要Flash Player 10.0以上。

Over

barnett2010

上一篇文章中，我提到了MukioPlayer Web/Plus版的简单部署/调用/使用方式，不过总结的有些过于简略，现在拿Plus版为例详细地说明一下使用MukioPlayer快速建立一个弹幕网站的方法。
当然这篇文章需要你掌握一些技术：

• 懂得用一种语言或技术建立“动态的”网站（例如PHP、Java、ASP.NET、Python等）
• 知道如何使用服务器软件（IIS或Apache等）
• 会使用一种数据库技术（MS SQL、MySQL、Access等）
  

服务器端以C#为例，一步一步开始我们短暂的建站旅程吧：

• 启动VS，新建一个ASP.NET WebForm项目
• 新建三个页面：Play.aspx(显示Flash播放器)；GetComment.aspx（获取所有弹幕）；SendComment.aspx（播放器发送弹幕）。
• 当然别忘了还有个Web.config文件，然后在项目属性中设置Play.aspx为首页
• 添加MukioPlayerPlus.swf和conf.xml文件到根目录
  

添加后的项目文件如下图：

Mukioplayer配置文件——conf.xml

首先改动conf.xml文件，把其中的“接收弹幕”和“发送弹幕”的地址改成我们自己的：

<server>
   <!-- 使用mukio播放器的方法处理参数,不用改变 -->
<onhost>yes</onhost>
  <!-- 弹幕加载地址,变量{$id}为弹幕id -->
  <load>GetComment.aspx?id={$id}</load>
  <!-- POST发送地址,如果不提供则不发送,变量可用 -->
  <send>SendComment.aspx?id={$id}</send>
</server>


播放页——Play.aspx

上篇文章中其实已经给出了页面中嵌入Flash播放器的方法，那么我们直接把它Copy过来：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Play.aspx.cs"Inherits="WebApplication1.Play" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>播放视频</title>
</head>
<body>
<form id="form1" runat="server">
<embed id="MukioPlayer"
    src="mukioplayerplus.swf"
    width="960px"
    height="480px"
    type="application/x-shockwave-flash"
    allowscriptaccess="always"
    quality="high"
    allowfullscreen="true"
    runat="server" />
</form>
</body>
</html>

咦，说好的vid去哪里了？别着急，我们可以在Page_Load()中动态设置它（别忘了把代码中的vid改成真正的新浪源videoID哦）：

protected void Page_Load(object sender, EventArgs e)
{
  MukioPlayer.Attributes["flashvars"] = "vid=94917572&type=video&sort=new";
}

这样页面在加载时就会向MukioPlayer传递vid参数了。

播放开始后，播放器会首先去新浪网找视频文件并加载它，接着，就会向你在conf.xml中<load>中定义的地址索要此vid相关的所有弹幕——

获取所有弹幕——GetComment.aspx

从刚才的conf.xml配置文件可以看到，GetComment.aspx页面接受一个名为id的参数，这个ID就是你在Play.aspx页面中传递给播放器的那个vid，视频加载成功后播放器会拿着这个ID找你（服务器）要弹幕列表哦：

首先在aspx文件中删除第一行外所有的html代码，只留下<%@Page….%>那一行

然后在Page_Load()中处理来自Flash播放器的请求：

public partial class GetComment : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
//得到URL中的id参数
var vid = int.Parse(Request["id"]);
//去数据库寻找此id的所有弹幕数据
var sqlstring = "SELECT * FROM [COMMENT] WHERE [ID]=" + vid;
var sql = "过程略";
//返回类似于Bilibili格式的XML数据
//<d p="出现时间,模式,字号,颜色,时间戳,弹幕池,用户,弹幕数据库中的记录编号">弹幕内容</d>
Response.ContentType = "text/xml; charset=utf-8";
Response.Write("<i>");
//随便添加两条弹幕数据
Response.Write("<d p=\"0.5,1,25,16776960,1313163329,0,111000,43665165\">内容</d>");
Response.Write("<d p=\"1.0,1,25,16776960,1313163329,0,111000,43665166\">内容</d>");
Response.Write("</i>");
}
}

发射弹幕——SendComment.aspx

播放开始啦，当用户在播放器内填写弹幕，点击发送后，播放器会向conf.xml中<send>段定义的地址POST一段数据。我们的任务就是让服务器接收这段数据。

同样地，在aspx文件中删除第一行外的所有html代码。

然后在Page_Load()中处理发射弹幕的请求。

public partial class SendComment : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
try
{
int vid = int.Parse(Request["id"]);
string userid = Request["user"];
float playtime = float.Parse(Request["stime"]);
int fontsize = int.Parse(Request["size"]);
int color = int.Parse(Request["color"]);
int mode = int.Parse(Request["mode"]);
//int pool = int.Parse(Request["pool"]);
long timestamp = Convert.ToInt64((DateTime.UtcNow - new DateTime(1970, 1, 1, 7, 0,0, DateTimeKind.Utc)).TotalSeconds);
string message = Request["message"];

//把上面这一堆写进数据库
var sqlstring = "INSERT INTO [COMMENT] VALUES";

//添加成功后，返回这条弹幕的行ID
Response.Write("12345");
}
catch
{
//如果出现错误，返回-1
Response.Write("-1");
}
}
}  

启动测试，欧也，大功告成！

代码中添加的两条内容为“内容”的弹幕也能正确显示出来。发送弹幕时也能正确到达SendComment.aspx.cs中的断点，说明网站正常运行。

至此一个我们自己的弹幕网站就搭建完成了。

示例代码

上面的代码可以从这里找到：http://vdisk.weibo.com/s/qWaDn

使用VS2012创建，如果你安装了VS2010 SP1也可以打开的

barnett2010

上面提到的是这个mukioplayer.
项目页面 https://code.google.com/p/mukioplayer/   打不开的话，论坛有梯子。
MukioPlayer 弹幕播放器

MukioPlayer 弹幕播放器包含两个主要版本: 网页版与桌面版

WEB/网页弹幕播放器: MukioPlayerPlus

（图为 MukioPlayerPlus 弹幕播放器，别认错了）

网页弹幕播放器是搭建弹幕网站的核心组件。MukioPlayerPlus (第二代)用Flash 编写，适合嵌入到各类网站。源代码在MIT开源协议下完全开放，可以与各种网站后端无缝整合。

Air/桌面弹幕播放器: MukioPlayer

（图为 MukioPlayer 桌面版）

桌面弹幕播放器用于播放本地的视频及弹幕，方便在离线环境下观看弹幕视频。MukioPlayer 桌面版使用Adobe Air 技术，与网页版共享核心代码。与其他桌面弹幕播放器相比，最大的优势在于具有与弹幕网站一致的弹幕观感。

安装本程序前，请先安装好Adobe Air。

下载：网盘

桌面版安装教程: 安装指南

发行日志: ReleaseNotes

源代码: svn checkout http://mukioplayer.googlecode.com/svn/ mukioplayer-read-only

barnett2010

	Filename ▼	Summary + Labels ▼	Uploaded ▼	ReleaseDate ▼	Size ▼	DownloadCount ▼	...
	mukioplayer v1.200.zip	mukioplayer v1.200	Jul 2013	Jul 2013	801 KB	12668
	MukioPlayerHtmlDesktopv1.0.zip	MukioPlayerHtmlDesktopv1.0a另一个桌面弹幕播放器	Jun 2011	Jun 2011	336 KB	4166
	mukioplayerv2.000r83.zip	MukioPlayer Net Version 2.000测试版r83	Jun 2011	Jun 2011	262 KB	4078
	mukioplayer web 20100927.zip	mukioplayer web GAE SRC(python)[本地上传弹幕,支持两种格式] 2010年9月27日  Featured	Sep 2010		227 KB	5521
	MukioPlayer Net Version.zip	MukioPlayer 服务器版 v1.146	Jul 2010		212 KB	4375

barnett2010

http://blog.sina.com.cn/s/blog_58c506600101i5sr.html

http://blog.sina.com.cn/s/blog_58c506600101ivdf.html

barnett2010

这是在线演示网站
http://gae.mukio.org/

barnett2010

discuz
wordpress

均有相关插件下载