注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

@fc_lamp

关注Web应用解决方案MySql/PHP/Python一盏名为"飞川"的灯~

 
 
 

日志

 
 

HTML5 视频直播(m3u8)从CCTV 看 HTML5直播技术  

2016-05-28 00:53:49|  分类: Web技术-Js/Html |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
一 CCTV移动端的直播怎么做的?
    先 感谢@爱尔兰咖啡 抓包分析出的视频流文件与视频缩略图 
    CCTV在移动端使用HLS(m3u8)技术,PC端仍然使用FLASH。我们抓包可分析出在移动端video中使直接用 http://cctv5plus.vtime.cntv.cloudcdn.net:8500/cache/257_/seg0/index.m3u8 播放(注意:PC / Mac 上的 Chrome是不支持m3u8 的)视频缩略图则使用:http://mtq.stcdn.tvmcloud.com/picture/CCTV5AHD.jpg?type=ipad&channel=CCTV5AHD&sj=0.4545454632 此地址。

二 那么什么是HLS(m3u8) 技术。
来源:http://www.open-open.com/lib/view/open1430009218838.html
 概述:M3U8文件是指UTF-8编码格式的M3U文件。M3U文件是记录了一个索引纯文本文件,打开它时播放软件并不是播放它,而是根据它的索引找到对应的音视频文件的网络地址进行在线播放。

目前 WEB 上主流的视频直播方案有 HLS 和 RTMP,移动 WEB 端目前就只有 HLS 能用,我们重点介绍它。

HTTP Live Streaming

HTTP Live Streaming(简称 HLS)是一个基于 HTTP 的视频流协议,由 Apple 公司实现,Mac OS 上的 QuickTime、Safari 以及 iOS 上的 Safari 都能很好的支持 HLS,高版本 Android 也增加了对 HLS 的支持。一些常见的客户端如:MPlayerX、VLC 也都支持 HLS 协议。

HLS 协议基于 HTTP,非常简单。一个提供 HLS 的服务器需要做两件事:

  • 编码:以 H.263 格式对图像进行编码,以 MP3 或者 HE-AAC 对声音进行编码,最终打包到 MPEG-2 TS(Transport Stream)容器之中;
  • 分割:把编码好的 TS 文件等长切分成后缀为 ts 的小文件,并生成一个 .m3u8 的纯文本索引文件;

浏览器使用的是 m3u8 文件。m3u8 跟音频列表格式 m3u 很像,可以简单的认为 m3u8 就是包含多个 ts 文件的播放列表。播放器按顺序逐个播放,全部放完再请求一下 m3u8 文件,获得包含最新 ts 文件的播放列表继续播,周而复始。整个直播过程就是依靠一个不断更新的 m3u8 和一堆小的 ts 文件组成,m3u8 必须动态更新,ts 可以走 CDN。

可以看到 HLS 协议本质还是一个个的 HTTP 请求 / 响应,所以适应性很好,不会受到防火墙影响。但它也有一个致命的弱点:延迟现象非常明显。如果每个 ts 按照 5 秒来切分,一个 m3u8 放 6 个 ts 索引,那么至少就会带来 30 秒的延迟。如果减少每个 ts 的长度,减少 m3u8 中的索引数,延时确实会减少,但会带来更频繁的缓冲,对服务端的请求压力也会成倍增加。所以只能需要根据实际情况找到一个折中的点。

fc_lamp提醒:m3u8文件实例:

HTML5 视频直播(m3u8)从CCTV 看 HTML5直播技术 - fc_lamp - @fc_lamp

 

对于支持 HLS 的浏览器来说,直接这样写就能播放了:

<video src="http://devimages.apple.com/iphone/samples/bipbop/bipbopall.m3u8"
height="300" width="400"></video>

对于不支持 m3u8 的浏览器,比如 PC / Mac 上的 Chrome(多数智能手机均支持m3u8),需要借助 Flash 来实现了。网上有一些较为成熟的方案可以直接用,如: Sewise Player (免费)、 JW Player (收费)。


Real Time Messaging Protocol

Real Time Messaging Protocol(简称 RTMP)是 Macromedia 开发的一套视频直播协议,现在属于 Adobe。这套方案需要搭建专门的 RTMP 流媒体服务如 Adobe Media Server,并且在浏览器中只能使用 Flash 实现播放器。它的实时性非常好,延迟很小。但是无法支持移动端 WEB 播放是它的硬伤。

前面提到的 JW Player 能很好的播放采用 RTMP 协议的直播服务。

三 关于HTML5 video 标签上的几个属性:
   webkit-playsinline="yes"
   控制webview使用html5的video播放视频不全屏(但貌似不太实用)
   x-webkit-airplay="allow"
   AirPlay 是 Apple 的无线流媒体解决方案,可以在不同设备间传递流媒体内容,Apple TV 已经使用。Safari 已经支持 x-webkit-airplay HTML 属性,用于定义是否使用 AirPlay
   

更多参考:http://mp.weixin.qq.com/s?__biz=MzA3NTYzODYzMg==&mid=2653577297&idx=1&sn=a292ff3b499168f4eb589e40b7aa6d13
  评论这张
 
阅读(2577)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017