# PlayerDemo

**Repository Path**: creeve/PlayerDemo

## Basic Information

- **Project Name**: PlayerDemo
- **Description**: 一些新功能的实验场
- **Primary Language**: Objective-C
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2014-09-29
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#<center>iOS视频弹幕功能技术调研报告</center>

刘国成 数码视讯 <liuguocheng@sumaplayer.com>

##本技术调研的目的

　　视频弹幕功能预计将会于V5.0系统中加入，本调研旨在对弹幕视频在iOS平台的实现提供初步的实现方向，供后续讨论商定更确切的实现方案。

##弹幕视频简介

　　弹幕视频是近年来在网络上兴起的一种视频播放方式，与传统视频播放方式不同，弹幕视频可以在播放视频的同时，将用户的评论直接显示在视频上，使用户观看视频的时候能有一种不一样的体验。

　　弹幕起源于日本的Niconico网站，国内较为流行的弹幕视频网站有Acfun和bilibili。

##预计将要实现的功能

　　当前一般的视频在播放的时候，会有特定的视频评论区域，放在视频内容的旁边，用户可以查看他人的评论，也可以在登录后发表自己的评论。而弹幕视频的评论是直接显示在正在播放的视频内容上的，因而最终实现的效果是在用户播放视频的时候，如果打开了弹幕功能，便会在视频播放时的特定时间，将其他用户的评论通过特定的方式（一般是滚动），显示在视频页面上。若用户具有发送弹幕的权限，则可以通过屏幕，输入评论的内容，发送弹幕评论，实时显示在视频中，同时进行记录，以供之后的观众观看。

##实现的方案

###1. 总体系统结构

　　*由于本调研主要以iOS的需求为出发点进行阐述，加上本人对服务器端了解不多，所以涉及的服务器端的描述可能会不大确切*

　　弹幕评论系统主要有三个部分，一个是支持视频弹幕内容解析的iOS端播放器，一个是负责与iOS端进行交互的Portal前端系统，一个是管理用户评论的后台系统。

　　iOS终端与Portal进行交互，主要功能是获得弹幕评论内容并进行解析，最后显示在正在播放的视频上；同时，iOS终端也具备将用户评论发送到Portal的功能。Portal负责接收iOS端发送的请求，查询获取对应的评论内容，返回给iOS终端进行显示；同时，当iOS终端将要发送弹幕的时候，能对其进行权限鉴定，确认该用户是否具备发送弹幕的权限，若具备的话，能接收用户发送的弹幕内容，并存放到管理用户评论的后台系统中。

###2. iOS终端实现分析

####当前已有的App

　　iOS终端（这里以iPad为例）上已经实现了视频弹幕功能，同时较为流行的App主要有两个，一个是bilibili官方的“哔哩哔哩动画”，一个是第三方开发的，聚合了AB两个站点视频的iACG。

　　由于两款App都没有开源，目前在网上能搜索到的只是A站定义的弹幕格式是以JSON进行交互的，而B站则是XML。下面以B站其中的一条弹幕为例，解析下其格式定义:

````
<d p="0,1,25,16777215,1312863760,0,eff85771,42759017">前排占位置</d>
````
　　这一句是B站一个视频对应的XML中的一句弹幕语句，其中按顺序分别定义了弹幕出现的时间（0秒），弹幕的类型（1对应滚动弹幕），弹幕的字体大小（25号），弹幕的颜色（16777215），发送弹幕的时间（单位为秒，基准时间为 1970-1-1 08:00:00），弹幕池，发送者的ID（eff85771）弹幕在数据库中的rowID。我们在搭建自己的弹幕系统时，也可以参考这一定义规则。


####第三方开源库

　　目前并还有找到针对iOS的开源库（Github上几个其他语言的库，比如Java的DanmakuFlameMaster，JS的CommentCoreLibrary，Danmaku，C++的BiliLocal等）。

####实现方案分析

　　弹幕视频iOS端主要的功能是在视频播放器上动态显示评论，针对这一需求，本人首先想到的是在播放器的view上加一个背景透明的UILabel，UILabel文字的内容，大小，颜色可以按照解析相应的语句得到的值进行设置。UILabel的滑动效果可以使用iOS的动画实现。

