BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

Flash Media Server 4.5入门 – 第5部分:使用OSMF播放器进行流式传输

| 作者 Joseph Labrecque 关注 0 他的粉丝 , Tom Green 关注 0 他的粉丝 发布于 2011年11月2日. 估计阅读时间: 13 分钟 | Google、Facebook、Pinterest、阿里、腾讯 等顶尖技术团队的上百个可供参考的架构实例!

目录

需求

预备知识

最好拥有使用Flash Media Server的一定经验。拥有Web设计概念和使用HTML在线播放Flash视频的知识会有所帮助。

用户水平

初级

需要的产品

示例文件

本文是我们关于使用Adobe Flash Media Server 4.5的入门级教程系列中的第五部分。在此教程中,您将学习如何使用Flash Media Server 4.5(可通过开源媒体框架(OSMF)获得)通过Strobe Media Playback播放器流式传输视频。

以下是本系列中的所有文章(文章发布后链接就会激活):

理解开源媒体框架

以前,您需要使用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中所示。
  3. 图1. Flash Media Server 4.5的安装包含一个Strobe Media组件。

  4. 将Stream URL路径更改为rtmp://localhost/vod/mp4:Vultures.mp4。单击Play Stream按钮播放Vultures视频。

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

  1. 向下滚动到Sample Video页面底部。找到Embed Code区域,如图2中所示。
  2. 图2. 复制嵌入式代码以将播放器添加到一个HTML文档中(单击放大)。

  3. 选择Embed Code字段中的所有代码并将它复制到剪贴板。
  4. 打开Dreamweaver CS5.5或任何其他HTML编辑器。创建一个新HTML文档并将代码粘贴到<body></body>标记之间。
  5. 将文件保存为test.html并退出Dreamweaver(或您使用的HTML编辑器)。
  6. 警告:在第4步中,您将文件命名为test.html,而不是index.html,因为Flash Media Server启动屏幕是webroot文件夹中的index.html文件。如果您将一个名为index.html的文件保存到webroot文件夹中,您创建的新文件将覆盖启动屏幕。

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

图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)。
  5. 图5. 粘贴嵌入式代码以将视频添加到HTML页面中(单击放大)。

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

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

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

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

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

图6. 检查代码的最终版本,然后保存HTML页面(单击放大)。

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

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

延伸阅读

在本教程中,您学习了在Flash Media Server 4.5项目中使用OSMF和Strobe Media Playback的基本知识。要了解构建FMS应用程序来播放流视频文件的更多信息,请查阅以下由David Hassoun和John Crosby编写的文章:

在下一个教程中,您将看到使用HTTP Dynamic Streaming对视频进行流式传输的过程。

clip_image013+clip_image014

本作品依据Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License授权。超出本许可证范围,与本作品中包含的代码示例相关的权限可在Adobe上获得。

查看原文:Beginning Flash Media Server 4.5 – Part 5: Streaming with OSMF players

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我
社区评论

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT