在线点播直播技术分析

1. 视频点播与直播
sdm
2012-11-20

2. 直播/点播
视频技术
弹幕

3. 全平台: Windows、Mac、IPad、IPhone、Android
全应用：HTML5、App、Flash、客户端、插件

4. 我秀 http://iu.56.com

5. 6房间 http://www.6.cn

6. 呱呱视频社区 http://www.17guagua.com/

7. YY语音 http://edu.yy.com/

8. Neotv http://live.neotv.cn/

9. 17173 http://live.17173.com/

10. 新浪看游戏 http://kan.sina.com.cn

11. 新浪9158 http://vv.show.sina.com.cn/

12. 6房间http://www.6.cn

13. 视频平台
• 点播
• 全平台，全设备
• 直播
• K歌, 游戏, 教育
• 虚拟视频
• 用户
• 配乐,剪辑,解说,加广告,做宣传; 可能不需要游戏录制后自动上传
• 选择高人气,高收益的直播平台

14. 直播/点播
视频技术
弹幕

15. Video Codec
• 视频编码
• Mpeg1,mpeg2,mpeg4,wmv,rmvb,Xvid,Divx,H263,H264,VP8,RV30,RV40
• 音频编码
• wav,mp3,wma,ra,ape,aac,vorbis
• 容器格式
• avi,rmvb,kmv,mp4,flv,3gp

16. Video Codec
• 分辨率
320x240, 480x270,480x320, 640x480,720x406,720X480, 960x720,1280X720,
1920X1080
• 码率
• kbps=文件大小(字节) X8/时间(秒) /1024
• 带宽

17. 微酷--《移动互联网上的微视频》

18. Video on Internet
• 常用格式
• H.264/AAC/MP4 组合
采用 H.264 视频编码和 AAC 音频编码的 MP4 文件
• VP8/Vorbis/WebM 组合
采用 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
• 支持
• Flash + HTML5

19. • Google，Mozilla开源
• Firefox, Chrome, Opera支持
• Microsoft, Apple
• 专利
• 高质量, 低码率
• 芯片硬解码
• Win7,OS X, iOS原生支持
• IE9,Safari原生支持
• Google，Mozilla
• 开源
• Firefox, Chrome, Opera支持

20. HTML5 Desktop
Feature Chrome
Firefox
(Gecko)
Internet
Explorer
Opera Safari
Basic Support 3 3.5 9 10.5 4
MP4 (H.264 +
AAC)
3 Unsupported 9 Unsupported 4
Ogg (Theora +
Vorbis)
3 3.6 Unsupported 10.50 Unsupported
WebM (VP8 +
Vorbis)
6 4 Unsupported 10.60 Unsupported

21. HTML5 Mobile
Feature
Androi
d
BlackB
erry
Chrome
for
mobile
Firefox
Mobile
(Gecko)
IE
Mobile
Opera
Mobile
Opera
Mini
Safari
Mobile
Basic
Support
2.3 7.0 18 4 9.0 11
Unsuppo
rted
3.2
MP4
(H.264 +
AAC)
2.1 ? ? ? 9.0 ? ? 3.2
Ogg
(Theora
+ Vorbis)
Unsuppo
rted
? ? ?
Unsuppo
rted
? ?
Unsuppo
rted
WebM
(VP8 +
Vorbis)
2.3 ? ? ?
Unsuppo
rted
? ?
Unsuppo
rted

22. 参考
• Android Supported Media Formats
Network Protocols
Core Media Formats
Video Encoding Recommendations
• IOS audio and video

23. 流媒体
• 实时流式传输(Real time streaming)
RTSP协议(Real-Time Stream Protocol)
RTMP协议(Real time messaging protocol) （adobe）
MMS 协议(Microsoft Media Server)
实时性好，需要特定协议和服务支持
• 顺序流式传输(progressive streaming)
HTTP progressive streaming
HTTP Live Streaming （apple）
采集 ->编码 -> 分割/索引(m3u8文件) -> web/CDN (索引文件和视频文件) -> 客户端
H.264视频+AAC音频+MPEG-2 TS
HTML5支持
利用现有HTTP协议,实现简单, 可使用常用web server技术
伪实时

