二、采用Flash Media Server3.5对视频进行流式处理

此文是Adobe Flash Media Server3.5初学者系列教程的第二篇.主要讲述了通过使用Flash Media Server3.5所提供的视频点播服务完成在Flash视频播放器(SWF)中播放视频流。
关于视频点播的所有信息
为了理解视频点播,首先需要花一分钟倒回去去理解关于使用Flash Media Server3.5的基础内容。早期版本的Flash Media Server实在不能被称赞易学。事实上委婉的讲,当第一次学习FLash Media Server2时,很多人都发现学习曲线十分的陡峭。甚至连安装服务器、启动Flash 工具、生成FLV文件、进入流游戏都不是简单的事情。没有办法,同时又不知道该怎样。
以下就是Flash Media Server3.5的迷人之处:你现在要做的事情。
为了理解我正在做什么,你必须清楚的认识到Flash Media Server3.5采用的是客户端-服务器架构,Adobe Flash扮演着客户端的角色,同时FMS扮演了服务器端的角色。为了正确的工作,你必须略微重新思考你的工作流程。视频文件不再是存放在你的web服务器中某个文件夹中,取而代之的是将其放在FMS服务器上,仍然使用熟悉的渐进式下载模式。
FMS服务器上文件夹通常被认作“程序”;而存放媒体文件的文件夹呗成为“实例”。看起来有点像这个:rtmp://server/Application/Instance.(RTMP路径随后将被使用)。
这个概念阻拦了一大批决定进入FLash Media Server流游戏的人,一开始我甚至也被它困住了。
为了继续前行,你同时必须具备服务器端ActionScript脚本语言的基础知识。ActionScript的长度取决于项目的复杂度,有时只有一行代码有时却需要上百行。
FMS的最新版本标志了标准操作的一项重大突破。如果你想编写成千上百行的代码,你将会非常喜欢Flash Media Interative Server3.5,但如果你和我一样仅仅是想让视频播放,那么Flash Media Streaming Server3.5就很适合你,它所提供的视频点播服务可以说是为你量身定做的。
现在就让我们开始吧
1.下载此文中所用到的文件。其中的FlV文件是一个搞影视创作的学生在的大学创作的。地址为http://download.macromedia.com/pub/developer/beginner_vod.zip
2.定位到C:\Program Files\Adobe\Flash Media Server 3.5\applications.在这个文件夹内会发现一个名字叫做vod的文件夹。打开它
3.从下载的文件中复制Legend.flv文件到子文件夹中。
4.关闭打开的窗口。


图画1:例子视频文件放到media文件夹中
Flash Media Server3.5所具备视频点播能力,揭示了vod文件夹的用处。视频点播服务允许你在不写任何代码和配置服务器的情况下,通过服务器实现对音频和视频的流式处理。你需要做的仅仅是将Flash的FLVPlayback组件或Flash视频对象指向此文件夹中的文件。所有的MP4、FLv、Mp3文件都可以顺利播放。
创建一个视频点播流程序
现在视频已经放置到正确的位置了,接下来让我们通过在流服务器上通过使用视频点播服务实现本地视频播放:
1.在Flash cs4 专业版创作环境中,选择文件>新建>Flash文件(ActionScript3.0)创建一个新的文件。打开文件后,从组件面板拖动一个FLVPlayback组件副本到舞台上。
2.保存此Flash文件到任意的文件夹。
3.单击舞台上的组件,点击属性面板(Flash cs3)或打开组件检查器(Flash Cs4)进行如下设置:

  • align: center
  • autoPlay: true
  • cuePoints: None
  • isLive: False
  • preview: None
  • scaleMode: maintainAspectRatio
  • skin: SkinUnderAllNoFullNoCaption.swf
  • skinAuthoHide: false
  • skinBackgroundAlpha: 1.00
  • skinBackgroundColor: #009933
4.双击源文件 参数,在打开的内容路径对话框中输入rtmp://localhost/vod/Legend(如图2所示)

图2:采用RTMP地址的视频文件路径

这个地址就是FLV文件的路径,同时遵循我刚才提到的rtmp://server/Application/Instance语法格式。在这个例子中,localhost匹配server,vod对应application,media文件夹总的legend.flv就是instance.
注意:关于如何设置FMS为localhost在初学者指南之安装Flash Media Server3.5章节中已讨论过。
5.保存并测试影片。如果一切正常的话,视频就会开始播放(见图3)。