　　下面是实现这一功能的基本语句：

```
#import "ViewController.h"
#import <MediaPlayer/MediaPlayer.h>

@interface ViewController ()
{
    MPMoviePlayerController *moviePlayer;
}

@end

@implementation ViewController
- (void)viewDidLoad
{
    [super viewDidLoad];
    // 新建一个MPMoviePlayerController
    moviePlayer = [[MPMoviePlayerController alloc] initWithContentURL:[NSURL URLWithString:@"http://asp.cntv.lxdns.com/asp/hls/main/0303000a/3/default/a7591ed4fcb94235b543f984b7992656/main.m3u8"]];
    [moviePlayer.view setFrame:CGRectMake(0, 20, 320, 320)];
    [self.view addSubview:moviePlayer.view];
}


// 当用户按下Play键时，播放视频，同时播放弹幕评论，
- (IBAction)playClicked:(id)sender
{
    UILabel *labelUp = [[UILabel alloc] initWithFrame:CGRectMake(360, 20, 80, 20)];
    [labelUp setText:@"测试弹幕"];
    [labelUp setFont:[UIFont boldSystemFontOfSize:16]];
    [labelUp setBackgroundColor:[UIColor clearColor]];
    [labelUp setTextColor:[UIColor yellowColor]];
    [moviePlayer.view addSubview:labelUp];
    
    // 设置起点的横坐标为360是为了实现字幕从屏幕外滑动到屏幕内的效果
    UILabel *labelDown = [[UILabel alloc] initWithFrame:CGRectMake(360, 40, 80, 20)];
    [labelDown setText:@"好看好看最好看"];
    [labelDown setFont:[UIFont boldSystemFontOfSize:16]];
    [labelDown setBackgroundColor:[UIColor clearColor]];
    [labelDown setTextColor:[UIColor greenColor]];
    [moviePlayer.view addSubview:labelDown];
    
    UILabel *labelDown2 = [[UILabel alloc] initWithFrame:CGRectMake(360, 60, 80, 20)];
    [labelDown2 setText:@"好看好看最好看"];
    [labelDown2 setFont:[UIFont boldSystemFontOfSize:16]];
    [labelDown2 setBackgroundColor:[UIColor clearColor]];
    [labelDown2 setTextColor:[UIColor greenColor]];
    [moviePlayer.view addSubview:labelDown2];

    UILabel *labelDown3 = [[UILabel alloc] initWithFrame:CGRectMake(360, 80, 80, 20)];
    [labelDown3 setText:@"好看好看最好看"];
    [labelDown3 setFont:[UIFont boldSystemFontOfSize:16]];
    [labelDown3 setBackgroundColor:[UIColor clearColor]];
    [labelDown3 setTextColor:[UIColor greenColor]];
    [moviePlayer.view addSubview:labelDown3];
    
    // 滑动的效果是通过简单的动画完成的
    [UIView animateWithDuration:8.0 animations:^{
        [labelUp setFrame:CGRectMake(-160, 20, 80, 40)];
        [labelDown setFrame:CGRectMake(-160, 40, 80, 40)];
        [labelDown2 setFrame:CGRectMake(-320, 60, 80, 40)];
        [labelDown3 setFrame:CGRectMake(-320, 80, 80, 40)];
    }];
    
    moviePlayer.controlStyle = MPMovieControlStyleNone;
    [moviePlayer play];
}
```
　　实现的播放效果如图所示：

![player icon](http://ww1.sinaimg.cn/large/49ccb368gw1eksdruxlyxg208t0duu0x.gif)</center>


##可能会遇到的问题

1. 弹幕视频作为一个近几年才兴起的功能，除了宅男，接受人群的范围还不广，我们的客户主要面对的是局方的领导，如何让其接受这一功能是一个需要考虑的问题。
2. 有些电视频道是比较主旋律的，而弹幕的内容天马行空，不一定和谐，如果要保留弹幕功能，则可能会采用到过滤技术，这也是需要考虑的地方。
3. 和iPad有较大的屏幕不同，iPhone本来看视频的区域就不大，加入弹幕是否会影响观看体验也需要进一步观察。
4. 弹幕较多时，所采用的技术会不会使视频播放在较旧的机器上产生卡顿现象，也需要进一步观察测试。