视频的在线播放

为什么80%的码农都做不了架构师？>>>   

视频的在线播放

• 怎样在页面上实现视频的播放？
• 在线视频播放支持什么样的格式？
• 视频格式的多样性，如何让其都支持？

直到现在，仍然不存在一项旨在网页上显示视频的标准。 今天，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。 HTML5 规定了一种通过 video 元素来包含视频的标准方法。

####video元素支持三种视频格式：

格式	IE	Firefox	Opera	Chrome	Safari
Ogg	No	3.5+	10.5+	5.0+	No
MPEG 4	9.0+	No	No	5.0+	3.0+
WebM	No	4.0+	10.6+	6.0+	No

• Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
• MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
• WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

由于MPEG-4是一个公开的平台，各公司、机构均可以根据MPEG-4标准开发不同的制式，因此市场上出现了很多基于MPEG-4技术的视讯格式，例如WMV 9、Quick Time、DivX、Xvid等。MPEG-4大部份功能都留待开发者决定采用是否。这意味着整个格式的功能不一定被某个程序所完全函括。因此，这个格式有所谓配置（profile）及级别（level），定义了MPEG-4应用于不同平台时的功能集合。

MPEG4格式就好比是一个容器（如：压缩包RAR）,由视频和音频打包在一起的，画面和声音是分开用不同的编码格式保存下来的，再打包成mp4格式，所以不同的mp4中可能内部的视频和音频格式有所不同。

###视频格式转码

使用ffmpeg工具进行视频转码

认识ffmpeg

FFmpeg是一套可以用来记录、转换数字音频、视频，并能将其转化为流的开源计算机程序。采用LGPL或GPL许可证。它提供了录制、转换以及流化音视频的完整解决方案。它包含了非常先进的音频/视频编解码库libavcodec，为了保证高可移植性和编解码质量，libavcodec里很多codec都是从头开发的。 FFmpeg在Linux平台下开发，但它同样也可以在其它操作系统环境中编译运行，包括Windows、Mac OS X等。这个项目最早由Fabrice Bellard发起，现在由Michael Niedermayer维护。许多FFmpeg的开发人员都来自MPlayer项目，而且当前FFmpeg也是放在MPlayer项目组的服务器上。项目的名称来自MPEG视频编码标准，前面的"FF"代表"Fast Forward"。

ffmpeg的组成

FFmpeg是一套可以用来记录、转换数字音频、视频，并能将其转化为流的开源计算机程序。它包括了领先的音/视频编码库libavcodec等。 libavformat：用于各种音视频封装格式的生成和解析，包括获取解码所需信息以生成解码上下文结构和读取音视频帧等功能；

• libavcodec：用于各种类型声音/图像编解码；
• libavutil：包含一些公共的工具函数；
• libswscale：用于视频场景比例缩放、色彩映射转换；
• libpostproc：用于后期效果处理；
• ffmpeg：该项目提供的一个工具，可用于格式转换、解码或电视卡即时编码等；
• ffsever：一个 HTTP 多媒体即时广播串流服务器；
• ffplay：是一个简单的播放器，使用ffmpeg 库解析和解码，通过SDL显示；

ffmpeg常用命令

ffmpeg -i source_video.avi -acodec aac -ab 128kb -vcodec mpeg4 -b 1200kb -s 320x180 -title X final_video.mp4

说明：

• 源视频：source_video.avi
• 音频编码：aac
• 音频位率：128kb/s
• 视频编码：mpeg4
• 视频位率：1200kb/s
• 视频尺寸：320 X 180
• 生成的视频：final_video.mp4

ffmpeg -i source_video.avi -b 300 -s 320x240 -vcodec xvid -ab 32 -ar 24000 -acodec aac final_video.mp4

说明：

• 源视频：source_video.avi
• 音频编码：aac
• 音频位率：32kb/s
• 视频编码：xvid
• 视频位率：1200kb/s
• 视频尺寸：320 X 180
• 生成的视频：final_video.mp4

###视频在线播放

使用ckplayer播放器实现在线播放

###认识ckplayer

• ckplayer是一款在网页上播放视频的免费软件，主要特点是：免费，小巧，功能强大，定制方便。
• ckplayer是一款基于网页前端的播放器软件，所以对环境的要求很低，只要您的环境支持html文件访问即可。
• 在普通使用时，不需要asp，.net，php，jsp等程序的支持。
• 支持安装了flashplayer插件的浏览器和HTML5平台

ckplayer使用

<div id="ckplayer"></div>
<script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8"></script>
<script type="text/javascript">
    var flashvars={
        f:'http://movie.ks.js.cn/flv/other/1_0.mp4',
        c:0,
        loaded:'loadedHandler'
    };
    var video=['http://movie.ks.js.cn/flv/other/1_0.mp4->video/mp4'];
    CKobject.embed('ckplayer/ckplayer.swf','ckplayer','ckplayer_a1','600','400',false,flashvars,video);
</script>

参数说明

CKobject.embed(
'flash播放器文件路径',
'容器ID',
'播放器的ID',
'宽度，可以是百分比',
'高度，可以是百分比',
优先调用设置，false=优先调用flash播放器，true=优先调用HTML5播放器
flash播放器的初始化参数，以及HTML5初始化参数，比如默认播放/暂停等设置，详细的可以参考【flashvars里各参数的说明】这一版块
HTML5视频播放地址，数组形式，详细的可参考HTML5视频调用的说明
)

###实现视频的随意拖动播放

视频文件，服务器，播放器设置

要支持该功能，需要考虑的因素包括：视频文件，服务器，播放器设置

• 视频文件要存在关键时间点。这是标准的格式所决定的。不管是flv还是mp4都需要，举一个简单的示例，比如视频文件名1.flv里存在的关键时间点和关键帧数据如下 1,5,10,15,20 1000,1500,2000,2500,3000 上面是一一对应的，即有一个关键时间点就会有一个关键帧，这些是视频本身的信息。要转换视频时就需要把这些信息写入进去，现在的很多软件有这个功能，可以查看帮助手册里关于给视频添加关键帧的相关部分

• 服务器设置，因为视频从未加载的地方进行播放，播放器会向服务器发送请求如1.flv?start=10这样的地址，如果服务器能够处理这样的地址则会从当前的第10秒开始加载，关于这里的设置可以查看帮助手册里的相关说明

• 播放器里的flashvars里的h值需要设置，比如设置成4或3即可，关于这个参数的详细说明帮助手册里也有。另外还要注意的是q值，q值在不设置的情况下是start。如果你有特殊设置，需要注意这里

参数	默认值	功能	功能说明
h	h	视频是否支持播放未下载的内容	=0：不支持，普通播放 =1：按关键帧进行拖动 =2：按关键时间点进行拖动 =3：自动判断，根据视频后缀进行判断 =4：按关键字进行判断，视频地址里包含mp4字样则按关键帧，包含flv字样则按关键时间点
q	start	视频拖动时传递的参数	当h>0时，拖动的参数，如1.flv?start=45646

###Apache服务器的设置

通过添加Apache服务器组件来实现视频的随意拖放

• 下载mod_h264_streaming.so组件，并放到apache目录下的modules文件
• 然后修改Apahce的配置文件httpd.conf，找到类似这样的LoadModule在他们的下面加上以下两段

LoadModule h264_streaming_module modules/mod_h264_streaming.so 
AddHandler h264-streaming.extensions .mp4

• 重启apache服务

OK 至此，还有许多需要完善还在等着我们…………

转载于:https://my.oschina.net/mleo/blog/466692