HTTP现场流

写由Jackie Rosenzveg 2016年11月16日 10M读取

更新 :

文章中,我们澄清并非所有浏览器都原创支持HLS或MPEG-DASH,因此,为了向所有设备提供自适应流视频,你应该使用视频播放器提供视频支持你选择格式2017年12月Cloudinary发布自己的视频播放器,使你很容易地将播放器嵌入网页中,该网页可流出HLS或MPEG-DASH视频细节见视频播放者公告博客贴文并视频播放器文档.

HTTP直播流和MPEG-DASH插播图像

你知道瞬时手机上点击视频链路路上从办公厨房取咖啡可你得到烦人的缓冲图标放弃视频可能很有趣甚至值钱但它不值得你花时间

数以百万计用户每天重复这一经验:开工前窃取几分钟,拉开睡觉前或下床前的时间,抢先中断其他计划任务等短视频可成为深入了解概念、产品或获取最新消息的好方法,即便我们有更多时间空闲,我们也发现自己太焦急,无法等待视频缓冲太久

网页上提供视频时,你理解高视频内容若不快速传送到用户监听并留意到尾端,则价值微乎其微最小化这些代价极高的故障最优方法就是用视频传送自适应比特率流.

适配比特流技术视频传输技术,即时根据检测到的带宽和每个用户的CPU容量调整视频流质量

两种最受欢迎自适应比特率流格式HLS系统HTTP直播流并MPEG-DASHHTTP动态流if you can提供视频两种格式,你可能会最小化缓冲时间接近所有用户每种格式都要求多次输出视频,并配有一组额外必备文件这一过程通常既复杂又乏味服务帮助创建这些文档成本高, 多数不提供端对端解决方案

可使用云化自适应流剖面功能简化创建这些文件,使您能自动生成所有所需视频文件,并随附相应的索引和主文件,以达到期望质量和比特率水平。以任何格式上传视频,插件云端预定义流剖分解之一名热切转换请求(或指定自定义流剖分解与adminAPI定义)后交付自动生成全打包.m3u8或.mpdHTTP直播流播放器或MPEG-DASH播放器字面化插头播放脱机

自适应比特率流

提供视频自适应比特率流表示式或变异式视频中各有不同性格比特率和编解码视频文件还必须配有索引文件,指定预定义段或块视频通常2分5秒或10秒外加主播放列表指向可用表示式并附加信息

自适应位图流文件图 适配位图流文件图

自适应流播放器使用此信息判定哪些表示方式最匹配用户网络条件或偏好网络条件变换时,它可切换到每段质量高低的另一表示法这有助于保持持续浏览尽可能高质量以尽量扩大用户经验

下示例模拟自适应流播放程序用户观看视频通过自适应流播

自适应位图流模拟

	用户开始播放同时连接wif视频立即启动使用小640x360表示式并同时缓冲
	几秒后用户扩展为全屏,并由于缓冲功能已足够,客户提供高分辨率1280x720表示法
	用户手动从播放器分辨率选择框选择1920x1080表示式
	用户从家到车离开wif射程时,他把选取玩家恢复自动客户识别网络性能下降并恢复640x360播放

HTTP直播流和MPEG-DASH自适应比特率流格式

两种领先自适应比特率流格式HLS系统HTTP直播流MPEG-DASHHTTP动态流

HLS系统apple创建自适应流通信协议Sfari浏览器可以在网页iPhonesiPod触摸设备内播放HLS流自 v2 所有苹果电视设备也包括HTTP流客户端AppStore系统需要应用流视频超过手机网络10分钟通过HLS自适应流送视频细节见https://developer.apple.com/library/ios/qa/qa1767/_index.html

MPEG-DASH是一个流视频国际标准,意在标准替换专有HTTP流技术,但目前不由iOS设备支持在其他浏览器和设备中,它需要javascript库或视频播放器支持MPEG-DASH

上文提到,使用自适应比特率流送视频时,必须生成多视频表示式、索引文件/表示式和主播放列表HLS和MPEG-DASH格式编码对每个文件都不同hTTP直播流格式和MPEG-DASH格式覆盖OS设备和非iOS设备时,需要双倍努力交付视频对MPEG-DASH而言,最佳做法是分送音视频,因此整理更多文件并复杂化

云流剖面

生成如此多视频输出并创建所有所需支持文件

解决挑战云化允许您从一组预定义流剖面或创建自定义剖面云流剖面由一组视频表示定义组成,有各种属性、比特率和编解码器4k预定义剖面图16*9宽比中指定8种不同表示方式,从极高质量到只音频不等

选择或定义流出剖面图后,简单上传视频文件并单求变换指令云性生成所请求剖面图所需要所有文件如果要提供两种格式,只需要2热切内部变换上传命令代之以一

