如何使用适用于 Adobe Open Source Media Framework 的 Microsoft 平滑流式处理插件How to Use the Microsoft Smooth Streaming Plugin for the Adobe Open Source Media Framework

概述Overview

适用于 Open Source Media Framework 2.0 (SS for OSMF) 的 Microsoft 平滑流式处理插件扩展了 OSMF 的默认功能,并在新的和现有的 OSMF 播放器中添加了 Microsoft 平滑流式处理内容播放功能。The Microsoft Smooth Streaming plugin for Open Source Media Framework 2.0 (SS for OSMF) extends the default capabilities of OSMF and adds Microsoft Smooth Streaming content playback to new and existing OSMF players. 该插件还为 Strobe Media Playback (SMP) 添加了平滑流式处理播放功能。The plugin also adds Smooth Streaming playback capabilities to Strobe Media Playback (SMP).

SS for OSMF 包括两个版本的插件:SS for OSMF includes two versions of plugin:

  • 适用于 OSMF 的静态平滑流式处理插件 (.swc)Static Smooth Streaming plugin for OSMF (.swc)
  • 适用于 OSMF 的动态平滑流式处理插件 (.swf)Dynamic Smooth Streaming plugin for OSMF (.swf)

本文档假设读者具有 OSMF 和 OSMF 插件方面的一般实践知识。有关 OSMF 的详细信息,请参阅 OSMF 官方网站上的文档。This document assumes that the reader has a general working knowledge of OSMF and OSMF plug-ins. For more information about OSMF, please see the documentation on the official OSMF site.

适用于 OSMF 2.0 的平滑流式处理插件Smooth Streaming plugin for OSMF 2.0

该插件支持通过以下功能加载和播放按需平滑流式处理内容:The plugin supports loading and playback of on-demand Smooth Streaming content with the following features:

  • 按需平滑流式处理播放(播放、暂停、定位、停止)On-demand Smooth Streaming playback (Play, Pause, Seek, Stop)
  • 实时平滑流式处理播放(播放)Live Smooth Streaming playback (Play)
  • 实时 DVR 功能(暂停、定位、DVR 播放、现场直播)Live DVR functions (Pause, Seek, DVR Playback, Go-to-Live)
  • 支持视频编解码器 - H.264Support for video codecs - H.264
  • 支持音频编解码器 - AACSupport for Audio codecs - AAC
  • 通过 OSMF 内置 API 切换多种音频语言Multiple audio language switching with OSMF built-in APIs
  • 通过 OSMF 内置 API 选择最佳播放质量Max playback quality selection with OSMF built-in APIs
  • 通过 OSMF 字幕插件实现 Sidecar 隐藏字幕Sidecar closed captions with OSMF captions plugin
  • Adobe® Flash® Player 11.4 或更高版本。Adobe® Flash® Player 11.4 or higher.
  • 此版本仅支持 OSMF 2.0。This version only supports OSMF 2.0.

支持的功能和已知问题Supported features and known issues

有关支持的功能、不支持的功能和已知问题的完整列表,请参阅 本文档For a full list of supported features, unsupported features and known issues, refer to this document.

加载插件Loading the Plugin

可静态(在编译时)或动态(在运行时)加载 OSMF 插件。OSMF plugins can be loaded statically (at compile time) or dynamically (at run-time). 适用于 OSMF 的平滑流式处理插件的下载内容包括动态和静态版本。The Smooth Streaming plugin for OSMF download includes both dynamic and static versions.

  • 静态加载:若要以静态方式加载,必须有一个静态库 (SWC) 文件。Static loading: To load statically, a static library (SWC) file is required. 静态插件会添加为对项目的引用,并在编译时合并到最终输出文件中。Static plugins are added as a reference to the projects and merge inside the final output file at the compile time.
  • 动态加载:若要以动态方式加载,必须有一个预编译的 (SWF) 文件。Dynamic loading: To load dynamically, a precompiled (SWF) file is required. 动态插件在运行时中加载,不包含在项目输出中。Dynamic plugins are loaded in the runtime and not included in the project output. (编译的输出)可以使用 HTTP 和 FILE 协议加载动态插件。(Compiled output) Dynamic plugins can be loaded using HTTP and FILE protocols.

