视频点播
描述
支持各种视频需求,一站式满足产品方的基础视频服务
功能说明
1.支持当前主流的视频播放器 —— HTML5 和 Flash Player,以及其他的客户端播放器
2.支持多种视频格式的点播,比如:mp4、flv、hls、webm、ogg、mpeg等
3.点播采用单独的域名体系(nos-es1-vod.126.net),域名体系下包含原生的各种视频操作支持
4.NOS 与CDN 完美结合,实现基于私有桶的原生回源鉴权机制,完美支持付费点播场景
格式支持
视频格式 | Content-Type | 播放器支持 | 元数据要求 |
---|---|---|---|
flv | video/x-flv | flash player | 注入关键帧信息 |
mp4 | video/mp4 | flash player, html5 | moov 信息前移 |
ogg | video/ogg | html5 | |
webm | video/webm | html5 | |
mpeg | video/mpeg | html5 |
Flash Player点播
我们目前仅支持 flv、mp4 格式的 flash 点播,但是对支持点播的 flv、mp4 视频文件增加相关元数据。 对于 mp4 文件,需要生成 moov 前移的 mp4 格式,适合流媒体播放(支持拖放等):
ffmpeg -i src.mp4 -c:v libx264 -c:a libvo_aacenc -f mp4 -movflags faststart dst.mp4
对于FLV文件,需要注入关键帧(keyframes)信息,可以用yamdi或flvtool在metadata中添加关键帧:
yamdi -i src.flv -o dst.flv
添加了元数据的视频文件即可以使用 flash player 点播,如下(只需将下面的链接粘贴到浏览器中即可):
http://nos.netease.com/doc/player.swf?type=http&file=http://testtest3.nos-es1-vod.126.net/test_with_key.flv
http://nos.netease.com/doc/player.swf?type=http&file=http://testtest3.nos-es1-vod.126.net/test.mp4
其中:
- http://nos.netease.com/doc/player.swf 为 flash 播放器,可以使用用户自己的播放器
- type=http 表示基于 http 分发方式
- file 是存放到 NOS 中的视频文件
如果要使用自己的播放器,那么只需要将存放在 NOS 中的资源链接整合进播放器即可,记得带上start参数,资源链接如下:
http://testtest3.nos-es1-vod.126.net/test_with_key.flv?start=123
http://testtest3.nos-es1-vod.126.net/test.mp4?start=456
HTML5点播
目前 html5 支持的视频格式比较多,主要有 mp4、ogg、webm、mpeg。 html5 的视频点播主要通过 vedio 标签实现,下面是一个简单的例子:
<video width="320" height="240" controls autoplay>
<source src="http://testtest3.nos-es1-vod.126.net/test.mp4" type="video/mp4">
</video>
其中:
- video 为 html5 中的元素
- width 表示视频播放器的宽度
- height 表示视频播放器的高度
- controls 表示显示播放控件
- autoplay 表示视频就绪之后自动不放
Note:
虽然 html5 支持的视频格式比较多,但是并不是所有的浏览器都会兼容所有视频格式,尤其是 IE 浏览器。面对这种情况,可以采用视频多源来规避这个问题,从而达到所有浏览器都能播放,下面是简单的例子Multiple sources:
<video poster="movie.jpg" controls>
<source src="movie.webm" type='video/webm; codecs="vp8.0, vorbis"'>
<source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="movie.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
<p>This is fallback content to display for user agents that do not support the video tag.</p>
</video>