使用七牛上传视频调用视频播放器的推荐方案

简介:


视频应用通常要求播放器具备以下的基本特性:

多客户端支持。包括:PC端(Web播放)和移动端(iOS,Android等)。具备多平台支持的播放器有助于简化开发,规避平台之间的差异。
常用的音视频编码格式支持。常用编码格式主要是:视频H264;音频MP3和AAC。这些音视频格式使用广泛,兼容性较好。
常用的容器格式支持。常用容器格式包括:flv、mp4、HLS(m3u8/mpeg-ts),mp3,aac。满足这些格式,便可以覆盖大多数的应用场景。
播放数据统计。播放统计数据主要用于用户观看统计、计费、基础服务的状态分析、用户行为分析等等。
广告。广告是视频应用重要的变现手段。
外观定制。外观定制帮助音视频应用美化界面,提高用户体验。
播放器的选择

可供选择的播放器很多,但能够很好地支持上述功能的播放器为数不多,常用的有:

ckplayer: http://www.ckplayer.com 
GrindPlayer: http://osmfhls.kutu.ru/docs/grind/

下表罗列了这几种播放器的功能特性:

  seweise palyer JW Player free+HLSProvider ckplayer GrindPlayer
主要格式 mp4、flv、m3u8 mp4、flv、m3u8 mp4、flv mp4、flv、m3u8
播放技术 flash&html5 flash&html5 flash&html5 flash&html5
外观设置 支持 支持 支持 不支持
播放列表 支持 支持 支持 支持
广告 支持 支持 支持 支持
统计信息 支持 支持 支持 支持
字幕 支持 支持 不支持 支持
DVR 支持 支持 不支持 支持
直播 rtmp、hls rtmp、hls rtmp hls
HLS加密 支持 不支持(需premium和Enterprise版) 不支持 128bit
收费 免费/开源 免费/开源(不能用于商业用途) 免费 开源

可以看出,JW Player的功能最为完整。其免费版存在功能限制,比如没有HLS支持,但有一些开源的插件可以补充这些功能。JW Player免费版+插件的形式主要问题在于免费版不能用于商业用途。ckplayer功能很多,但缺少HLS在Web上的播放支持,所以使用上存在障碍。GrindPlayer功能比较全面些,通常的用况下,足赋使用。

因此,如果可以承担一些费用的话,Premium版的JW Player是最好的选择。如果音视频应用希望使用免费的播放器,并且没有外观设置之类的需求,那么可以使用GrindPlayer。如果用户不需要HLS的支持,那么可以使用ckplayer。如果GrindPlayer和ckplayer都不能满足要求,同时又要免费,那么可以免费版JW Player+插件。但需要说明的是,这种形式可能存在法律风险,因为免费版JW Player不能用于商业用途。

格式的选择

音视频编码和容器格式的选择需要兼顾不同播放平台和播放器,同时还需要最少的资源消耗量和开发量。

我们首先建议使用通用性较好的格式。频编码格式支持最多的应是H264,大部分的浏览器、移动端和播放器都支持这种编码格式。音频格式常见的主要是MP3和AAC,两者获得大多数的平台支持。因此,音视频应用应当尽可能以这些编码生成视频文件,以便免去进一步编码转换的麻烦。如果应用无法控制源音视频的编码,那么可以在音视频上传后使用七牛云存储的音视频转码功能,生成播放所需的音视频。

容器格式相对复杂一些。不同播放平台的支持各有不同。但是,如果选择了合适的播放器,那么这方面的选择可以简单很多。一般而言,flv格式主要用于flash播放器,mp4在html5上支持较好。而移动端(iOS、Android)上,主要支持MP4和HLS。由于iOS端排斥flash,从而无法播放flv格式。如果我们希望在所有平台上使用统一的一种格式,那么只有MP4。所以,一般情况下,我们建议使用MP4作为视频播放的主要格式。

MP4的不足之处在于对拖动播放(seek)支持不好。拖动播放是用户常见的一种播放行为,当用户需要跳过某些内容,或者音视频应用支持进度条打点和缩略图功能的时候,拖动播放有着非常重要的作用。正常情况下,播放器需要将MP4音视频文件缓存到拖放点,才能开始正式播放。但这会导致用户长时间等待,并且产生大量的废流量。有一些工具可以帮助服务端提供支持“?start=…”这样的参数,但在使用上存在诸多限制和问题。更有效的方式是将长视频切分成片段(通常5-10分钟一片),由一个播放列表串接起来。播放器在拖动播放时,只下载所涉及的片段,提高响应,减少废流量。

但是这种长视频切片的功能需要播放器的额外支持,现有播放器对此的支持不多。捷径是使用HLS。HLS尽管通常用于直播,但也可以用于点播。其做法是将长视频切片,然后用m3u8文件建立索引,由播放器解析并且自动加载和播放。

