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

简介:

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

多客户端支持。包括: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文件名后缀)。 
将转码后的结果构造成下载URL: http://ztest.qiniudn.com/sintel.m3u8 ,然后放入播放器,或者播放页面的参数中。

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

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

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

HLS:

seweizhi:http://seweizhi.qiniudn.com/demao.html 
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,如需转载请自行联系原作者

相关文章
|
1月前
|
移动开发 监控 小程序
mPaaS常见问题之音视频通话微信小程序通话界面录制为画中画模式如何解决
mPaaS(移动平台即服务,Mobile Platform as a Service)是阿里巴巴集团提供的一套移动开发解决方案,它包含了一系列移动开发、测试、监控和运营的工具和服务。以下是mPaaS常见问题的汇总,旨在帮助开发者和企业用户解决在使用mPaaS产品过程中遇到的各种挑战
27 0
|
7月前
|
存储 缓存 前端开发
视频播放大文件上传
视频播放大文件上传
85 0
|
存储 PHP 数据安全/隐私保护
Ueditor结合七牛云存储上传图片、附件和图片在线管理的实现和最新更新
最新下载地址: https://github.com/widuu/qiniu_ueditor_1.4.3 Ueditor七牛云存储版本 注意事项 老版本请查看 : https://github.com/widuu/qiniu_ueditor_1.
3021 0
|
4月前
|
开发工具 CDN 容器
基于Html+腾讯云播SDK开发的m3u8播放器
周末业余时间在家无事,学习了一下腾讯的云播放sdk,并制作了一个小demo(m3u8播放器),该在线工具是基于腾讯的云播sdk开发的,云播sdk非常牛,可以支持多种播放格式。
101 1
|
9月前
微信录音上传至七牛云控制器代码
微信录音上传至七牛云控制器代码
59 0
|
5月前
|
开发工具
Queen智能美化特效SDK需要高级美颜、常见美型、美体这样是属于按版本买,还是按客户端计费?
Queen智能美化特效SDK需要高级美颜、常见美型、美体这样是属于按版本买,还是按客户端计费?
27 1
|
5月前
|
前端开发 JavaScript
uniapp上传图片至服务器,获得在线图片链接预览(实战)
uniapp上传图片至服务器,获得在线图片链接预览(实战)
241 0
|
9月前
uniapp视频、音频上传的方法
uniapp视频、音频上传的方法
|
9月前
|
前端开发 UED
uniapp实现上传语音的原理
uniapp实现上传语音的原理
|
11月前
|
小程序 程序员 API
小程序(uniapp)上传头像至OSS(阿里云)--保姆级
前言 自微信小程序改版以来,现在获取用户的头像和昵称就不能直接通过wx.getUserInfo获取了。而是需要用户主动在登录后填写自己的昵称和头像,微信只是提供一个一键填写的快捷操作让用户直接使用自己已有的微信昵称或头像。
2568 0