例例鲁比代码热切生成大buckbunnyHTTP现场流出和MPEG-DASH格式视频使用全hd内置流出剖面

        Cloudinary::Uploader.upload("big_buck_bunny.mp4"..资源类型=>视频直播热切=>{{{{}:streaming_profile=>全hd..格式化=>m3u8},{:streaming_profile=>全hd..格式化=>md},##########热切async=>真实性..eager_notification_url=>"http://mysite/notify_endpoint"..公共标识=>bbunny大全)代码语言JavaScript高山市javascript)

7种预定义自适应流剖面图可供选择相同的剖面与HLS和DASH相关全部细节可用剖面图见预定义流剖面云形文档中可使用管理员API微调预定义剖面图以适应需求或创建自己的自定义流剖面.

热上传完成后,你唯一要做的就是将相关自适应流客户播放器嵌入应用多开源闭源HLS和DASH客户端

边玩边玩3u8或mpd文件生成自适应流剖面图, 您可以查看客户播放器使用浏览器工具从表达式选择方式, 诸如 Chrome DevTools控制台

浏览器网络控制台显示主动视频表示

上可见高亮段使用800k比特率480x360播放,下段则用640x480分辨率2m比特率表示

高层次流动剖面图选择,客户播放器选择越多层次,服务质量越好,允许对用户当前网络条件持续回播贝斯特登录入口官网下载高层次剖面使用更多存储转换资源如果这是一个问题,你可能想利用预定义剖面图,内含较少表示式,低质量和高质量间有较大跳转并记住,即使你现在只需要单行代码来准备HLS和/或MPEG-DASH输出值,这些变换需要很多管理费并必须热切完成

高山市注释 :云形支持实时转换并交付文件, 万一所有文件总尺寸小于100MB, 但由于编码时间长, 实时选项应只用于调试目的。

外向剖面变换可同时应用其他变换URL播放bbunny视频HTTP现场流格式,上左角贴上小标识

加载代码示例

高山市注解:以上URL可仅在支持HLS的设备或玩家中查看

应用变换方式将同变换方式应用到所有表示式中也可以对剖面图中的不同表示式应用不同的变换方式,例如,添加文本叠加显示用户当前播放的分辨率要做到这一点,你需要创建自定义流剖面

自定义流配置

预定义自适应流剖面图云提供基于一组选定最佳做法,其中之一很可能适合大多数标准假想

万一提供简介都无法完全满足您的需要呢举例说,你可能需要不同数位表示或不同质量分块供剖析档使用或想对剖面图内的不同表示式应用特殊变换创建定制流情剖面流化剖面图a.

下方使用RubyadminAPI创建hd_debug剖面图中,每种定义表示法都包含相关视频变换和文本叠加显示分辨率比特率.帮助我们调试并观察客户如何从表示式切换取视频缓冲增长时,当我们调整屏幕大小时,或当网络条件改变时。

Cloudinary::Api.create_streaming_profile(hd调试..表示式=>{{{{}:变换=>{{{{}:宽度=>320, :高度显示=>240, :比特率=>192k, :裁剪=>限制},{:叠加=>'text:Arial_24_bold:320x240--bitrate:192KB'..颜色显示=>白字, :后台=>rgb.0000020},{:边界=>'6px_solid_rgb:00000020', :重力=>北边, :y市=>0.1..标志=>层应用}},{变换=>{{{{}:宽度=>480, :高度显示=>270, :视频编码=>'h264:baseline:3.0'..比特率=>800k, :裁剪=>限制},{:叠加=>'text:Arial_24_bold:480x270--bitrate:800KB'..颜色显示=>白字, :后台=>rgb.0000020{{}:边界=>'6px_solid_rgb:00000020', :重力=>北边, :y市=>0.1..标志=>层应用}},{变换=>{{{{}:宽度=>640, :高度显示=>360, :视频编码=>'h264:baseline:3.0'..比特率=>二米, :裁剪=>限制},{:叠加=>'text:Arial_24_bold:640x360--bitrate:2MB'..颜色显示=>白字, :后台=>rgb.0000020},{:边界=>'6px_solid_rgb:00000020', :重力=>北边, :y市=>0.1..标志=>层应用}},{变换=>{{{{}:宽度=>960, :高度显示=>540, :视频编码=>h264:main:3.1..比特率=>3500k, :裁剪=>限制},{:叠加=>'text:Arial_24_bold:960x540--bitrate:3.5MB'..颜色显示=>白字, :后台=>rgb.0000020},{:边界=>'6px_solid_rgb:00000020', :重力=>北边, :y市=>0.1..标志=>层应用}},{变换=>{{{{}:宽度=>1280, :高度显示=>720, :视频编码=>h264:main:3.1..比特率=>5500k, :裁剪=>限制},{:叠加=>'text:Arial_24_bold:1280x720--bitrate:5.5MB'..颜色显示=>白字, :后台=>rgb.0000020},{:边界=>'6px_solid_rgb:00000020', :重力=>北边, :y市=>0.1..标志=>层应用}}})代码语言JavaScript高山市javascript)