视频点播

描述

支持各种视频需求,一站式满足产品方的基础视频服务

功能说明

1.支持当前主流的视频播放器 —— HTML5 和 Flash Player,以及其他的客户端播放器

2.支持多种视频格式的点播,比如:mp4、flv、hls、webm、ogg、mpeg等

3.点播采用单独的域名体系(nos-es1-vod.126.net),域名体系下包含原生的各种视频操作支持

4.NOS 与CDN 完美结合,实现基于私有桶的原生回源鉴权机制,完美支持付费点播场景

格式支持

视频格式Content-Type播放器支持元数据要求
flvvideo/x-flvflash player注入关键帧信息
mp4video/mp4flash player, html5moov 信息前移
oggvideo/ogghtml5 
webmvideo/webmhtml5 
mpegvideo/mpeghtml5 

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

其中:

  1. http://nos.netease.com/doc/player.swf 为 flash 播放器,可以使用用户自己的播放器
  2. type=http 表示基于 http 分发方式
  3. 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>

其中:

  1. video 为 html5 中的元素
  2. width 表示视频播放器的宽度
  3. height 表示视频播放器的高度
  4. controls 表示显示播放控件
  5. 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>