有关静态和动态加载的详细信息,请参阅官方的 OSMF 插件页For more information on static and dynamic loading, see the official OSMF plugin page.

SS for OSMF 静态加载SS for OSMF Static Loading

以下代码段演示如何静态加载 SS for OSMF 插件以及如何使用 OSMF MediaFactory 类播放基本视频。The code snippet below shows how to load the SS plugin for OSMF statically and play a basic video using OSMF MediaFactory class. 在包含 SS for OSMF 代码之前,请确保项目引用包含“MSAdaptiveStreamingPlugin-v1.0.3-osmf2.0.swc”静态插件。Before including the SS for OSMF code, please ensure that the project reference includes the "MSAdaptiveStreamingPlugin-v1.0.3-osmf2.0.swc" static plugin.

package 
{

    import com.microsoft.azure.media.AdaptiveStreamingPluginInfo;

    import flash.display.*;
    import org.osmf.media.*;
    import org.osmf.containers.MediaContainer;
    import org.osmf.events.MediaErrorEvent;
    import org.osmf.events.MediaFactoryEvent;
    import org.osmf.events.MediaPlayerStateChangeEvent;
    import org.osmf.layout.*;



    [SWF(width="1024", height="768", backgroundColor='#405050', frameRate="25")]
    public class TestPlayer extends Sprite
    {        
        public var _container:MediaContainer;
        public var _mediaFactory:DefaultMediaFactory;
        private var _mediaPlayerSprite:MediaPlayerSprite;


        public function TestPlayer( )
        {
            stage.quality = StageQuality.HIGH;

            initMediaPlayer();

        }

        private function initMediaPlayer():void
        {

            // Create the container (sprite) for managing display and layout
            _mediaPlayerSprite = new MediaPlayerSprite();    
            _mediaPlayerSprite.addEventListener(MediaErrorEvent.MEDIA_ERROR, onPlayerFailed);
            _mediaPlayerSprite.addEventListener(MediaPlayerStateChangeEvent.MEDIA_PLAYER_STATE_CHANGE, onPlayerStateChange);
            _mediaPlayerSprite.scaleMode = ScaleMode.NONE;
            _mediaPlayerSprite.width = stage.stageWidth;
            _mediaPlayerSprite.height = stage.stageHeight;
            //Adds the container to the stage
            addChild(_mediaPlayerSprite);

            // Create a mediafactory instance
            _mediaFactory = new DefaultMediaFactory();

            // Add the listeners for PLUGIN_LOADING
            _mediaFactory.addEventListener(MediaFactoryEvent.PLUGIN_LOAD,onPluginLoaded);
            _mediaFactory.addEventListener(MediaFactoryEvent.PLUGIN_LOAD_ERROR, onPluginLoadFailed );

            // Load the plugin class 
            loadAdaptiveStreamingPlugin( );  

        }

        private function loadAdaptiveStreamingPlugin( ):void
        {
            var pluginResource:MediaResourceBase;

            pluginResource = new PluginInfoResource(new AdaptiveStreamingPluginInfo( )); 
            _mediaFactory.loadPlugin( pluginResource ); 
        }

        private function onPluginLoaded( event:MediaFactoryEvent ):void
        {
            // The plugin is loaded successfully.
            // Your web server needs to host a valid crossdomain.xml file to allow plugin to download Smooth Streaming files.
        loadMediaSource("http://devplatem.vo.msecnd.net/Sintel/Sintel_H264.ism/manifest")

        }

        private function onPluginLoadFailed( event:MediaFactoryEvent ):void
        {
            // The plugin is failed to load ...
        }


        private function onPlayerStateChange(event:MediaPlayerStateChangeEvent) : void
        {
            var state:String;

            state =  event.state;

            switch (state)
            {
                case MediaPlayerState.LOADING: 

                    // A new source is started to load.

                    break;

                case  MediaPlayerState.READY :   
                    // Add code to deal with Player Ready when it is hit the first load after a source is loaded. 

                    break;

                case MediaPlayerState.BUFFERING :

                    break;

                case  MediaPlayerState.PAUSED :
                    break;      
                // other states ...          
            }
        }

        private function onPlayerFailed(event:MediaErrorEvent) : void
        {
            // Media Player is failed .           
        }

        private function loadMediaSource(sourceURL : String):void 
        {
            // Take an URL of SmoothStreamingSource's manifest and add it to the page.

            var resource:URLResource= new URLResource( sourceURL );

            var element:MediaElement = _mediaFactory.createMediaElement( resource );
            _mediaPlayerSprite.scaleMode = ScaleMode.LETTERBOX;
            _mediaPlayerSprite.width = stage.stageWidth;
            _mediaPlayerSprite.height = stage.stageHeight;

            // Add the media element
            _mediaPlayerSprite.media = element;
        }     

    }
}

