Flash Media Server 4.5 (fms4.5)教程五:OSMF播放器流媒体

迅恒数据中心

以前,您需要使用FLVPlayback组件通过Flash Media Server 4.5流式传输视频。尽管FLVPlayback组件易于使用,但该组件会创建一个相对较大的SWF文件(大约52KB)。为了减少总文件大小,许多开发人员使用该组件的精减版本来创建特殊的视频播放器,编写自定义ActionScript函数来使他们的播放器更有效地工作。结果,发布了大量份非常复杂或基本的视频播放器——沮丧的开发人员花在尝试使播放器工作上的时间比将精力集中在用户体验上的时间更多。

这一情况在两年前Adobe引入开源媒体框架和Strobe Media Playback组件时就已改变。词语开源表示,您可以访问Flash和ActionScript源文件和并自定义代码来构建您自己的视频播放器。当使用OSMF时,用于视频播放器的SWF文件托管在您自己的HTML服务器上,所以它很容易跟踪和更新。此外,OSMF项目正在开发中,可以确保它得以继续更新以利用Adobe Flash Player中的最新功能。

Strobe Media Playback非常容易使用。您可以通过将嵌入式代码添加到网页中来添加视频内容——通过Flash Media Server 4.5或HTTP流式传输。无需ActionScript编程。

或许只有在媒体流式传输上,Flash Media Server 4.5和Strobe Media Playback的组合才是一种动态的成功组合。下一节将展示这个组合如何工作。

使用Strobe Media Playback组件

当安装Flash Media Server 4.5时,您也会安装一个Strobe播放器。要使用它,请执行以下步骤:

  1. 下载本教程开头提供的示例文件。解压ZIP文件并将Vultures.mp4文件从Video文件夹拖到Flash Media Server 4.5/webroot/vod文件夹。
  2. 导航到Flash Media Server 4.5/samples/videoPlayer并在浏览器中打开videoplayer.html文件。示例视频播放器将会启动,如图1中所示。

flash  Flash Media Server 4.5入门 第五部分:OSMF播放器流媒体

图1. Flash Media Server 4.5的安装包含一个Strobe Media组件。
  1. 将Stream URL路径更改为rtmp://localhost/vod/mp4:Vultures.mp4。单击Play Stream按钮播放Vultures视频。

执行以下步骤,在网页中通过Strobe Media Player播放该视频:

  1. 向下滚动到Sample Video页面底部。找到Embed Code区域,如图2中所示。
flash  Flash Media Server 4.5入门 第五部分:OSMF播放器流媒体
图2. 复制嵌入式代码以将播放器添加到一个HTML文档中(单击放大)。
    1. 选择Embed Code字段中的所有代码并将它复制到剪贴板。
    2. 打开Dreamweaver CS5.5或任何其他HTML编辑器。创建一个新HTML文档并将代码粘贴到<body></body>标记之间。
    3. 将文件保存为test.html并退出Dreamweaver(或您使用的HTML编辑器)。

警告:在第4步中,您将文件命名为test.html,而不是index.html,因为Flash Media Server启动屏幕是webroot文件夹中的index.html文件。如果您将一个名为index.html的文件保存到webroot文件夹中,您创建的新文件将覆盖启动屏幕。

  1. 导航到Flash Media Server 4.5/webroot文件夹并将HTML文件复制到该文件夹中。在浏览器中打开该文件,观看通过Strobe Media Player播放的视频(参见图3)。

flash  Flash Media Server 4.5入门 第五部分:OSMF播放器流媒体

图3. 测试视频在浏览器中播放。

构建Strobe Media Playback应用程序

现在您已知道如何使用Strobe功能,让我们看看它的一个更加实用的用途。在本节中,您将学习如何创建一个应用程序,它使用一个位于您网站中的Strobe Media Player副本,而不是位于安装在您计算机上的服务器中。

前面已经提到,Flash Media Server应用程序始终存在于自己的文件夹中。在本例中,您将创建一个新应用程序。此练习与“真实情景”之间的主要区别在于,您的RTMP路径将指向一个真实的Flash Media Server,而不是此练习中使用的webroot文件夹。

首先为FMS准备项目。打开示例文件中的Exercise文件夹,找到名为StrobemediaPlayback1.5.1-full的文件夹并打开它。

该文件夹包含从SourceForge网站下载的Strobe Media Playback的一个未压缩版本。您将使用名为Flash Player 10.1的文件夹。尽管有许多文件,如图4中所示,但本练习仅需要以下3个文件:

  • StrobeMediaPlayback.swf
  • Expressinstall.swf
  • Swfobject.js found in the lib folder
  • lib文件夹中的Swfobject.js

flash  Flash Media Server 4.5入门 第五部分:OSMF播放器流媒体

图4. Strobe Playback Player文件。

打开位于Exercise文件夹中的Strobe文件夹。将这些文件复制并粘贴到文件夹中的以下位置:

  • StrobeMediaPlayback.swf的一个副本粘贴到swfs文件夹中
  • 将expressinstall.swf的一个副本粘贴到Scripts文件夹中
  • 将swfobject.js的一个副本粘贴到Scripts文件夹中

找到这些文件的副本之后,将Strobe文件夹拖到Flash Media Server 4.5/webroot文件夹。

设置完成后,您就可以流式传输您在上一个练习中播放的Vultures.mp4文件了:

  1. 在浏览器中打开videoplayer.html文件。将视频更改为Vultures.mp4,向下滚动并将嵌入式代码复制到剪贴板。
  2. 启动Dreamweaver CS5.5并打开Strobe文件夹中的index.html文件。
  3. 在Document工具栏中,单击Code按钮显示Document窗口的代码视图(如果它还未打开)。
  4. 在第19行中单击一次并将剪贴板的内容粘贴到代码中(参见图5)。
flash  Flash Media Server 4.5入门 第五部分:OSMF播放器流媒体
图5. 粘贴嵌入式代码以将视频添加到HTML页面中(单击放大)。

接下来,您对代码进行一些更改,将它指向Strobe文件夹。您还将更新尺寸以在全屏下播放视频:854 x 480像素。

  1. 找到代码中的第19行。将宽度值更改为854,将高度值更改为480854 x 480,将ID和名称值更改为Strobe。
  2. <embed></embed>标记之间进行相同的更改。
  3. 在第24行末尾单击一次并按下Return/Enter键。添加以下代码:
<param name="allowscriptaccess" value="always">

将相同的代码添加到name="Strobe"设置后的<embed>代码中。

注意AllowScriptAccess属性是<object><embed>标记的一个HTML属性,用于嵌入一个SWF文件。它通过控制SWF文件调用周围的HTML文件中的JavaScript代码的能力,保护一个HTML文件免受可能不受信任的SWF文件访问。AllowScriptAccess有3个可能值:alwayssameDomainnever。在第7步中设置的always值启用JavaScript访问。尽管在技术上不是必需的,但我们认为将这行代码添加到<object><embed>标记中通常是一种好的做法。

您的代码应该类似于图6。如果类似,则保存更改并退出Dreamweaver。

flash  Flash Media Server 4.5入门 第五部分:OSMF播放器流媒体
图6. 检查代码的最终版本,然后保存HTML页面(单击放大)。

将Strobe文件夹移动到Flash Media Server 4.5/webroot文件夹。双击您刚创建的index.html文件。该页面将打开,视频将播放,并且您将体验捕猎幼兀鹰的过程(参见图7)。

flash  Flash Media Server 4.5入门 第五部分:OSMF播放器流媒体

图7. 视频使用您的Strobe Media Player副本播放。

分类:IDC资讯 百度收录 必应收录