24. m3u(m3u8)
• 索引格式
• HTML5 Video直接可播放

25. 优酷 –- 绕过视频封锁
http://v.youku.com/v_show/id_XNDc3ODg1OTY4.html 《少年派的奇幻漂流》
http://v.youku.com/player/getRealM3U8/vid/XNDc3ODg1OTY4/type/mp4/v.m3u8

26. Video capture
• DirectShow
• Microsoft Media Foundation
Win7+
• VideoLan
• Expression Encoder SDK
• 收费
• LEADTOOLS
• Visioforge
• Mitov videolab

27. 视频网站
• CDN
• 存储
备份? Raid?
第三方云平台
• 带宽
最大成本
• 转码
支持多少格式? 静态? 动态？
• 缩略图
截图频率？
上传
存储
提取元数
据,缩略图
转码/切分
分发
调度
管理

28. CDN
• 调度服务
• 引导用户到最合适的CDN(负载,最近…)
• 管理同步、负载、查询
• 成本和用户体验的权衡
• 同步
• 分割小文件
• P2p
• 视频同步也需要带宽
• 服务接口
• 监控, 统计,审计

29. 播放
• 播放器
客户端浏览器插件
快播？渠道受限,名声不好
Flash
APP
• 传输
• P2P
• HTTP

30. Media Server
• 开源
• red5 (java)
• crtmserer (c++)
• nginx-rtmp-module
• Darwin Streaming Server
• 商业
• fms(Flash Media Server)
• helix realnetwork
• wowza media server

31. 存储托管http://www.ku6vms.com, 7牛等云存储平台

32. 开放平台
• 新浪微博
• PPTV
• pps.tv
• 土豆
• 优酷

33. 其他开发内容
• SNS
评论、评分、聊天、转发、喇叭
支持转发到微博么？
• 直播
• 预订、提醒
• 管理
• 内容监管, 管理后台
• 其他
• 搜索、推荐、排行、推广

34. Resource
http://ffmpeg.org http://libav.org
http://www.free-codecs.com/
http://opencv.org/
http://www.videolan.org/projects/
http://www.longtailvideo.com/ http://www.mplayerhq.hu
mencoder
http://flowplayer.org
http://www.videohelp.com/tools

35. .Net Resource
• DirectShow
• Expression Encoder SDK
• Windows Media Encoder 9 Series SDK
• Microsoft® Expression® Encoder 2 SDK
• Microsoft Expression Encoder 4 从3.0开始要安装完整版本才能用SDK
• MediaSuite.NET
收费
• DirectShowNet Library
Directshow的c#封装
• Aforgenet
• VideoShow

36. 直播/点播
视频技术
弹幕

37. 弹幕
• 兴起于日版动漫网站
• http://www.nicovideo.jp
• 国内流行于几个动漫网站
• http://www.acfun.tv/
• http://bilibili.smgbb.cn/
• 小众, 主流视频网站只有土豆推出弹幕产品
• 豆泡
• 开源的产品少

38. A站 http://www.acfun.tv/

39. B站 http://bilibili.smgbb.cn

40. 神弹幕

41. 豆泡 http://dp.tudou.com

42. 实现
• 字幕
• 时间
• 内容
• 属性（颜色、字体、运动路径、停留时间。。。）
• 显示
• 自定义字体、颜色。。。
• 是否遮挡主区域、是否遮挡字幕。。。
• Flash
• 定制播放器
• HTML5
• Video + Canvas

43. 看视频 获取字幕
按照时间
轴显示
获取最新
字幕
发字幕
调用发送
接口
立即显示
字幕服务

44. 几个开源实现
• https://github.com/jabbany/CommentCoreLibrary
• https://github.com/jabbany/ABPlayerHTML5
• https://github.com/jabbany/ABPlayer
• https://code.google.com/p/annot-player/
• https://code.google.com/p/projectanotherdisplayer/

45. 参考
• 《移动互联网上的微视频》
• 《视频CDN的同步调度》
• 《如何支持100万人同时在线看甄嬛传》
• 《Justin.tv's Live Video Broadcasting Architecture》
• 《YouTube Architecture》

46. Q / A ?
Build, Borrow, or Buy