SS for OSMF 动态加载SS for OSMF Dynamic Loading

以下代码段演示如何动态加载 SS for OSMF 插件以及如何使用 OSMF MediaFactory 类播放基本视频。The code snippet below shows how to load the SS plugin for OSMF dynamically and play a basic video using the OSMF MediaFactory class. 在包含 SS for OSMF 代码之前,如果要使用 FILE 协议进行加载,请将“MSAdaptiveStreamingPlugin-v1.0.3-osmf2.0.swf”动态插件复制到项目文件夹;如果要进行 HTTP 加载,请将该插件复制到 Web 服务器下。Before including the SS for OSMF code, copy the "MSAdaptiveStreamingPlugin-v1.0.3-osmf2.0.swf" dynamic plugin to the project folder if you want to load using FILE protocol, or copy under a web server for HTTP load. 不需要在项目引用中包含“MSAdaptiveStreamingPlugin-v1.0.3-osmf2.0.swc”。There is no need to include "MSAdaptiveStreamingPlugin-v1.0.3-osmf2.0.swc" in the project references.

package 
{

    import flash.display.*;
    import org.osmf.media.*;
    import org.osmf.containers.MediaContainer;
    import org.osmf.events.MediaErrorEvent;
    import org.osmf.events.MediaFactoryEvent;
    import org.osmf.events.MediaPlayerStateChangeEvent;
    import org.osmf.layout.*;
    import flash.events.Event;
    import flash.system.Capabilities;


    //Sets the size of the SWF

    [SWF(width="1024", height="768", backgroundColor='#405050', frameRate="25")]
    public class TestPlayer extends Sprite
    {        
        public var _container:MediaContainer;
        public var _mediaFactory:DefaultMediaFactory;
        private var _mediaPlayerSprite:MediaPlayerSprite;


        public function TestPlayer( )
        {
            stage.quality = StageQuality.HIGH;
            initMediaPlayer();
        }

        private function initMediaPlayer():void
        {

            // Create the container (sprite) for managing display and layout
            _mediaPlayerSprite = new MediaPlayerSprite();    
            _mediaPlayerSprite.addEventListener(MediaErrorEvent.MEDIA_ERROR, onPlayerFailed);
            _mediaPlayerSprite.addEventListener(MediaPlayerStateChangeEvent.MEDIA_PLAYER_STATE_CHANGE, onPlayerStateChange);

            //Adds the container to the stage
            addChild(_mediaPlayerSprite);

            // Create a mediafactory instance
            _mediaFactory = new DefaultMediaFactory();

            // Add the listeners for PLUGIN_LOADING
            _mediaFactory.addEventListener(MediaFactoryEvent.PLUGIN_LOAD,onPluginLoaded);
            _mediaFactory.addEventListener(MediaFactoryEvent.PLUGIN_LOAD_ERROR, onPluginLoadFailed );

            // Load the plugin class 
            loadAdaptiveStreamingPlugin( );  

        }

        private function loadAdaptiveStreamingPlugin( ):void
        {
            var pluginResource:MediaResourceBase;
            var adaptiveStreamingPluginUrl:String;

            // Your dynamic plugin web server needs to host a valid crossdomain.xml file to allow loading plugins.

            adaptiveStreamingPluginUrl = "http://yourdomain/MSAdaptiveStreamingPlugin-v1.0.3-osmf2.0.swf";
            pluginResource = new URLResource(adaptiveStreamingPluginUrl);
            _mediaFactory.loadPlugin( pluginResource ); 

        }

        private function onPluginLoaded( event:MediaFactoryEvent ):void
        {
            // The plugin is loaded successfully.

            // Your web server needs to host a valid crossdomain.xml file to allow plugin to download Smooth Streaming files.

    loadMediaSource("http://devplatem.vo.msecnd.net/Sintel/Sintel_H264.ism/manifest")
        }

        private function onPluginLoadFailed( event:MediaFactoryEvent ):void
        {
            // The plugin is failed to load ...
        }


        private function onPlayerStateChange(event:MediaPlayerStateChangeEvent) : void
        {
            var state:String;

            state =  event.state;

            switch (state)
            {
                case MediaPlayerState.LOADING: 

                    // A new source is started to load.

                    break;

                case  MediaPlayerState.READY :   
                    // Add code to deal with Player Ready when it is hit the first load after a source is loaded. 

                    break;

                case MediaPlayerState.BUFFERING :

                    break;

                case  MediaPlayerState.PAUSED :
                    break;      
                // other states ...          
            }
        }

        private function onPlayerFailed(event:MediaErrorEvent) : void
        {
            // Media Player is failed .           
        }

        private function loadMediaSource(sourceURL : String):void 
        {
            // Take an URL of SmoothStreamingSource's manifest and add it to the page.

            var resource:URLResource= new URLResource( sourceURL );

            var element:MediaElement = _mediaFactory.createMediaElement( resource );
            _mediaPlayerSprite.scaleMode = ScaleMode.LETTERBOX;
            _mediaPlayerSprite.width = stage.stageWidth;
            _mediaPlayerSprite.height = stage.stageHeight;
            // Add the media element
            _mediaPlayerSprite.media = element;
        }     

    }
}

