目录
需求
预备知识
最好拥有使用 Flash Media Server 的一定经验。拥有 Web 设计概念和使用 HTML 在线播放 Flash 视频的知识会有所帮助。
用户水平
初级
需要的产品
示例文件
本文是我们关于使用 Adobe Flash Media Server 4.5 的入门级教程系列中的第五部分。在此教程中，您将学习如何使用 Flash Media Server 4.5（可通过开源媒体框架（OSMF）获得）通过 Strobe Media Playback 播放器流式传输视频。
- 第 1 部分：安装 Flash Media Server 4.5
- 第 2 部分：RTMP 流式传输点播视频
- 第 3 部分：RTMP 流式传输实况视频
- 第 4 部分：RTMP 流式传输音频
- 第 5 部分：使用 OSMF 播放器进行流式传输
- 第 6 部分：使用 HTTP Dynamic Streaming（即将发布）
- 第 7 部分：流式传输到 iOS 设备（即将发布）
- 第 8 部分：流式传输到 Android 设备（即将发布）
- 第 9 部分：安全功能（即将发布）
理解开源媒体框架
以前，您需要使用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 播放器。要使用它，请执行以下步骤：
- 下载本教程开头提供的示例文件。解压 ZIP 文件并将 Vultures.mp4 文件从 Video 文件夹拖到 Flash Media Server 4.5/webroot/vod 文件夹。
- 导航到 Flash Media Server 4.5/samples/videoPlayer 并在浏览器中打开 videoplayer.html 文件。示例视频播放器将会启动，如图 1 中所示。
图 1. Flash Media Server 4.5 的安装包含一个 Strobe Media 组件。
执行以下步骤，在网页中通过 Strobe Media Player 播放该视频：
- 向下滚动到 Sample Video 页面底部。找到 Embed Code 区域，如图 2 中所示。
图 2. 复制嵌入式代码以将播放器添加到一个 HTML 文档中（单击放大）。
-
打开 Dreamweaver CS5.5 或任何其他 HTML 编辑器。创建一个新 HTML 文档并将代码粘贴到
<body></body>``标记之间。 -
将文件保存为test.html并退出 Dreamweaver（或您使用的 HTML 编辑器）。
警告：在第 4 步中，您将文件命名为 test.html，而不是 index.html，因为 Flash Media Server 启动屏幕是 webroot 文件夹中的 index.html 文件。如果您将一个名为 index.html 的文件保存到 webroot 文件夹中，您创建的新文件将覆盖启动屏幕。 -
导航到 Flash Media Server 4.5/webroot 文件夹并将 HTML 文件复制到该文件夹中。在浏览器中打开该文件，观看通过 Strobe Media Player 播放的视频（参见图 3）。
图 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 文件了：
- 在浏览器中打开 videoplayer.html 文件。将视频更改为 Vultures.mp4，向下滚动并将嵌入式代码复制到剪贴板。
- 启动 Dreamweaver CS5.5 并打开 Strobe 文件夹中的 index.html 文件。
- 在 Document 工具栏中，单击 Code 按钮显示 Document 窗口的代码视图（如果它还未打开）。
- 在第 19 行中单击一次并将剪贴板的内容粘贴到代码中（参见图 5）。
图 5. 粘贴嵌入式代码以将视频添加到 HTML 页面中（单击放大）。
接下来，您对代码进行一些更改，将它指向 Strobe 文件夹。您还将更新尺寸以在全屏下播放视频：854 x 480 像素。
- 找到代码中的第 19 行。将宽度值更改为854，将高度值更改为480854 x 480，将 ID 和名称值更改为Strobe。
- 在
- 在第 24 行末尾单击一次并按下 Return/Enter 键。添加以下代码：
<param name="allowscriptaccess" value="always">
将相同的代码添加到 name="Strobe"设置后的
注意：AllowScriptAccess属性是<object>``和 <embed> 标记的一个HTML 属性，用于嵌入一个 SWF 文件。它通过控制 SWF 文件调用周围的 HTML 文件中的 JavaScript 代码的能力，保护一个 HTML 文件免受可能不受信任的 SWF 文件访问。AllowScriptAccess有 3 个可能值：always``、sameDomain 和 never。在第7 步中设置的always``值启用JavaScript 访问。尽管在技术上不是必需的，但我们认为将这行代码添加到<object>和
您的代码应该类似于图 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 编写的文章：
- 使用 OSMF 进行实时多播流式传输
- 使用 OSMF 创建简单的多播视频播放器
- RealEyes OSMF 播放器示例 – 第 1 部分：设置和部署
- RealEyes OSMF 播放器示例 – 第 2 部分：构建和配置
- RealEyes OSMF 播放器示例 – 第 3 部分：皮肤和控制栏系统
在下一个教程中，您将看到使用 HTTP Dynamic Streaming 对视频进行流式传输的过程。
本作品依据 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 授权。超出本许可证范围，与本作品中包含的代码示例相关的权限可在 Adobe 上获得。
查看原文： Beginning Flash Media Server 4.5 – Part 5: Streaming with OSMF players
分布式云行业实践指南（2023）
业内首个分布式云行业实践方法论、工具箱。
评论