图3:欢迎来到Flash Media Server3.5!
流式处理多种文件格式:
Flash Media Server3.5并不仅限于Flv格式的文件,脱离了vod文件夹还可以处理MPEG-4和MPEG-3格式的文件。如果打算使用这两种格式,内容路径将会不同,因为vod文件夹并不不支持这两种格式。
假设现在你有一个MPEG-4和MPEG-3格式的Legend文件,同时文件分别被命名为Legend.mp4和Legend.mp3,并且已经将他们放置到vod文件夹中。
为了访问MPEG-3文件,使用一下文件路径:
rtmp://localhost/vod/mp3:Legend
注意/vod后发生了改变,一样,你并不需要在文件名后追加mp3扩展名。
当流处理MPEG-4文件时有点不同。正如图4 所示,文件路径应当如此:
rtmp://localhost/vod/mp4:Legend.mp4
注意这次必须包含文件扩展名(.mp4).对于其他采用H.264标准的文件格式例如MOV文件同样适用。


图4:设置MPEG-4文件的路径
如下总结了不同的语法格式:

  • FLV: rtmp://domain/app/streamname (不加.flv后缀)
  • MPEG-3: rtmp://domain/app/mp3:streamname (不加.mp3后缀)
  • MPEG-4: rtmp://domain/app/mp4:streamname.mp4 (任何兼容MPEG-4的文件都采用此后缀: .mov, .avi, .mp4, 等.)
当然,一切都很好,但问题是如何在实时FMS3.5 服务器上播放视频呢?
只要对代码做略微改动就是答案。用Flash Media Server托管服务提供商提供的RTMP地址和您的业务替换掉localhost。很自然你需要将视频上传到你在托管服务提供商的服务器里的账户中,除了地址改变和上传之外,你不需要做任何其他更多的事情。
注意:谨记不存在两个被同等创建的Flash Media Server托管服务提供商,正如在顾客指南之使用Flash Media Server托管服务提供商中人们所指出的那样。你的RTMP地址和工作流程可能稍许不同,因此最好在刚开始就检查一下你的托管服务提供商。
FMS的一个不需要动画、不需要编码的方法
这是Flash Media Server3.5的一项全新的技术,应当受到任何开发者的关注,只要他不是生活在纯HTML和CSS的世界里。如果你经常告诫自己没有事件去学习动画,那么现在就是你的时间了。你所需要的仅仅是Adobe Dreamweaver(CS3或CS4)。如果你是纯文本编辑器如记事本才是标准的代码编写工具,那么随你便。
当安装好Flash Media Server3.5后,运行Apache2.2的HTTP服务器也被安装了。如果打开webroot文件夹(C:\Program Files\Adobe\Flash Media Server 3.5\webroot)你就会发现这也是一个vod文件夹。让我们使用这个文件夹实现在开始页面的视频播放器中播放一个视频:
1.启动开始页面(见图5)。打开后,将会看到视频播放器以及一个文本框。单击文本框并且同时按下contrl和A键选择文本框中所有的HTML代码。将选择的文本复制到剪贴板中。

图5:将会用到的视频播放器(左侧)和如何使用的代码(右侧)
另一种方法:定位到Flash Media Server3.5文件夹中的sampels文件夹,打开videoPlayer文件夹然后双击文件夹中的videoPlayer.html。然后复制页面底部的代码,关于这一点在下一章节将会进行深入讲解。
2.启动Dreamweaver CS3或CS4。创建一个新的页面并保存到FMS3.5的webroot文件夹中(C:\Program Files\Adobe\Flash Media Server 3.5\webroot)
3.点击页面,然后选择插入>媒体>SWF(Dreamweaver CS4)或插入>媒体>Flash(Dreamweaver CS3)。
4.定位到swfs文件夹(C:\Program Files\Adobe\Flash Media Server 3.5\webroot\swfs),将videoPlayer.swf文件插入到Dreamweaver网页中。
5.打开代码视图面板,选择<object></object>标签之间的所有文本,包括这两个标签。
6.粘贴代码,单击属性检查器上的刷新按钮。
7.返回设计视图,在浏览器中测试页面,或者按F12快捷键或者选择文件>在浏览器中预览.现在你就正在通过Flash Media Server3.5对视频进行流式处理,而唯一的技巧即时你需要知道如何在一个Dreamweaver页面上放置SWF文件。(见图6)

图6:使用Flash Media Player3.5中的videoPlayerSWF
接下来将会学习如何使用ActionScript3.0流式处理vod文件夹里的H.264视频,以及来自应用程序的相同视频。

posted @ 2009-05-15 16:14  Andy  阅读(1126)  评论(0编辑  收藏  举报