Strobe Media Playback 与 SS OSMF 动态插件Strobe Media Playback with the SS ODMF Dynamic Plugin

适用于 OSMF 的平滑流式处理动态插件与 Strobe Media Playback (SMP) 兼容。The Smooth Streaming for OSMF dynamic plugin is compatible with Strobe Media Playback (SMP). 可以使用 SS for OSMF 插件向 SMP 添加平滑流式处理内容播放功能。You can use the SS for OSMF plugin to add Smooth Streaming content playback to SMP. 为此,请在进行 HTTP 加载时,使用以下步骤将“MSAdaptiveStreamingPlugin-v1.0.3-osmf2.0.swf”复制到 Web 服务器下:To do this, copy "MSAdaptiveStreamingPlugin-v1.0.3-osmf2.0.swf" under a web server for HTTP load using the following steps:

  1. 浏览 Strobe Media Playback 设置页Browse the Strobe Media Playback setup page.

  2. 将 src 设置为某个平滑流式处理源(例如 http://devplatem.vo.msecnd.net/Sintel/Sintel_H264.ism/manifest)Set the src to a Smooth Streaming source, (e.g. http://devplatem.vo.msecnd.net/Sintel/Sintel_H264.ism/manifest)

  3. 进行所需的配置更改,并单击“Preview and Update”(预览并更新)。Make the desired configuration changes and click Preview and Update.

    注意 内容 Web 服务器需要有效的 crossdomain.xml。Note Your content web server needs a valid crossdomain.xml.

  4. 使用常用的文本编辑器将该代码复制并粘贴到一个简单的 HTML 页,如以下示例所示:Copy and paste the code to a simple HTML page using your favorite text editor, such as in the following example:

    <html>
    <body>
    <object width="920" height="640"> 
    <param name="movie" value="http://osmf.org/dev/2.0gm/StrobeMediaPlayback.swf"></param>
    <param name="flashvars" value="src=http://devplatem.vo.msecnd.net/Sintel/Sintel_H264.ism/manifest &autoPlay=true"></param>
    <param name="allowFullScreen" value="true"></param>
    <param name="allowscriptaccess" value="always"></param>
    <param name="wmode" value="direct"></param>
    <embed src="http://osmf.org/dev/2.0gm/StrobeMediaPlayback.swf" 
        type="application/x-shockwave-flash" 
        allowscriptaccess="always" 
        allowfullscreen="true" 
        wmode="direct" 
        width="920" 
        height="640" 
        flashvars=" src=http://devplatem.vo.msecnd.net/Sintel/Sintel_H264.ism/manifest&autoPlay=true">
    </embed>
    </object>
    </body>
    </html>
    
  5. 将平滑流式处理 OSMF 插件添加到 embed 代码中,然后保存。Add Smooth Streaming OSMF plugin to the embed code and save.

    <html>
    <object width="920" height="640"> 
    <param name="movie" value="http://osmf.org/dev/2.0gm/StrobeMediaPlayback.swf"></param>
    <param name="flashvars" value="src=http://devplatem.vo.msecnd.net/Sintel/Sintel_H264.ism/manifest&autoPlay=true&plugin_AdaptiveStreamingPlugin=http://yourdomain/MSAdaptiveStreamingPlugin-v1.0.3-osmf2.0.swf&AdaptiveStreamingPlugin_retryLive=true&AdaptiveStreamingPlugin_retryInterval=10"></param>
    <param name="allowFullScreen" value="true"></param>
    <param name="allowscriptaccess" value="always"></param>
    <param name="wmode" value="direct"></param>
    <embed src="http://osmf.org/dev/2.0gm/StrobeMediaPlayback.swf" 
        type="application/x-shockwave-flash" 
        allowscriptaccess="always" 
        allowfullscreen="true" 
        wmode="direct" 
        width="920" 
        height="640" 
        flashvars="src=http://devplatem.vo.msecnd.net/Sintel/Sintel_H264.ism/manifest&autoPlay=true&plugin_AdaptiveStreamingPlugin=http://yourdomain/MSAdaptiveStreamingPlugin-v1.0.3-osmf2.0.swf&AdaptiveStreamingPlugin_retryLive=true&AdaptiveStreamingPlugin_retryInterval=10">
    </embed>
    </object>
    </html>
    
  6. 保存 HTML 页,并发布到 Web 服务器。Save your HTML page and publish to a web server. 使用最常用的、已启用 Internet 浏览器(Internet Explorer、Chrome、Firefox 等)的 Flash® Player 浏览到已发布的网页。Browse to the published web page using your favorite Flash® Player enabled Internet browser (Internet Explorer, Chrome, Firefox, so on).

  7. 在 Adobe® Flash® Player 中欣赏平滑流式处理内容。Enjoy Smooth Streaming content inside Adobe® Flash® Player.

有关一般性 OSMF 开发的详细信息,请参阅官方的 OSMF 开发页For more information on general OSMF development, please see the official OSMF development page.

媒体服务学习路径Media Services learning paths

媒体服务 v3(最新版本)Media Services v3 (latest)

查看最新版本的 Azure 媒体服务!Check out the latest version of Azure Media Services!

媒体服务 v2(旧版)Media Services v2 (legacy)

另请参阅See Also

适用于 OSMF 的 Microsoft 自适应流式处理插件更新Microsoft Adaptive Streaming Plugin for OSMF Update