HLS的问题在于PC端的播放器支持不理想,flash播放器和桌面浏览器的html5都不原生支持HLS。因此,我们在选择播放器的时候将HLS作为重要的一种能力。在上述列出的四种播放器中,大部分都支持HLS协议。因此,我们建议用户选择其中支持Web端HLS的播放器,并且使用七牛云存储的视频切片功能,将其转换为HLS协议,简化应用的开发,提高用户体验。关于HLS播放相关支持,请参考在七牛云存储上播放HLS

此外,对于有些应用,希望对于不同的用户端采用不同的音视频分辨率和码率,以适应不同的使用环境。比如,移动端采用较低的码率和音视频质量,而PC端采用较高的码率和质量。更进一步,可以允许用户根据各自不同的网络环境自动或者手动地选择音视频质量。这需要音视频播放的多码率的支持。HLS本身支持多码率音视频流,可以很方便地实现这种功能。关于HLS多码率支持,请参考如何利用七牛云存储实现HLS的多码率播放

案例

假设有一个视频文件: sintel_trailer.mp4,以HLS播放。需要做三件事情:

将文件上传至七牛云存储。具体上传方法参考上传操作。
使用avthumb/m3u8功能将其转换成HLS媒体文件。这个转换可以在上传时使用数据预处理功能执行转换;或者在上传完成后,对其进行持久化FOP。但是,无论哪种方式,都需要使用saveas功能转码结果保存为指定的名称(需要.m3u8文件名后缀)。

最主要给大家推荐一款免费播放插件

插件地址:https://github.com/jackzhang1204/sewise-player 
demao :http://jackzhang1204.github.io/sewise/sewise_player/demos/index.html

下面的播放页面演示了几种播放器播放样例视频:

HLS:


GrindPlayer:http://www.flashls.org/latest/examples/osmf/GrindPlayer.html 
seweizhi:http://jackzhang1204.github.io/sewise/sewise_player/demos/index.html

MP4:
seweizhi:https://github.com/jackzhang1204/sewise-player

FLV:
seweizhi:http://jackzhang1204.github.io/sewise/sewise_player/demos/index.html 




本文转自黄聪博客园博客,原文链接:http://www.cnblogs.com/huangcong/p/5179449.html,如需转载请自行联系原作者

相关文章
|
数据库
手把手教你云相册项目简易开发day4-上传下载业务逻辑之缩略图上传下载业务和审核业务(下)
手把手教你云相册项目简易开发day4-上传下载业务逻辑之缩略图上传下载业务和审核业务(下)
69 0
企业微信接入系列-上传临时素材
简述在API接口创建企业群发时上传临时素材的操作
企业微信接入系列-上传临时素材
C#-微信公众平台接口-上传临时素材
最烦做微信公众平台的东西。。文档说得不清不楚,又没示例代码,只能自己 慢慢搜索,弄了一晚上,基本弄出来了,把本地的图片上传到微信的临时素材那里,返回媒体ID,用于其他操作,代码如下 :(自己导入相应的类System.
1643 1
|
存储 消息中间件 Java
手把手教你云相册项目简易开发day4-上传下载业务逻辑之缩略图上传下载业务和审核业务(上)
手把手教你云相册项目简易开发day4-上传下载业务逻辑之缩略图上传下载业务和审核业务
114 0
|
25天前
|
API 数据安全/隐私保护
抖音视频,图集无水印直链解析免费API接口教程
该接口用于解析抖音视频和图集的无水印直链地址。请求地址为 `https://cn.apihz.cn/api/fun/douyin.php`,支持POST或GET请求。请求参数包括用户ID、用户KEY和视频或图集地址。返回参数包括状态码、信息提示、作者昵称、标题、视频地址、封面、图集和类型。示例请求和返回数据详见文档。
|
3月前
|
存储 前端开发 Java
学成在线笔记+踩坑(5)——【媒资模块】上传视频,断点续传
上传视频,MinIO断点续传、检查文件/分块、上传分块、合并分块
学成在线笔记+踩坑(5)——【媒资模块】上传视频,断点续传
|
6月前
|
小程序
微信小程序实现上传视频 / 上传图片功能以及整合上传视频 / 上传图片功能(超详细)
微信小程序实现上传视频 / 上传图片功能以及整合上传视频 / 上传图片功能(超详细)
微信录音上传至七牛云控制器代码
微信录音上传至七牛云控制器代码
93 0
|
存储 小程序 JavaScript
小程序云开发上传及使用图片
小程序云开发上传及使用图片
144 0
|
缓存 JavaScript 前端开发