关于在七牛使用过程中视频播放器的推荐方案

Qiniu 七牛问题解答

很多七牛用户在使用七牛云存储过程中遇到视频播放器选择的问题,这里我做下简单的推荐。

音视频支持

音视频播放

在依托七牛云存储建立视频应用的过程中,使用者时常遇到播放的问题:选择什么样的播放器?使用什么样的编码和容器格式?如何适应多种客户端?等等。

播放器的要求

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

多客户端支持。包括: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

关于七牛 联系我们 工作机会 编辑页面 新建页面 沪ICP备11037377号-5

许可证

Copyright (c) 2012 qiniu.com

时间: 2024-11-06 23:28:07

关于在七牛使用过程中视频播放器的推荐方案的相关文章

UEditor上传图片到七牛C#(后端实现)

由于个人网站空间存储有所以选择将图片统一存储到七牛上,理由很简单 1  免费10G 的容量  ,对个人网站足够用 2  规范的开发者文档 和完善的sdk(几乎所有热门语言sdk) 整体思路 图片上传七牛云 在我看来无非两种方式 1 前端表单或ajax异步提交请求到七牛服务器 ,当然此时也需要经过后端获取相应的  token (图片->七牛服务器) 2 直接后端代码请求 七牛服务器 ,官方有各版本语言的sdk 提供 ,可提高开发效率 ,降低开发难度  (图片->自己服务器->七牛服务器)

vue中七牛插件使用

<template> <div id="cxUpload" class="cx-upload"> <button id="pickfiles" class="uploadBtn">上传</button> </div> </template> <script> // import $ from 'jquery' // import ".

七牛:关于图片 EXIF 信息中旋转参数 Orientation 的理解

EXIF(Exchangeable Image File)是 “可交换图像文件” 的缩写,当中包含了专门为数码相机的照片而定制的元数据,可以记录数码照片的拍摄参数.缩略图及其他属性信息,简单来说,Exif 信息是镶嵌在 JPEG/TIFF 图像文件格式内的一组拍摄参数,需要注意的是 EXIF 信息是不支持 png,webp 等图片格式的. 对于七牛,可以在图片后面加? exif 参数来获取图片的 exif 信息. 对于 Orientation 参数,简单的说是记录图片拍摄的相机的旋转信息,浏览器

php中图片以字节流的形式直接发送七牛

PHP 是弱类型语言,没有bytes[]类型, 而 file_get_contents 获取到的是 string,不是byte[],file_get_contents()函数得到的不是流数据,而是string类型,转换成 base64使用二进制输出即可 $content = file_get_contents("file:///Users//s.jpg");$content = base64_encode($content);然后进行网络传输,对方就能处理数据. 七牛中的直接调用api

UEditor+七牛,实现图片直连上传

最近做的项目,涉及到使用富文本编辑器,我选择了百度的UEditor.同时,我们的图片放在七牛云存储上.关于这两者间的集成,我写下一些个人的经验,与大家分享. 图片上传方案 目前来说,Web端基于七牛等云存储的图片上传方式分为以下两种: 1. 上传图片至服务端,再将数据转发至七牛. 通过服务端接受用户上传的内容,同时可以对内容进行有效性审核,拒绝不合规范的内容,然后从服务端将内容上传至七牛. 这种方法可以有效控制并记录用户提交的内容,但同时也增加了服务器的运行压力. 2. 直接上传图片至七牛,然后

七牛的存储算法猜测

个人浏览网页的时候,有打标签的习惯.最近整理以往的标签的时候,发现积累了一些有关七牛公司存储策略的网页,遂决定整理一篇文章处理,以备记忆.当然,也希望对他人有用. 因为七牛公司的存储策略主要基于纠删码(Erasure Codes,EC),所以下面先从纠删码引申开来. 引言:何为纠删码 数据的爆炸式增长使得存储系统的规模不断增加,存储设备的可靠性却一直没有得到显著提高(SSD 从SLC 到MLC 和TLC 可靠性不断下降,磁盘随着单位面积写入数据更多导致可靠性无法提升),从而给数据的持久化存储带来

导出七牛图片

原来图片都是在本地,往外导图片特别简单,只要执行一下cp的脚本就好了,但是现在图片都迁移到了七牛上,再往外导出图片就麻烦了 在七牛有一个qshell工具 里边有一个qdownload qdownload 从七牛空间同步数据到本地,支持只同步某些前缀的文件,支持增量同步 用的话呢qshell qdownload qdownload.conf  是这么用qdownload.conf 为配置文件 里边有这样一个配置 ,其他配置没有给出. "prefix"    :   ""

关于上传视频到七牛的一些解决方案

<div class="form-group"> <label>上传视频:</label> <div class="my-upload"> <div class=""> <input type="file" id="fileupload" name="fileupload" class="" />

七牛大数据平台的演进与大数据分析实践--转

原文地址:http://www.infoq.com/cn/articles/qiniu-big-data-platform-evolution-and-analysis?utm_source=infoq&utm_medium=popular_widget&utm_campaign=popular_content_list&utm_content=homepage 七牛大数据平台的演进与大数据分析实践 (点击放大图像) 图 1 大数据生态体系 看着图 1 大家可能会感到熟悉,又或者会