RealEyes OSMF Player Sample – Part 2: Building and configuration

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xml:lang="EN" xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head><script type="text/javascript" src="/_static/js/bundle-playback.js?v=HxkREWBo" charset="utf-8"></script> <script type="text/javascript" src="/_static/js/wombat.js?v=txqj7nKC" charset="utf-8"></script> <script>window.RufflePlayer=window.RufflePlayer||{};window.RufflePlayer.config={"autoplay":"on","unmuteOverlay":"hidden"};</script> <script type="text/javascript" src="/_static/js/ruffle/ruffle.js"></script> <script type="text/javascript"> __wm.init("https://web.archive.org/web"); __wm.wombat("http://www.adobe.com/devnet/flash/articles/reops_pt2.html","20120303042410","https://web.archive.org/","web","/_static/", "1330748650"); </script> <link rel="stylesheet" type="text/css" href="/_static/css/banner-styles.css?v=S1zqJCYt" /> <link rel="stylesheet" type="text/css" href="/_static/css/iconochive.css?v=3PDvdIFv" />  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="Content-Language" content="en"/> <meta http-equiv="Content-Style-Type" content="text/css"/> <meta http-equiv="Content-Script-Type" content="text/javascript"/> <meta http-equiv="Cache-Control" content="public"/> <title>RealEyes OSMF Player Sample – Part 2: Building and configuration | Adobe Developer Connection</title><meta name="robots" content="noodp"/> <meta name="keywords" content="OSMF,customization,templates,video"/> <meta name="description" content="Through the example of a simple video player, discover the architecture of the REOPS project and see how it uses the OSMF to provide power and flexible media player functionality."/><meta name="creationDate" content="2011-09-02 @ 09:51:09"/> <meta name="lastModifiedDate" content="2011-09-02 @ 09:51:09"/> <meta name="viewport" content="width=device-width"/> <meta name="area" content="devnet"/><link rel="icon" href="https://web.archive.org/web/20120303042410im_/http://wwwimages.adobe.com/www.adobe.com/include/img/favicon.ico" type="image/x-icon"/> <link rel="shortcut icon" href="https://web.archive.org/web/20120303042410im_/http://wwwimages.adobe.com/www.adobe.com/include/img/favicon.ico" type="image/x-icon"/> <script type="text/javascript"> function createNs ( ns ) { var o, a; a = ns.split("."); o = window[a[0]] = window[a[0]] || {}; for(i=1; i < a.length; i++) { o = o[a[i]] = o[a[i]] || {}; } return o; } createNs("Adobe.PageInfo"); createNs("Adobe.Tokens"); createNs("Adobe.UserInfo"); Adobe.PageInfo.AuthenticatedState = false; Adobe.PageInfo.localeCode = "en"; Adobe.PageInfo.accountPageName = ""; Adobe.PageInfo.productKey = ""; Adobe.PageInfo.catalogName = ""; Adobe.PageInfo.countryCode = "US"; Adobe.PageInfo.marketSegment = "COM"; Adobe.PageInfo.akamaiURLPrefix = "https://web.archive.org/web/20120303042410/http://wwwimages.adobe.com/www.adobe.com"; Adobe.PageInfo.pageLevel = "7"; </script> <link rel="stylesheet" href="https://web.archive.org/web/20120303042410cs_/http://wwwimages.adobe.com/www.adobe.com/include/style/adobe-light-compressed.css" type="text/css" media="screen"/> <link rel="stylesheet" type="text/css" media="screen,print" href="https://web.archive.org/web/20120303042410cs_/http://wwwimages.adobe.com/www.adobe.com/include/style/compressed.css"/> <script type="text/javascript" src="https://web.archive.org/web/20120303042410js_/http://wwwimages.adobe.com/www.adobe.com/include/script/compressed.js"></script> <script type="text/javascript" src="https://web.archive.org/web/20120303042410js_/http://wwwimages.adobe.com/www.adobe.com/uber/js/omniture/mbox.js"></script> <meta name="page" content="main"/> <meta name="shortTitle" content="RealEyes OSMF Player Sample – Part 2: Building and configuration"/> <meta name="blurb" content="Through the example of a simple video player, discover the architecture of the REOPS project and see how it uses the OSMF to provide power and flexible media player functionality."/> <meta name="author" content="David Hassoun, John Crosby"/> <meta name="dateCreated" content="22 Jun 2010"/> <meta name="dateModified" content="22 Jun 2010"/> <script type="text/javascript"> function createPanelToggle(triggerId, targetId, isOpen) { var element = $("#".concat(triggerId)); element.attr("tabindex", "0"); element.css("cursor", "default"); var target = $("#".concat(targetId)); var icon = element.find(".Icon:first"); var time = 0; // no animation time for initial display open(isOpen); // set initial display time = 140; // set animation time element.bind("click", click); //private function click(event) { open(!isOpen); } function out() { open(false); element.bind("mouseout", out); } function open(yes) { yes = Boolean(yes); if (yes) { target.slideDown(time, function() { isOpen = yes; icon.addClass("IconSmallerMinus"); icon.removeClass("IconSmallerAdd"); }); } else { target.slideUp(time, function() { isOpen = yes; icon.addClass("IconSmallerAdd"); icon.removeClass("IconSmallerMinus"); }); } } } </script> <script type="text/javascript" src="https://web.archive.org/web/20120303042410js_/http://community.adobe.com/help/badge/v4/ionLoader.js"></script> <script type="text/javascript" src="https://web.archive.org/web/20120303042410js_/http://community.adobe.com/help/badge/v4/ionSupport.js"></script> <script type="text/javascript" src="https://web.archive.org/web/20120303042410js_/http://community.adobe.com/help/badge/v4/ionBadge.js"></script> <script type="text/javascript" src="https://web.archive.org/web/20120303042410js_/http://wwwimages.adobe.com/www.adobe.com/include/script/Typekit.js"></script> <script type="text/javascript">try{Typekit.load();}catch(e){}</script>  <script type="text/javascript"> //<![CDATA[ var info = getCategoriesInfo(); $(window).bind("hashchange load", adobe.fn.focusHashElement); cart = new adobe.ui.CartFacade("cart-dialog", "cart-dialog-flash"); cart.setRequiredFlashVersion("9.0.115"); cart.setDefaultCountry(""); cart.setDomain(".adobe.com"); // set this to ".adobe.com" cart.setContextPath(""); // set this to empty when web context is '/' // Possibly add the .edu selector or override market segment Adobe.Product.Controller.CPod.EduController.processLocation(true); if(cart.isOverlaySupported()) { var PromoIDReport = new Array(); var prmid = window.location.search.match(/\bpromoid\=([^&#$]+)/); if(prmid) { prmid[1]=prmid[1].toUpperCase(); cart.setEmailTrackingId(prmid[1]); } // if a promo code is pass thru the URL, set the promo in the cart and the cookie prmid = window.location.search.match(/\bpromocode\=([^&#$]+)/) || null; if(prmid) { if (Adobe && Adobe.Cart && Adobe.Cart.Models && Adobe.Cart.Models.Cart) { var cart = Adobe.Cart.Models.Cart; var marketSegment = cart.getMarketSegment() || Adobe.Product.Controller.CPod.EduController.COM; cart.addPromotion({code:prmid[1], marketSegment:marketSegment}); cart.savePromoCode(prmid[1]); } } } //]]> </script> <script type="text/javascript"> var hash = location.hash; var deepLinkMap = new Object(); if(hash != null && hash != '') { $(document).ready(function() { var deepLink = deepLinkMap[hash]; if(deepLink != undefined && deepLink != '') { $('#' + deepLinkMap[hash] + ' a[name=' + deepLinkMap[hash] + ']').click(); } }); } </script> <link rel="canonical" href="https://web.archive.org/web/20120303042410/http://www.adobe.com/devnet/flash/articles/reops_pt2.html"/> <link rel="stylesheet" type="text/css" media="screen" href="/web/20120303042410cs_/http://www.adobe.com/etc/pagetables/reflowtypes/adobe_adc_article.css"/> <script type="text/javascript" src="/web/20120303042410js_/http://www.adobe.com/etc/pagetables/reflowtypes/adobe_adc_article.js"></script> </head> <body class="Text TextMedium Link"> <div class="ArticleGrid ArticleWideGrid LayoutSlimGrid LayoutCenter PanelDiffuseShadow PanelFillExtraLight LayoutP"> <div class="PrintLayoutHide"> <div class="sitenav"> <script type="text/javascript"> //<![CDATA[ $(document).ready(adobe.fn.initGlobalNav); //]]> </script>   <form id="globalnav-search" class="searchbuddy LayoutSlimHidden" name="globalnav-search" method="get" action="/web/20120303042410/http://www.adobe.com/go/gnav_search" accept-charset="utf-8"> <div id="SiteHeader" class="SiteHeader Text TextSmall"> <span id="globalnav"></span> <a href="/web/20120303042410/http://www.adobe.com/go/gnav_adobe_logo_en_us" id="shHome" class="SiteHeaderHome">Adobe</a> <div class="SiteHeaderBar" id="shBar"> <div class="SiteHeaderDropdownLink SiteHeaderBarItem SiteHeaderBarItemFirst" id="shProducts"> <a href="/web/20120303042410/http://www.adobe.com/go/gnav_products_en_us" id="shProductsLink" class="SiteHeaderBarLink">Products</a> <div class="SiteHeaderDropPanel" id="ProductsPanel"> <div class="SiteHeaderPanelRow SiteHeaderPanelLink" id="shProducts3"> <span class="SiteHeaderPanelHeader"><a href="/web/20120303042410/http://www.adobe.com/go/gnavtray_products_acrobat_en_us">Acrobat</a></span> </div> <div class="SiteHeaderPanelRow SiteHeaderPanelLink" id="shProducts1"> <span class="SiteHeaderPanelHeader"><a href="/web/20120303042410/http://www.adobe.com/go/gnavtray_products_creativesuite_en_us">Creative Suite</a></span> </div> <div class="SiteHeaderPanelRow SiteHeaderPanelLink" id="shProducts5"> <span class="SiteHeaderPanelHeader"><a href="/web/20120303042410/http://www.adobe.com/go/gnavtray_products_digitalmarketingsuite_en_us">Digital Marketing Suite</a></span> </div> <div class="SiteHeaderPanelRow SiteHeaderPanelLink" id="shProducts7"> <span class="SiteHeaderPanelHeader"><a href="/web/20120303042410/http://www.adobe.com/go/gnavtray_products_digitalpublishingsuite_en_us">Digital Publishing Suite</a></span> </div> <div class="SiteHeaderPanelRow SiteHeaderPanelLink" id="shProducts6"> <span class="SiteHeaderPanelHeader"><a href="/web/20120303042410/http://www.adobe.com/go/gnavtray_products_elements_en_us">Elements</a></span> </div> <div class="SiteHeaderPanelRow SiteHeaderPanelLink" id="shProducts2"> <span class="SiteHeaderPanelHeader"><a href="/web/20120303042410/http://www.adobe.com/go/gnavtray_products_photoshop_en_us">Photoshop</a></span> </div> <div class="SiteHeaderPanelRow SiteHeaderPanelLink" id="shProducts4"> <span class="SiteHeaderPanelHeader"><a href="/web/20120303042410/http://www.adobe.com/go/gnavtray_products_touchapps_en_us">Touch Apps</a></span> </div> <div class="SiteHeaderPanelRow SiteHeaderPanelLinkNoBar" id="shProducts8"> <a href="/web/20120303042410/http://www.adobe.com/go/gnavtray_products_moreproducts_en_us">More products</a> </div> </div> </div> <div class="SiteHeaderDropdownLink SiteHeaderBarItem SiteHeaderBarItemFirst" id="shSolutions"> <a href="/web/20120303042410/http://www.adobe.com/go/gnav_solutions_en_us" id="shSolutionsLink" class="SiteHeaderBarLink">Solutions</a> <div class="SiteHeaderDropPanel" id="SolutionsPanel"> <div class="SiteHeaderPanelRow SiteHeaderPanelLink" id="shSolutions5"> <span class="SiteHeaderPanelHeader"><a href="/web/20120303042410/http://www.adobe.com/go/gnavtray_solutions_digitalmarketing_en_us">Digital marketing</a></span> </div> <div class="SiteHeaderPanelRow SiteHeaderPanelLink" id="shSolutions1"> <span class="SiteHeaderPanelHeader"><a href="/web/20120303042410/http://www.adobe.com/go/gnavtray_solutions_digitalmedia_en_us">Digital media</a></span> </div> <div class="SiteHeaderPanelRow SiteHeaderPanelLink" id="shSolutions2"> <span class="SiteHeaderPanelHeader"><a href="/web/20120303042410/http://www.adobe.com/go/gnavtray_solutions_education_en_us">Education</a></span> </div> <div class="SiteHeaderPanelRow SiteHeaderPanelLink" id="shSolutions3"> <span class="SiteHeaderPanelHeader"><a href="/web/20120303042410/http://www.adobe.com/go/gnavtray_solutions_financialservices_en_us">Financial services</a></span> </div> <div class="SiteHeaderPanelRow SiteHeaderPanelLink" id="shSolutions4"> <span class="SiteHeaderPanelHeader"><a href="/web/20120303042410/http://www.adobe.com/go/gnavtray_solutions_government_en_us">Government</a></span> </div> <div class="SiteHeaderPanelRow SiteHeaderPanelLink" id="shSolutions7"> <span class="SiteHeaderPanelHeader"><a href="/web/20120303042410/http://www.adobe.com/go/gnavtray_solutions_wem_en_us">Web Experience Management</a></span> </div> <div class="SiteHeaderPanelRow SiteHeaderPanelLinkNoBar" id="shSolutions6"> <a href="/web/20120303042410/http://www.adobe.com/go/gnavtray_solutions_moresolutions_en_us">More solutions</a> </div> </div> </div> <a href="/web/20120303042410/http://www.adobe.com/go/gnav_learning_en_us" id="shLearning" class="SiteHeaderBarItem SiteHeaderBarLink">Learning</a> <a href="/web/20120303042410/http://www.adobe.com/go/gnav_help_en_us" id="shHelp" class="SiteHeaderBarItem SiteHeaderBarLink">Help</a> <a href="/web/20120303042410/http://www.adobe.com/go/gnav_downloads_en_us" id="shDownloads" class="SiteHeaderBarItem SiteHeaderBarLink">Downloads</a> <a href="/web/20120303042410/http://www.adobe.com/go/gnav_company_en_us" id="shCompany" class="SiteHeaderBarItem SiteHeaderBarLink">Company</a> <div class="SiteHeaderDropdownLink SiteHeaderBarItem" id="shStore"> <a href="/web/20120303042410/http://www.adobe.com/go/gnav_store_en_us" class="SiteHeaderBarLink" id="shStoreLink">Buy</a> <div class="SiteHeaderDropPanel" id="StorePanel"> <div class="SiteHeaderPanelRow SiteHeaderPanelLink" id="shStore1"> <span class="SiteHeaderPanelHeader"><a href="/web/20120303042410/http://www.adobe.com/go/gnavtray_store_homeuse_en_us">Home use</a></span> for personal and home office </div> <div class="SiteHeaderPanelRow SiteHeaderPanelLink" id="shStore2"> <span class="SiteHeaderPanelHeader"><a href="/web/20120303042410/http://www.adobe.com/go/gnavtray_store_education_en_us">Education</a></span> for students, educators, and staff </div> <div class="SiteHeaderPanelRow SiteHeaderPanelLink" id="shStore3"> <span class="SiteHeaderPanelHeader"><a href="/web/20120303042410/http://www.adobe.com/go/gnavtray_store_business_en_us">Business</a></span> for small and medium businesses </div> <div class="SiteHeaderPanelRow SiteHeaderPanelLink" id="shStore4"> <span class="SiteHeaderPanelHeader"><a href="/web/20120303042410/http://www.adobe.com/go/gnavtray_store_licensingprograms_en_us">Licensing programs</a></span> for businesses, schools, and government </div> <div class="SiteHeaderPanelRow SiteHeaderPanelLink" id="shStore5"> <span class="SiteHeaderPanelHeader"><a href="/web/20120303042410/http://www.adobe.com/go/gnavtray_store_specialoffers_en_us">Special offers</a></span> </div> </div> </div> <a href="/web/20120303042410/http://www.adobe.com/go/gnav_search" id="shSearchButton" class="SiteHeaderBarItem SiteHeaderSearchButton" style="display: none;">Search</a> <div class="SiteHeaderBarItem SiteHeaderBarItemLast"> </div> <div id="site-search" class="SiteHeaderSearch"> <input title="Search" type="text" id="search-input" name="term" maxlength="1000"/> <input type="hidden" id="searchbuddy-loc" name="loc" value="en_us"/> <button type="submit" id="search-submit" class="icon-replace search">Search</button> </div> </div> <div class="SiteHeaderUser"> <div id="shSignInBlock" class="Link"> <a id="shInfo" class="SiteHeaderUserItem SiteHeaderInfo">Info</a> <a href="/web/20120303042410/http://www.adobe.com/cfusion/membership/index.cfm?loc=en_us&nl=1" id="shSignIn" class="SiteHeaderUserItem LinkStrong">Sign in</a> </div> <a href="/web/20120303042410/http://www.adobe.com/cfusion/membership/index.cfm?loc=en_us&nl=1" id="shWelcome" class="SiteHeaderUserItem SiteHeaderArrow LinkStrong" style="display: none;">Welcome, <span id="screenName"></span></a> <div id="MyCartLinkContainer"> <a href="/web/20120303042410/http://www.adobe.com/go/gnav_mycart_en_us" id="shMyCart" class="SiteHeaderUserItem SiteHeaderCart">My cart<span id="cartQuantity"></span></a> </div> <a href="/web/20120303042410/http://www.adobe.com/go/gnav_myorders_en_us" id="shMyOrders" class="SiteHeaderUserItem">My orders</a> <a href="/web/20120303042410/http://www.adobe.com/go/gnav_myadobe_en_us" id="shMyAdobe" class="SiteHeaderUserItem">My Adobe</a> </div> <div class="SiteHeaderPopPanelShadow width-150" id="WelcomePanelShadow" style="display: none;"></div> <div class="SiteHeaderPopPanel width-150" id="WelcomePanel" style="display: none;"> <div class="SiteHeaderPanelRow SiteHeaderPanelLink" id="shMyAccount"> <a class="SiteHeaderPanelHeader" href="/web/20120303042410/http://www.adobe.com/go/gnavtray_myadobe_en_us">My Adobe</a> </div> <div class="SiteHeaderPanelRow SiteHeaderPanelLink" id="shMyOrders2"> <a class="SiteHeaderPanelHeader" href="/web/20120303042410/http://www.adobe.com/go/gnavtray_myadobe_myorders_en_us">My orders</a> </div> <div class="SiteHeaderPanelRow SiteHeaderPanelLink" id="shMyInformation"> <a class="SiteHeaderPanelHeader" href="/web/20120303042410/http://www.adobe.com/go/gnavtray_myadobe_myinformation_en_us">My information</a> </div> <div class="SiteHeaderPanelRow SiteHeaderPanelLink" id="shMyPreferences"> <a class="SiteHeaderPanelHeader" href="/web/20120303042410/http://www.adobe.com/go/gnavtray_myadobe_mypreferences_en_us">My preferences</a> </div> <div class="SiteHeaderPanelRow SiteHeaderPanelLink" id="shSignOut"> <a class="SiteHeaderPanelHeader" href="/web/20120303042410/http://www.adobe.com/cfusion/membership/logout.cfm">Sign out</a> </div> </div> <div class="SiteHeaderPopPanelShadow width-250" id="InfoPanelShadow" style="display: none;"></div> <div class="SiteHeaderPopPanel width-250" id="InfoPanel" style="display: none;"> <div class="SiteHeaderPanelRow"> <span class="SiteHeaderPanelHeader">Why sign in?</span> Sign in to manage your account and access trial downloads, product extensions, community areas, and more. </div> </div> </div> </form> <div id="SiteHeaderMobile" class="SiteHeaderMobile LayoutHidden LayoutSlim Text TextSmall"> <a href="/web/20120303042410/http://www.adobe.com/go/gnav_adobe_logo_en_us" id="shHomeMobile" class="SiteHeaderHome SiteHeaderHomeMobile">Adobe</a> <div class="SiteHeaderBar SiteHeaderBarMobile" id="shBarMobile"> <span class="SiteHeaderBarItemMobile SiteHeaderBarItemMobileNoLeftBorder" id="shProductsMobileSpan"><a href="/web/20120303042410/http://www.adobe.com/go/gnav_products_en_us" id="shProductsMobile" class="SiteHeaderBarLink">Products</a></span> <span class="SiteHeaderBarItemMobile" id="shSectionsMobileSpan"><a href="#" id="shSectionsMobile" class="SiteHeaderArrowMobile SiteHeaderBarLink">Sections</a></span> <span class="SiteHeaderBarItemMobile SiteHeaderBarItemMobileNoRightBorder"> </span> <span class="SiteHeaderBarItemMobile SiteHeaderBarItemMobileNoRightBorder SiteHeaderBarItemFloatRight" id="shSearchMobileSpan"><a href="/web/20120303042410/http://www.adobe.com/go/gnav_search" id="shSearchMobile" class="SiteHeaderSearchButtonMobile">Search</a></span> <span class="SiteHeaderBarItemMobile SiteHeaderBarItemMobileNoLeftBorder SiteHeaderBarItemFloatRight"> </span> </div> <div class="SiteHeaderBarMobileExtend" id="shBarExtend"> <div id="shBarExtendSections" style="display: none;"> <div id="shBarExtendSections1" class="SiteHeaderBarMobileExtendSections"> <a href="/web/20120303042410/http://www.adobe.com/go/gnav_solutions_en_us" id="shSectionsSolutionsMobile" class="SiteHeaderBarExtendSectionsItem SiteHeaderBarLink">Solutions</a> <a href="/web/20120303042410/http://www.adobe.com/go/gnav_company_en_us" id="shSectionsCompanyMobile" class="SiteHeaderBarExtendSectionsItem SiteHeaderBarLink">Company</a> </div> <div id="shBarExtendSections2" class="SiteHeaderBarMobileExtendSections"> <a href="/web/20120303042410/http://www.adobe.com/go/gnav_help_en_us" id="shSectionsHelpMobile" class="SiteHeaderBarExtendSectionsItem SiteHeaderBarLink">Help</a> <a href="/web/20120303042410/http://www.adobe.com/go/gnav_learning_en_us" id="shSectionsLearningMobile" class="SiteHeaderBarExtendSectionsItem SiteHeaderBarLink">Learning</a> </div> </div> <div id="shBarExtendSearch" style="display: none;"> <form id="globalnav-search-mobile" class="SiteHeaderSearchMobileForm" name="globalnav-search-mobile" method="get" action="/web/20120303042410/http://www.adobe.com/go/gnav_search" accept-charset="utf-8"> <input title="Search" type="text" id="search-input-mobile" name="term" maxlength="1000"/> <button type="submit" id="search-submit-mobile">Search</button> </form> </div> </div> <div class="SiteHeaderUser"> <a href="/web/20120303042410/http://www.adobe.com/cfusion/membership/index.cfm?loc=en_us&nl=1" id="shSignInMobile" class="SiteHeaderUserItem SiteHeaderUserItemMobile SiteHeaderInfoMobile LinkStrong">Sign in</a> <a href="/web/20120303042410/http://www.adobe.com/cfusion/membership/index.cfm?loc=en_us&nl=1" id="shWelcomeMobile" class="SiteHeaderUserItem SiteHeaderUserItemMobile SiteHeaderArrow LinkStrong" style="display: none;">Welcome, <span id="screenName"></span></a> <a href="/web/20120303042410/http://www.adobe.com/go/gnav_myorders_en_us" id="shMyOrdersMobile" class="SiteHeaderUserItem SiteHeaderUserItemMobile">My orders</a> <a href="/web/20120303042410/http://www.adobe.com/go/gnav_myadobe_en_us" id="shMyAdobeMobile" class="SiteHeaderUserItem SiteHeaderUserItemMobile">My Adobe</a> </div> </div>  <div class="hovercart"> <div id="HoverCartModal"> <div class="CartHeaderPopPanelShadow HoverCartwidth" id="CartPanelShadow" style="display: none;"> <div class="CartHeaderPopPanel HoverCart" id="CartPanel"> <div id="HoverCartItem" class="RuleHBottom HoverCart-1-3 LayoutBigRowTop" style="display: none"> <div class="LayoutBreakAfter"> <div class="HoverCart-1 LayoutHItem"> <div style="padding-left:60px;" class="LayoutPullout"> <div id="HoverCartBoxShotxyz" class="HoverCartBoxShot"> <a href=""> <img src="/web/20120303042410im_/http://www.adobe.com/devnet/flash/articles/reops_pt2.html" class="LayoutImage" alt=""/> </a> </div> <div style="float:left;width:100%" class="CPodCostCell"> <span class="TextStrong ProductName" id="HoverCartHeaderxyz"> <a href="#"> </a> </span> <div class="LayoutBigRowBottom" id="HoverCartDescriptionxyz"> </div> </div> </div> </div> <div class="LayoutHItem HoverCart-2"> <div class="HoverCartQty"> Qty: <span id="HoverCartQtyxyz"> </span> </div> </div> <div class="HoverCart-3"> <div class="CheckoutCostDark LayoutRight"> <span id="HoverCartPricexyz"> </span> <span id="HoverCartSubscriptionxyz" class="CheckoutSubscription"> </span> </div> </div> </div> <div class="HoverCartEDUMessage LayoutBigCellBottom">Purchase requires verification of academic eligibility</div> </div> <div id="HoverCartContainer" class="LayoutBreakAfter" style=""></div> <a id="HoverCartMoreItems" class="LayoutBreakAfter" style="text-align: center;" href="/web/20120303042410/http://www.adobe.com/cart.html"></a> <div id="HoverCartButtons" class="HoverCart-1-3"> <div class="HoverCart-2-3 LayoutRight LayoutSmallRow LayoutBreakAfter"> <div class="HoverCart-2"> <div class="TextRight HoverCartSubTotal">Subtotal</div> </div> <div class="HoverCart-3 LayoutRight"> <div class="LayoutRight TextRight"> <div class="CheckoutCostDark"> <span id="HoverCartSubTotal"> </span> </div> </div> </div> </div> <div class="LayoutBreak"></div> <div class="HoverCart-1-3 LayoutRight LayoutCellTop LayoutBreakAfter"> <a href="/web/20120303042410/http://www.adobe.com/cart.html" id="HoverCartCheckOut" class="CartButtonYellow CartShopCheckOut LayoutRight"><span class="CartBuyIconText">Review and Checkout</span></a> </div> </div> </div> </div> </div> <script type="text/javascript"> /*global jQuery,adobe*/ jQuery.createNs("Adobe.Cart.ShoppingCart"); Adobe.Cart.ShoppingCart.HoverCart = { MaxItems: "4", DisplayTime: "5000", MoreItemsTextSingular: "() more item in your cart", MoreItemsTextPlural: "() more items in your cart", MonthToMonthText: "per month", YearlyText: "per year" }; Adobe.Cart.ShoppingCart.GlobalVars = { CountryCode: "US", MarketSegment: "COM", AkamaiURLPrefix: "https://web.archive.org/web/20120303042410/http://wwwimages.adobe.com/www.adobe.com", PriceMonthText: "per month", PriceYearText: "per year", FullSubMonthText: "Month-to-month", FullSubYearText: "One-year", SubMonthText: "Monthly", SubYearText: "Annual", SubscriptionItemText: "NONE", TermTypeMonth: "MONTH", TermTypeYear: "YEAR", BackupDVDParent: "_PARENT", /* params: { cart, price, categoryPath, originalPrice, storeName, locale, usePrecision, type, taxCode, delimiter, showCentDelim, distributionMethod } */ getPriceLabel: function(params) { var currency = params.cart.currency; var params = { storeName: params.storeName, locale: params.locale, productKey: params.categoryPath, priceObject: { price: { orginalPriceWithoutTax: params.originalPrice, priceWithoutTax: params.price, taxCode: params.taxCode || "" }, priceTypeKey: params.distributionMethod }, currencyObject: { delimiter: params.delimiter || ",", formatString: currency.FORMATSTRING, iso3Code: currency.CODE, symbol: currency.SYMBOL, usePrecision: params.usePrecision }, showCentDelim : params.showCentDelim || false, type: params.type }; return params; }, isSubscription: function(serviceCommitment, termType) { return (serviceCommitment == this.SubscriptionItemText && (termType == this.TermTypeMonth || termType == this.TermTypeYear)); }, subscriptionItem: function(serviceCommitment, termType) { return (termType == this.TermTypeMonth && (serviceCommitment == this.TermTypeMonth || serviceCommitment == this.TermTypeYear)); }, getSubscriptionText: function(serviceCommitment, termType) { if (this.isSubscription(serviceCommitment, termType)) { if (termType === this.TermTypeMonth) { return this.SubMonthText; } else if (termType === this.TermTypeYear) { return this.SubYearText; } } else if (this.subscriptionItem(serviceCommitment, termType)) { if (serviceCommitment === this.TermTypeMonth) { return this.FullSubMonthText; } else if (serviceCommitment === this.TermTypeYear) { return this.FullSubYearText; } } return ""; }, getSubscriptionPriceText: function(serviceCommitment, termType) { if (this.isSubscription(serviceCommitment, termType)) { if (termType === this.TermTypeMonth) { return this.PriceMonthText; } else if (termType === this.TermTypeYear) { return this.PriceYearText; } } else if (this.subscriptionItem(serviceCommitment, termType)) { return this.PriceMonthText; } return ""; } }; </script> </div> <div id="modalContent" style="display:none;"></div> </div> </div> <div class="Link" id="top"> <div class="Link LayoutBreakAfter"> <div class="parbase compbase breadcrumb"><div class="LayoutHeader LayoutBreakAfter Link"> <div class="LayoutHeaderPath"> <div class="LayoutCellSides LinkStrong LayoutH IconAlign"> <span class="LayoutHItem LayoutSmallGutterRight"> <a href="/web/20120303042410/http://www.adobe.com/devnet.html"> Adobe Developer Connection</a> </span> <span class="LayoutSmallGutterRight LayoutHItem">/</span> <span class="LayoutHItem LayoutSmallGutterRight"> <a href="/web/20120303042410/http://www.adobe.com/devnet/flash.html"> Flash Developer Center</a> </span> <span class="LayoutSmallGutterRight LayoutHItem">/</span> </div> </div> </div> </div> <div class="LayoutGrid-1-3 LayoutSlimGrid-1-2"> <h1 class="LayoutCellSides LayoutSmallRow TextH1"> RealEyes OSMF Player Sample – Part 2: Building and configuration </h1> </div> </div> </div> <div class="LayoutRow Link RuleH"> <div class="LayoutBreakAfter">  <div class="ArticleGrid-1 LayoutSlimGrid-1-2 ArticleWideGrid-1 TextSmall"> <div class="LayoutCellSides LayoutRow"> <div class="articleAuthorDisplay authordisplay"> <h2 class="TextH5 LayoutRow"> by <a href="/web/20120303042410/http://www.adobe.com/devnet/author_bios/david_hassoun.html">David Hassoun</a> </h2> <div class="LayoutRow"> <img title="" alt="David Hassoun" class="ImageShadow LayoutImage" src="/web/20120303042410im_/http://www.adobe.com/content/dotcom/en/devnet/author_bios/david_hassoun/_jcr_content/image.adimg.mw.160.jpg/1296465118104.jpg"/> </div> <div class="LayoutRow"> <ul> <li><a href="https://web.archive.org/web/20120303042410/http://david.realeyes.com/" title="david.realeyes.com" target="_blank">david.realeyes.com</a></li> </ul> </div> <h2 class="TextH5 LayoutRow"> by <a href="/web/20120303042410/http://www.adobe.com/devnet/author_bios/john_crosby.html">John Crosby</a> </h2> <div class="LayoutRow"> <img title="" alt="John Crosby" class="ImageShadow LayoutImage" src="/web/20120303042410im_/http://www.adobe.com/content/dotcom/en/devnet/author_bios/john_crosby/_jcr_content/image.adimg.mw.160.jpg/1296454890255.jpg"/> </div> <div class="LayoutRow"> <ul> <li><a href="https://web.archive.org/web/20120303042410/http://john.realeyes.com/" title="john.realeyes.com">john.realeyes.com</a></li> </ul> </div> </div> </div> <div class="LayoutCellSides LayoutRow"> <div class="parbase compbase articleTOC singlepagetoc"> <div class="LayoutRow"> <h2 class="TextH5 LayoutSmallRow">Content</h2> <ul class="LayoutSmallRow"> <li class="LayoutSmallRow ListItemIndent"> <a href="#articlecontentAdobe_numberedheader"> Building a simple player with the OSMF </a> </li> <li class="LayoutSmallRow ListItemIndent"> <a href="#articlecontentAdobe_numberedheader_0"> How the REOPS player is built with the OSMF </a> </li> <li class="LayoutSmallRow ListItemIndent"> <a href="#articlecontentAdobe_numberedheader_1"> Working with the MediaElements class </a> </li> <li class="LayoutSmallRow ListItemIndent"> <a href="#articlecontentAdobe_numberedheader_2"> Adding the MediaFactory to TheSimplestPlayer </a> </li> <li class="LayoutSmallRow ListItemIndent"> <a href="#articlecontentAdobe_numberedheader_3"> Configuring a new REOPS player </a> </li> </ul> </div> </div> </div> <div class="LayoutCellSides LayoutRow"> <div class="ionsupportbadge ionBadge"> <div id="badgeAnchorSupport" class="ionBadgeWrapper"></div> <div class="RuleH LayoutBigRow ionRule" style="display: none;"></div> <div id="badgeContainerSupport"></div> <div id="badgeVotesPlaceholder"></div> <div class="RuleH LayoutBigRow ionRule" style="display: none;"></div> <script type="text/javascript"> //<[CDATA[ function readyRatingIon(ratingJsonObject) { var ratingValue = ratingJsonObject.ion.thumbs[0].content; } ionReadyLoad(function(){ var badgeSupport = new ionSupportBadge(); badgeSupport.locale = "en_US"; badgeSupport.commenting = true; badgeSupport.rating = true; badgeSupport.ratingType = "thumbs"; badgeSupport.container = document.getElementById("badgeContainerSupport"); badgeSupport.anchor = document.getElementById("badgeAnchorSupport"); badgeSupport.siteArea = "DevNet"; badgeSupport.productLabel = "product_flash_lr"; badgeSupport.disableFeedback = false; badgeSupport.showTotals = true; badgeSupport.totalTypeDisplay = "percentage-relative"; badgeSupport.voteTypeDisplay = "simple"; badgeSupport.votesContainer = document.getElementById("badgeVotesPlaceholder"); badgeSupport.url = window.location.href.replace(window.location.search, ""); badgeSupport.timeOutDelay = 10000; badgeSupport.maxCommentLength = 100; badgeSupport.load(); $('.ionRule').show(); $('#ionThumbRatingGroup').live('click', function() { var form = $('.ionComAddForm'); form.css('width', '440px'); form.css('background', '#ffffff'); form.css('border', '#999999 1px solid'); form.css('box-shadow', '2px 2px 12px #333333'); var textArea = $('.ionComAddForm textarea'); textArea.css('margin', '10px 8px'); }); $('.ionComAdd .ionButton').live('click', function() { var form = $('.ionComAddForm'); form.css('width', ''); form.css('border', 'none'); form.css('box-shadow', 'none'); }); }); //]]> </script> </div> </div> <div class="LayoutCellSides LayoutRow"> <div class="articleTools articletools"> <div class="LayoutRow LayoutCellVSides"> <h2 class="TextH5 LayoutSmallRow">Created</h2> <p>22 June 2010</p> </div> <ul class="LayoutRow"> </ul> </div> </div> <div class="LayoutRow"> <div class="articleCommentSummary commentsummary"> <div class="LayoutRow LayoutCellSides"> <div id="articleRankAndCommentSummary"></div> </div> </div> </div> <div class="LayoutRow">  <div class="pagetools pageTools"> <div class="LayoutBreakAfter"> <div class="LayoutRow LayoutBreakAfter TextH5"> <table style="width: 100%;"> <tbody> <tr> <td class="LayoutCellSides LayoutSmallCellVSides PanelFillDark"> <h2 class="TextH5"> Page tools </h2> </td> </tr> </tbody> </table> </div> <div class="LayoutCellSides"> <div class="LayoutRow"> <div id="PageTools" style="padding-left:23px;" class="LayoutPullout"> <div class="LayoutSmallRowBottom LayoutBreakAfter"> <div style="width:16px;float:left;clear:left;position:relative;left:-23px;margin-right:-23px"> <a class="Facebook-button Icon IconFacebook" href="https://web.archive.org/web/20120303042410/http://www.facebook.com/sharer.php"></a> </div> <div style="float:left;width:100%"> <a href="https://web.archive.org/web/20120303042410/http://www.facebook.com/sharer.php" class="Facebook-button" title="Share on Facebook" target="_blank">Share on Facebook</a> </div> </div> <div class="LayoutSmallRowBottom LayoutBreakAfter"> <div style="width:16px;float:left;clear:left;position:relative;left:-23px;margin-right:-23px"> <a class="Twitter-button Icon IconTwitter" href="https://web.archive.org/web/20120303042410/http://twitter.com/"></a> </div> <div style="float:left;width:100%"> <a href="https://web.archive.org/web/20120303042410/http://twitter.com/" class="Twitter-button" title="Share on Twitter" target="_blank">Share on Twitter</a> </div> </div> <div class="LayoutSmallRowBottom LayoutBreakAfter"> <div style="width:16px;float:left;clear:left;position:relative;left:-23px;margin-right:-23px"> <a class="LinkedIn-button Icon IconLinkedIn" href="https://web.archive.org/web/20120303042410/http://www.linkedin.com/"></a> </div> <div style="float:left;width:100%"> <a href="https://web.archive.org/web/20120303042410/http://www.linkedin.com/" class="LinkedIn-button" title="Share on LinkedIn" target="_blank">Share on LinkedIn</a> </div> </div> <div class="LayoutSmallRowBottom LayoutBreakAfter"> <div style="width:16px;float:left;clear:left;position:relative;left:-23px;margin-right:-23px"> <a class="Bookmark-button Icon IconBookmark" href="#"></a> </div> <div style="float:left;width:100%"> <a class="Bookmark-button" href="#">Bookmark</a> </div> </div> <div class="LayoutSmallRowBottom LayoutBreakAfter"> <div style="width:16px;float:left;clear:left;position:relative;left:-23px;margin-right:-23px"> <a class="Print-button Icon IconPrint" href="#"></a> </div> <div style="float:left;width:100%"> <a class="Print-button" href="#">Print</a> </div> </div> </div> </div> </div> </div> </div> </div> <div class="LayoutCellSides LayoutRow">  <div class="articletags articleTags"> <div class="LayoutRow"> <div class="LayoutH LinkWeak TextTag"> <a href="/web/20120303042410/http://www.adobe.com/devnet/tagsearch.tsb.tag-ADC%2BKeywords_c_customization.tse.html" class="LayoutHItem LayoutHItem PanelFillMedium LayoutSmallGutterRight LayoutSmallRow LayoutSmallCellSides" title="customization"> customization </a> <a href="/web/20120303042410/http://www.adobe.com/devnet/tagsearch.tsb.prod-_sl_flash_builder_v_.tse.html" class="LayoutHItem LayoutHItem PanelFillMedium LayoutSmallGutterRight LayoutSmallRow LayoutSmallCellSides" title="Flash Builder"> Flash Builder </a> <a href="/web/20120303042410/http://www.adobe.com/devnet/tagsearch.tsb.prod-_sl_flash_professional_v_.tse.html" class="LayoutHItem LayoutHItem PanelFillMedium LayoutSmallGutterRight LayoutSmallRow LayoutSmallCellSides" title="Flash Professional"> Flash Professional </a> <a href="/web/20120303042410/http://www.adobe.com/devnet/tagsearch.tsb.tag-ADC%2BKeywords_c_osmf.tse.html" class="LayoutHItem LayoutHItem PanelFillMedium LayoutSmallGutterRight LayoutSmallRow LayoutSmallCellSides" title="OSMF"> OSMF </a> <a href="/web/20120303042410/http://www.adobe.com/devnet/tagsearch.tsb.tag-ADC%2BKeywords_c_templates.tse.html" class="LayoutHItem LayoutHItem PanelFillMedium LayoutSmallGutterRight LayoutSmallRow LayoutSmallCellSides" title="templates"> templates </a> <a href="/web/20120303042410/http://www.adobe.com/devnet/tagsearch.tsb.tag-ADC%2BKeywords_c_video.tse.html" class="LayoutHItem LayoutHItem PanelFillMedium LayoutSmallGutterRight LayoutSmallRow LayoutSmallCellSides" title="video"> video </a> </div> </div> </div> </div> <div class="LayoutBreak"></div> </div>  <div class="LayoutSlimGrid-1-2 ArticleGrid-2-4 ArticleWideGrid-2-6"> <div class="ArticleWideGrid-2-4"> <div class="articlerequirements articlePrerequistes"> <div class="PanelFillMedium PanelBevelBottom PanelBevelLeft TextSmall LayoutBreakAfter"> <div class="PanelBevelRight"> <div id="requirements-title" class="LayoutCell Link"> <h2 class="TextH5"> <span class="LayoutSmallGutterRight Icon IconSmallerAdd"></span> Requirements </h2> </div> <div id="requirements-content" class="LayoutBreakAfter"> <div class="ArticleGrid-2"> <div class="LayoutCellSides"> <h3 class="TextH5 LayoutSmallRowTop"> Prerequisite knowledge </h3> <div class="LayoutRowBottom"> <p>Basic knowledge of ActionScript 3 and Adobe Flash Builder or Adobe Flash Professional is recommended for this tutorial.</p> </div> <h3 class="TextH5 LayoutSmallRowTop"> User level </h3> <p class="LayoutRowBottom">Intermediate</p> </div> </div> <div class="ArticleGrid-3"> <div class="LayoutCellSides"> <h3 class="TextH5 LayoutSmallRowTop"> Required products </h3> <ul class="LayoutSmallRowTop LayoutRowBottom"> <li class="LayoutSmallRow"> <span class="IconLeft IconSmallDownload"></span>Flash Builder <a href="/web/20120303042410/http://www.adobe.com/go/try_flashbuilder/"> (Download trial)</a> </li> <li class="LayoutSmallRow"> <span class="IconLeft IconSmallDownload"></span>Flash Professional <a href="/web/20120303042410/http://www.adobe.com/go/tryflash/"> (Download trial)</a> </li> </ul> </div> </div> <div class="ArticleGrid-4"> <div class="LayoutCellSides"> <h3 class="TextH5 LayoutSmallRowTop"> Sample files </h3> <ul class="LayoutSmallRowTop LayoutRowBottom"> <li class="LayoutSmallRow"><a href="/web/20120303042410/http://www.adobe.com/content/dotcom/en/devnet/flash/articles/reops_pt2/_jcr_content/articlePrerequistes/multiplefiles/node_1278998980642/file.res/reops_pt2.zip"><span class="LayoutSmallGutterRight Icon IconSmallDownload"></span>reops_pt2.zip </a> (3225 KB) </li> <ul class="LayoutGutterLeft"><li class="LayoutGutterLeft"> </li></ul> </ul> </div> </div> </div> </div> </div> <script type="text/javascript"> createPanelToggle("requirements-title", "requirements-content", true); </script> <script type="text/javascript"> createPanelToggle("requirements-title", "requirements-content", true); </script> </div> <div class="LayoutGrid-1-4 LayoutSlimGrid-1-2 LayoutBreakAfter"> <div class="parsys articlecontentAdobe"><div id="articlecontentAdobe"> <a name="articlecontentAdobe_text" style="visibility:hidden"></a><div class="text parbase section"> <div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium"> <p>The RealEyes OSMF Player Sample (REOPS) is a project developed by RealEyes Media to provide the community a sample and an optional starting point for a robust video player utilizing the Open Source Media Framework (OSMF) from Adobe. The REOPS project is meant to be a building block for developers, as well as a visual representation to illustrate the capabilities of the OSMF framework and a "how to" for using it. </p> <p>This article is a follow-up of our previous article, <a href="/web/20120303042410/http://www.adobe.com/devnet/flash/articles/reops_pt1.html">Part 1: Setup and deployment</a>, where we introduced you to the REOPS project. In this article we show you how to build a very simple OSMF player to get familiar with the building blocks of the OSMF. We then explain each of these OSMF building blocks in simple terms, as well as how the REOPS project integrates each of them.</p> </div> </div> <a name="articlecontentAdobe_numberedheader" style="visibility:hidden"></a><div class="parbase compbase numberedheader section"> <h3 class="TextH3 LayoutCellSides LayoutRow"> Building a simple player with the OSMF </h3> </div> <a name="articlecontentAdobe_text_0" style="visibility:hidden"></a><div class="text parbase section"> <div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium"> <p>In this walkthrough you will build a simple player using the OSMF to see these objects in action. For now, don't worry about the details of each item. We will review each of the objects, what they do, and how the REOPS uses them.</p> <h4>The REOPS Project</h4> <p>We will be referencing the REOPS project throughout this article, so if you haven't downloaded or checked out the REOPS code, you can do so from the <a href="https://web.archive.org/web/20120303042410/http://code.google.com/p/reops/" target="_blank">Google code page</a>: </p> <h4>The OSMF building blocks</h4> <p>We will also be reviewing the OSMF code, so you will want to download that as well. The REOPS project comes with the OSMF.swc file, but you may want to look at the actual OSMF framework code for yourself.</p> <p>You can get the code in a couple of ways:</p> <ul> <li>Download the OSMF source ZIP file: <a href="https://web.archive.org/web/20120303042410/http://opensource.adobe.com/wiki/display/osmf/Downloads" target="_blank">http://opensource.adobe.com/wiki/display/osmf/Downloads</a></li> <li>If you are familiar with SVN, you can check out the source from SVN as well: <a href="https://web.archive.org/web/20120303042410/http://opensource.adobe.com/svn/opensource/osmf" target="_blank">http://opensource.adobe.com/svn/opensource/osmf</a></li> </ul> <p>Before we dive into the code, we'll review some of the basic OSMF media player building blocks. That way you'll be familiar with them when you build a player, as well as when we review how the REOPS uses the OSMF to create powerful and flexible player platform.</p> <p>To build a basic player, you need four things:</p> <ul> <li><b>MediaElement:</b> This object represents a specific piece of media: an image, a video,, or other media asset.</li> <li><b>MediaPlayer:</b> This is a high-level class that provides much of the plumbing necessary to interact with all media types.</li> <li><b>MediaContainer:</b> This is a Sprite-based container for media objects.</li> <li><b>DisplayList:</b> This is the display list of a Sprite that to which the MediaContainer object will be added.</li> </ul> <p class="note"><b>Note:</b> Completed files for this example can be found in the <a href="https://web.archive.org/web/20120303042410/http://code.google.com/p/reops/downloads/list" target="_blank">REOPS Google Code project downloads list</a>. Look for TheSimplestPlayer.zip as a Flex project archive.</p> <ol> <li>Create a new Flash Builder ActionScript (Flex SDK 4) project named <b>TheSimplestPlayer</b> (see Figure 1).</li> </ol> </div> </div> <a name="articlecontentAdobe_image" style="visibility:hidden"></a><div class="parbase image section"> <img title="Creating the new ActionScript project" alt="Creating the new ActionScript project" class="cq-dd-image LayoutRow LayoutImage LayoutCellSides" src="/web/20120303042410im_/http://www.adobe.com/content/dotcom/en/devnet/flash/articles/reops_pt2/_jcr_content/articlecontentAdobe/image.adimg.mw.549.jpg/1278999411350.jpg"/> <div class="TextSmall LayoutCellSides LayoutRowTop LayoutBigRowBottom"> Figure 1. Creating the new ActionScript project </div> </div> <a name="articlecontentAdobe_text_1" style="visibility:hidden"></a><div class="text parbase section"> <div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium"> <ol start="2"> <li>Add a SWC folder to the project named <b>libs</b> (see Figure 2).</li> </ol> </div> </div> <a name="articlecontentAdobe_image_0" style="visibility:hidden"></a><div class="parbase image section"> <img title="Adding the SWC folder" alt="Adding the SWC folder" class="cq-dd-image LayoutRow LayoutImage LayoutCellSides" src="/web/20120303042410im_/http://www.adobe.com/content/dotcom/en/devnet/flash/articles/reops_pt2/_jcr_content/articlecontentAdobe/image_0.adimg.mw.600.jpg/1278999679310.jpg"/> <div class="TextSmall LayoutCellSides LayoutRowTop LayoutBigRowBottom"> Figure 2. Adding the SWC folder </div> </div> <a name="articlecontentAdobe_text_2" style="visibility:hidden"></a><div class="text parbase section"> <div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium"> <ol start="3"> <li>Once you complete the New Project Wizard, create the <b>libs</b> directory in the project. The new project should look something like Figure 3.</li> </ol> </div> </div> <a name="articlecontentAdobe_image_1" style="visibility:hidden"></a><div class="parbase image section"> <img title="Reviewing the folder structure for TheSimplestPlayer" alt="Reviewing the folder structure for TheSimplestPlayer" class="cq-dd-image LayoutRow LayoutImage LayoutCellSides" src="/web/20120303042410im_/http://www.adobe.com/content/dotcom/en/devnet/flash/articles/reops_pt2/_jcr_content/articlecontentAdobe/image_1.adimg.mw.248.jpg/1278999863720.jpg"/> <div class="TextSmall LayoutCellSides LayoutRowTop LayoutBigRowBottom"> Figure 3. Reviewing the folder structure for TheSimplestPlayer </div> </div> <a name="articlecontentAdobe_text_3" style="visibility:hidden"></a><div class="text parbase section"> <div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium"> <ol start="4"> <li>Copy the OSMF SWC file from the code you should have downloaded from the OSMF site into the libs directory.</li> <li>Open TheSimplestPlayer.as in the default package.</li> <li>Add the following metadata just above the class declaration to set the width and height of the compiled SWF file: </li> </ol> </div> </div> <a name="articlecontentAdobe_codeblock" style="visibility:hidden"></a><div class="parbase codeblock compbase section"> <div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow"> <code class="CodeBlock">[SWF( width="640", height="360" )] public class TheSimplestPlayer extends Sprite { }</code> </div> </div> <a name="articlecontentAdobe_text_4" style="visibility:hidden"></a><div class="text parbase section"> <div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium"> <ol start="7"> <li>Inside the class constructor, create a variable named <b>videoPath</b> and type this variable as a String. Set this variable equal to the URL:</li> </ol> <p><kbd>"rtmp://cp67126.edgefcs.net/ondemand/mediapm/strobe/content/test/SpaceAloneHD_sounas_640_500_short"</kbd>. This will be the media played. The OSMF manages splitting up the connection portion of the string from the content portion for streaming media:</p> </div> </div> <a name="articlecontentAdobe_codeblock_0" style="visibility:hidden"></a><div class="parbase codeblock compbase section"> <div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow"> <code class="CodeBlock">public class TheSimplestPlayer extends Sprite { var videoPath:String = "rtmp://cp67126.edgefcs.net/ondemand/mediapm/strobe/content/test/SpaceAloneHD_sounas_640_500_short"; }</code> </div> </div> <a name="articlecontentAdobe_text_5" style="visibility:hidden"></a><div class="text parbase section"> <div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium"> <ol start="8"> <li>Under the videoPath variable, create a new variable named <b>resource</b> and type resource as a URLResource object. Pass the videoPath variable you just created as the only parameter to the new URLResource object. This wraps the media path in a resource to be used at the context reference for a media element:</li> </ol> </div> </div> <a name="articlecontentAdobe_codeblock_1" style="visibility:hidden"></a><div class="parbase codeblock compbase section"> <div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow"> <code class="CodeBlock">var videoPath:String = "rtmp://cp67126.edgefcs.net/ondemand/mediapm/strobe/content/test/SpaceAloneHD_sounas_640_500_short"; var resource:URLResource = new URLResource( videoPath );</code> </div> </div> <a name="articlecontentAdobe_text_6" style="visibility:hidden"></a><div class="text parbase section"> <div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium"> <ol start="9"> <li>Create a new variable named <b>element</b> and type it as a VideoElement object. Pass the resource variable as the only parameter to the new VideoElement object. This creates a usable media element with all the needed connection and content pointer information for playback:</li> </ol> </div> </div> <a name="articlecontentAdobe_codeblock_2" style="visibility:hidden"></a><div class="parbase codeblock compbase section"> <div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow"> <code class="CodeBlock">var resource:URLResource = new URLResource( videoPath ); var element:VideoElement = new VideoElement( resource );</code> </div> </div> <a name="articlecontentAdobe_text_7" style="visibility:hidden"></a><div class="text parbase section"> <div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium"> <ol start="10"> <li>Create a <b>mediaPlayer</b> variable typed as a MediaPlayer object. Pass the element variable as the only parameter to the new MediaPlayer object. This creates the manager and controller for the media playback and sets the media to be loaded and played:</li> </ol> </div> </div> <a name="articlecontentAdobe_codeblock_3" style="visibility:hidden"></a><div class="parbase codeblock compbase section"> <div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow"> <code class="CodeBlock">var element:VideoElement = new VideoElement( resource ); var mediaPlayer:MediaPlayer = new MediaPlayer( element );</code> </div> </div> <a name="articlecontentAdobe_text_8" style="visibility:hidden"></a><div class="text parbase section"> <div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium"> <ol start="11"> <li>Create a new <b>mediaContainer</b> variable typed as a MediaContainer object. The MediaContainer will be the manager for the actual display of the media:</li> </ol> </div> </div> <a name="articlecontentAdobe_codeblock_4" style="visibility:hidden"></a><div class="parbase codeblock compbase section"> <div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow"> <code class="CodeBlock">var mediaPlayer:MediaPlayer = new MediaPlayer( element ); var mediaContainer:MediaContainer = new MediaContainer();</code> </div> </div> <a name="articlecontentAdobe_text_9" style="visibility:hidden"></a><div class="text parbase section"> <div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium"> <ol start="12"> <li>Call the <code>addMediaElement()</code> method on the mediaContainer object and pass it the <b>element</b> variable. This adds the actual media element to a display object:</li> </ol> </div> </div> <a name="articlecontentAdobe_codeblock_5" style="visibility:hidden"></a><div class="parbase codeblock compbase section"> <div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow"> <code class="CodeBlock">var mediaContainer:MediaContainer = new MediaContainer(); mediaContainer.addMediaElement( element );</code> </div> </div> <a name="articlecontentAdobe_text_10" style="visibility:hidden"></a><div class="text parbase section"> <div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium"> <ol start="13"> <li>Call the <code>addChild()</code> method and pass it the mediaContainer variable. This simply displays the MediaContainer to the display list:</li> </ol> </div> </div> <a name="articlecontentAdobe_codeblock_6" style="visibility:hidden"></a><div class="parbase codeblock compbase section"> <div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow"> <code class="CodeBlock">mediaContainer.addMediaElement( element ); addChild( mediaContainer );</code> </div> </div> <a name="articlecontentAdobe_text_11" style="visibility:hidden"></a><div class="text parbase section"> <div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium"> <p>The completed code should look similar to the following:</p> </div> </div> <a name="articlecontentAdobe_codeblock_7" style="visibility:hidden"></a><div class="parbase codeblock compbase section"> <div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow"> <code class="CodeBlock">[SWF( width="640", height="360" )] public class TheSimplestPlayer extends Sprite { public function TheSimplestPlayer() { var videoPath:String = "rtmp://cp67126.edgefcs.net/ondemand/mediapm/strobe/content/test/SpaceAloneHD_sounas_640_500_short"; var resource:URLResource = new URLResource( videoPath ); var element:VideoElement = new VideoElement( resource ); var mediaPlayer:MediaPlayer = new MediaPlayer( element ); var mediaContainer:MediaContainer = new MediaContainer(); mediaContainer.addMediaElement( element ); addChild( mediaContainer ); }</code> </div> </div> <a name="articlecontentAdobe_text_12" style="visibility:hidden"></a><div class="text parbase section"> <div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium"> <ol start="14"> <li>Save the file and run the application. You should see the video play as in Figure 4.</li> </ol> </div> </div> <a name="articlecontentAdobe_image_2" style="visibility:hidden"></a><div class="parbase image section"> <img title="Playing the video" alt="Playing the video" class="cq-dd-image LayoutRow LayoutImage LayoutCellSides" src="/web/20120303042410im_/http://www.adobe.com/content/dotcom/en/devnet/flash/articles/reops_pt2/_jcr_content/articlecontentAdobe/image_2.adimg.mw.600.jpg/1279000603785.jpg"/> <div class="TextSmall LayoutCellSides LayoutRowTop LayoutBigRowBottom"> Figure 4. Playing the video </div> </div> <a name="articlecontentAdobe_text_13" style="visibility:hidden"></a><div class="text parbase section"> <div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium"> <p>This is a very simple player: there are no controls and it only plays a single video file—no playlist or other media types. However, this player does illustrate some of the core concepts of working with the OSMF.</p> </div> </div> <a name="articlecontentAdobe_numberedheader_0" style="visibility:hidden"></a><div class="parbase compbase numberedheader section"> <h3 class="TextH3 LayoutCellSides LayoutRow"> How the REOPS player is built with the OSMF </h3> </div> <a name="articlecontentAdobe_text_14" style="visibility:hidden"></a><div class="text parbase section"> <div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium"> <p>The REOPS player uses the MediaPlayerSprite class. The MediaPlayerSprite class provides some out-of-the-box implementations that make developing with the OSMF much easier and quicker. The following sections will describe each of the main objects used to build an OSMF player and point out where the REOPS project integrates each of them. Figure 5 shows the general relationship of the objects used to build the REOPS using the OSMF.</p> </div> </div> <a name="articlecontentAdobe_image_3" style="visibility:hidden"></a><div class="parbase image section"> <img title="Architecture of the REOPS player" alt="Architecture of the REOPS player" class="cq-dd-image LayoutRow LayoutImage LayoutCellSides" src="/web/20120303042410im_/http://www.adobe.com/content/dotcom/en/devnet/flash/articles/reops_pt2/_jcr_content/articlecontentAdobe/image_3.adimg.mw.390.jpg/1279000803117.jpg"/> <div class="TextSmall LayoutCellSides LayoutRowTop LayoutBigRowBottom"> Figure 5. Architecture of the REOPS player </div> </div> <a name="articlecontentAdobe_text_15" style="visibility:hidden"></a><div class="text parbase section"> <div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium"> <h4>The MediaPlayerSprite class</h4> <p>The MediaPlayerSprite (Figure 6) enables a MediaElement with a DisplayObjectTrait to be placed on the display list using the MediaContainer class. The MediaContainer class implements much of the necessary code to accomplish this task. Additionally, the MediaContainer class offers support for the OSMF internal layout API. Currently, the REOPS project doesn't use the MediaPlayerSprite, but rather uses the MediaContainer object directly. The MediaPlayerSprite creates the MediaContainer object for you.</p> <p>Additionally, the MediaPlayerSprite class can handle the creation of a MediaPlayer controller class (you can also create your own MediaPlayer instance and pass it to the MediaPlayerSprite). MediaElement and MediaPlayer should sound familiar. They were both used in the example player that you just built. DisplayObjectTrait, however, is a new concept. Next, we'll show you where traits fit into the OSMF and the REOPS project.</p> <h4>Getting to know media traits</h4> <p>MediaElements, which we will cover in a moment, express their capabilities through traits. For example, an audio file has a duration or a timeline, but an image does not—so, an audio-based MediaElement object will have a TimeTrait where the image-based MediaElement will not. </p> <p>Here are a few things to keep in mind when working with traits:</p> <ul> <li>MediaElement can aggregate traits, so the audio-based MediaElement from before not only has a TimeTrait, but has an AudioTrait and a LoadTrait, among other traits.</li> <li>Traits are independent of each other. One does not extend the other.</li> <li>Traits dispatch their own events.</li> <li>Traits can be added or removed at any time; so, you will need to listen for the traitAdd (<code>MediaElementEvent.TRAIT_ADD</code>) and traitRemove (<code>MediaElementEvent.TRAIT_REMOVE</code>) events on MediaElement objects to manage the capabilities of your media player to match those of the current MediaElement.</li> </ul> <p>It can be quite a bit of work to get a player integrated with all the possible traits and combinations of traits that different MediaElements might have. Luckily, there is a class to help simplify the process of working with traits: the MediaPlayer class.</p> <h3>Introducing the MediaPlayer class</h3> <p>MediaPlayer is a high-level class that abstracts some of the lower level details of the OSMF. Instead of having to manage traits dynamically for all the different media types, the MediaPlayer class provides simple properties, methods, and events to handle all the normal trait management for you. The MediaPlayer class provides some default capabilities such as looping, auto-play and auto-rewind, as well as handling playback of any media type supported by the OSMF. This makes MediaPlayer a good base for a player.</p> <p>The REOPS uses the MediaPlayer class directly (see Figure 6). For other use cases, MediaPlayerSprite creates an instance of the MediaPlayer class and applications can access the mediaPlayer instance variable to control the MediaElements.</p> </div> </div> <a name="articlecontentAdobe_image_4" style="visibility:hidden"></a><div class="parbase image section"> <img title="The MediaPlayer class packaged within MediaPlayerSprite" alt="The MediaPlayer class packaged within MediaPlayerSprite" class="cq-dd-image LayoutRow LayoutImage LayoutCellSides" src="/web/20120303042410im_/http://www.adobe.com/content/dotcom/en/devnet/flash/articles/reops_pt2/_jcr_content/articlecontentAdobe/image_4.adimg.mw.390.jpg/1279000856444.jpg"/> <div class="TextSmall LayoutCellSides LayoutRowTop LayoutBigRowBottom"> Figure 6. The MediaPlayer class packaged within MediaPlayerSprite </div> </div> <a name="articlecontentAdobe_numberedheader_1" style="visibility:hidden"></a><div class="parbase compbase numberedheader section"> <h3 class="TextH3 LayoutCellSides LayoutRow"> Working with the MediaElements class </h3> </div> <a name="articlecontentAdobe_text_16" style="visibility:hidden"></a><div class="text parbase section"> <div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium"> <p>The MediaElement class and its subclasses represent the media items presented by the media player. MediaElements can represent a single piece of media, such as a video clip or an image, but may also represent a complex composition of media items. In TheSimplestPlayer example, there was only one MediaElement—a video clip, which used the VideoElement directly. This is fine to get the job done, but lacks flexibility. In order to handle multiple types of MediaElement—video, audio, images, compositions, and more—you would need to evaluate the type of media that you want to play, then create the correct MediaElement subclass. The OSMF provides you with the MediaFactory to accomplish this task. </p> <h4>Understanding the MediaFactory class</h4> <p>The MediaFactory class is what turns a URL or path into a MediaElement that the OSMF understands. The MediaFactory class maps resources’ paths to specific MediaElements by comparing each resource to a list of known resource types and their MediaElements. When a match is found, a MediaElement is created. The OSMF provides the DefaultMediaFactory, which can create MediaElements for all of the current media types supported by the OSMF. </p> <p class="note"><b>Note:</b> Reviewing the code in the org.osmf.media.MediaFactory and org.osmf.DefaultMediaFactory classes will give you a good base knowledge of how the MediaFactory works and how you can adjust the media types for your player.</p> <p>Working with a MediaFactory is relatively straightforward. Once you've instantiated a MediaFactory object, you can call the <code>createMediaElement()</code> method, passing a MediaResource. The MediaFactory creates the appropriate MediaElement for that resource and returns that MediaElement back to the caller, where it can be applied to the player for display. The MediaFactory is meant to be extended and customized, but for most uses, you can use the DefaultMediaFactory class which provides the default media element creation functionality.</p> <h4>MediaElements and their resources</h4> <p>MediaElements are created based on the type of resource that needs to be presented. The MediaResourceBase class is the base class for all of these resources. Subclasses of MediaElementBase are specific to the type of media item. Here are some examples:</p> <ul> <li><b>URLResource:</b> Images, SWFs, progressive video</li> <li><b>StreamingURLResource:</b> Streaming video/audio</li> <li><b>DynamicStreamingResource:</b> Dynamic streaming video</li> </ul> <p>The following code snippet shows a simple case using the MediaFactory:</p> </div> </div> <a name="articlecontentAdobe_codeblock_8" style="visibility:hidden"></a><div class="parbase codeblock compbase section"> <div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow"> <code class="CodeBlock">var mediaFactory:MediaFactory = new DefaultMediaFactory(); var resource:MediaResourceBase = new URLResource( "http://path/to/media.mp3" ); var audioElement:AudioElement = mediaFactory.createMediaElement( resource );</code> </div> </div> <a name="articlecontentAdobe_numberedheader_2" style="visibility:hidden"></a><div class="parbase compbase numberedheader section"> <h3 class="TextH3 LayoutCellSides LayoutRow"> Adding the MediaFactory to TheSimplestPlayer </h3> </div> <a name="articlecontentAdobe_text_17" style="visibility:hidden"></a><div class="text parbase section"> <div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium"> <p> In this simple walkthrough you will add the MediaFactory class to the code you created in the previous walkthrough to create MediaElements dynamically for you:</p> <ol> <li> Open TheSimplestPlayer.as in the default package from the previous code walkthrough.</li> <li>In the constructor method, under the line that creates the resource variable, create a new variable named <b>mediaFactory</b>, type it as a <code>DefaultMediaFactory</code> and set it equal to a new instance of <code>DefaultMediaFactory</code>:</li> </ol> </div> </div> <a name="articlecontentAdobe_codeblock_9" style="visibility:hidden"></a><div class="parbase codeblock compbase section"> <div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow"> <code class="CodeBlock">var resource:URLResource = new URLResource( videoPath ); var mediaFactory:DefaultMediaFactory = new DefaultMediaFactory();</code> </div> </div> <a name="articlecontentAdobe_text_18" style="visibility:hidden"></a><div class="text parbase section"> <div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium"> <ol start="3"> <li>Change the line that creates the element variable. Type the variable as a MediaElement and set it equal to the result of the <code>createMediaElement()</code> method. Make sure you pass the resource variable to the <code>createMediaElement()</code> method. Change this:</li> </ol> </div> </div> <a name="articlecontentAdobe_codeblock_10" style="visibility:hidden"></a><div class="parbase codeblock compbase section"> <div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow"> <code class="CodeBlock">var element:VideoElement = new VideoElement( resource );</code> </div> </div> <a name="articlecontentAdobe_text_19" style="visibility:hidden"></a><div class="text parbase section"> <div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium"> <p>to this:</p> </div> </div> <a name="articlecontentAdobe_codeblock_11" style="visibility:hidden"></a><div class="parbase codeblock compbase section"> <div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow"> <code class="CodeBlock">var element:MediaElement = mediaFactory.createMediaElement( resource );</code> </div> </div> <a name="articlecontentAdobe_text_20" style="visibility:hidden"></a><div class="text parbase section"> <div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium"> <p> The completed code should look similar to the following:</p> </div> </div> <a name="articlecontentAdobe_codeblock_12" style="visibility:hidden"></a><div class="parbase codeblock compbase section"> <div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow"> <code class="CodeBlock">[SWF( width="640", height="360" )] public class TheSimplestPlayer extends Sprite { public function TheSimplestPlayer() { var videoPath:String = "rtmp://cp67126.edgefcs.net/ondemand/mediapm/strobe/content/test/SpaceAloneHD_sounas_640_500_short"; var resource:URLResource = new URLResource( videoPath ); var mediaFactory:DefaultMediaFactory = new DefaultMediaFactory(); var element:MediaElement = mediaFactory.createMediaElement( resource ); var mediaPlayer:MediaPlayer = new MediaPlayer( element ); var mediaContainer:MediaContainer = new MediaContainer(); mediaContainer.addMediaElement( element ); addChild( mediaContainer ); } }</code> </div> </div> <a name="articlecontentAdobe_text_21" style="visibility:hidden"></a><div class="text parbase section"> <div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium"> <ol start="4"> <li> Save the file and run the application.</li> </ol> <p>There should be no change, but you should now understand that with a few changes the player has become more flexible. You no longer need to know the type of MediaElement ahead of time. All you need to do is pass the MediaFactory a path to a piece of media. Then the MediaFactory figures out what type of MediaElement to create for you. </p> <h4>REOPS and the MediaFactory class</h4> <p> The REOPS project uses a custom REMediaFactory that extends MediaFactory to enable it to provide some advanced capabilities that will be covered in future articles (see Figure 7). The REOPS also implements connection sharing using a built in feature of the OSMF.</p> </div> </div> <a name="articlecontentAdobe_image_5" style="visibility:hidden"></a><div class="parbase image section"> <img title="MediaFactory's place in the REOPS architecture" alt="MediaFactory's place in the REOPS architecture" class="cq-dd-image LayoutRow LayoutImage LayoutCellSides" src="/web/20120303042410im_/http://www.adobe.com/content/dotcom/en/devnet/flash/articles/reops_pt2/_jcr_content/articlecontentAdobe/image_5.adimg.mw.390.jpg/1279001480641.jpg"/> <div class="TextSmall LayoutCellSides LayoutRowTop LayoutBigRowBottom"> Figure 7. MediaFactory's place in the REOPS architecture </div> </div> <a name="articlecontentAdobe_text_22" style="visibility:hidden"></a><div class="text parbase section"> <div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium"> <h4>Connection sharing and the NetConnectionFactory</h4> <p> The REOPS project uses the NetConnectionFactory to implement connection sharing in the player (see Figure 8). The REMediaFactory constructor method can receive a NetConnectionFactory object as a parameter. The NetConnectionFactory can be used to generate NetConnection instances and manage connection sharing between MediaElements. It does this by comparing the URLs resource of MediaElements to determine what connections can be shared. </p> </div> </div> <a name="articlecontentAdobe_image_6" style="visibility:hidden"></a><div class="parbase image section"> <img title="NetConnectionFactory's place in the REOPS architecture" alt="NetConnectionFactory's place in the REOPS architecture" class="cq-dd-image LayoutRow LayoutImage LayoutCellSides" src="/web/20120303042410im_/http://www.adobe.com/content/dotcom/en/devnet/flash/articles/reops_pt2/_jcr_content/articlecontentAdobe/image_6.adimg.mw.390.jpg/1279001528254.jpg"/> <div class="TextSmall LayoutCellSides LayoutRowTop LayoutBigRowBottom"> Figure 8. NetConnectionFactory's place in the REOPS architecture </div> </div> <a name="articlecontentAdobe_text_23" style="visibility:hidden"></a><div class="text parbase section"> <div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium"> <p> The following code snippet shows how simple it is to use the NetConnection manager to enable connection sharing in a player:</p> </div> </div> <a name="articlecontentAdobe_codeblock_13" style="visibility:hidden"></a><div class="parbase codeblock compbase section"> <div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow"> <code class="CodeBlock">var netConnectionFactory:NetConnectionFactory = new NetConnectionFactory(); var mediaFactory:REMediaFactory = new REMediaFactory( netConnectionFactory );</code> </div> </div> <a name="articlecontentAdobe_numberedheader_3" style="visibility:hidden"></a><div class="parbase compbase numberedheader section"> <h3 class="TextH3 LayoutCellSides LayoutRow"> Configuring a new REOPS player </h3> </div> <a name="articlecontentAdobe_text_24" style="visibility:hidden"></a><div class="text parbase section"> <div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium"> <p> You should have a good idea of the major components in an OSMF player and how the REOPS player is built using the OSMF. In this section we're going to show you how to set up the REOPS player via XML configuration and then deploy the player with the new configuration.</p> <h4> Setting up the REOPS XML configuration</h4> <p> A Flex project archive file has been provided as a starting point for this walkthrough. It can be found in the <a href="https://web.archive.org/web/20120303042410/http://code.google.com/p/reops/downloads/list" target="_blank">REOPS Google Code project downloads list</a>; the archive is called MyREOPS_start.zip. The project includes a few things to make it quick and easy to get a REOPS player up and running:</p> <ul> <li><b>src/MyREOPS.as:</b> The main application file. There isn't much code because the class extends the REOPS class from the library.</li> <li><b>libs/REOPSLib.swc:</b> A SWC file of the REOPS project code (this can also be downloaded on the <a href="https://web.archive.org/web/20120303042410/http://code.google.com/p/reops/downloads/list" target="_blank">Google code project downloads list</a>)</li> <li><b> assets/data directory:</b> A start file for the XML configuration.</li> <li><b>assets/skins directory:</b> Skins delivered with the REOPS.</li> </ul> <h4> Using the REOPS configuration XML</h4> <p> Follow these steps to use the REOPS configuration XML:</p> <ol> <li>Import the project into Flash Builder.</li> <li>Copy the OSMF SWC file from the code you should have downloaded from the OSMF site into the libs directory.</li> <li>Run the MyREOPS project. You should see a video play (see Figure 9).</li> </ol> </div> </div> <a name="articlecontentAdobe_image_7" style="visibility:hidden"></a><div class="parbase image section"> <img title="Video playing in the initial build of MyREOPS" alt="Video playing in the initial build of MyREOPS" class="cq-dd-image LayoutRow LayoutImage LayoutCellSides" src="/web/20120303042410im_/http://www.adobe.com/content/dotcom/en/devnet/flash/articles/reops_pt2/_jcr_content/articlecontentAdobe/image_7.adimg.mw.600.jpg/1279001678176.jpg"/> <div class="TextSmall LayoutCellSides LayoutRowTop LayoutBigRowBottom"> Figure 9. Video playing in the initial build of MyREOPS </div> </div> <a name="articlecontentAdobe_text_25" style="visibility:hidden"></a><div class="text parbase section"> <div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium"> <ol start="4"> <li>Open the reosmf_config.xml file in <kbd>assets/data</kbd> directory. This file is a good, basic configuration that sets up all the basic elements for a simple player.<p class="note"><b>Note:</b> Additional nodes and attributes can be applied to add more functionality. More information will eventually be posted on the <a target="_blank" href="https://web.archive.org/web/20120303042410/http://code.google.com/p/reops/w/list">Google Code wiki page</a>.</p> <ul> <li>The <code><player></code> node handles the player sizing and scale mode.</li> <li>The <code><mediaElement></code> and its child <code><mediaElement></code> node handle the initial media that is displayed by the player.</li> <li>The <code><skin></code> node configures the elements of the skin:<ul> <li>What skin SWF file to use</li> <li>Positioning of skin elements such as the control bar and loading icon</li> </ul> </li> </ul> </li> </ol> <h4>Changing the size of the player</h4> <p>Follow these steps to change the size of the player:</p> <ol> <li>In the reosmf_config.xml file, change the width attribute value to be <b>768</b> and the height to be <b>600</b>:</li> </ol> </div> </div> <a name="articlecontentAdobe_codeblock_14" style="visibility:hidden"></a><div class="parbase codeblock compbase section"> <div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow"> <code class="CodeBlock"><player width="768" height="600" scaleMode="stretch" isLive="false" autoPlay="true" updateInterval="250" hasCaptions="false"></code> </div> </div> <a name="articlecontentAdobe_text_26" style="visibility:hidden"></a><div class="text parbase section"> <div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium"> <ol start="2"> <li>Save the file.</li> <li> Run the application. The player and video should now display at the larger size (see Figure 10).</li> </ol> </div> </div> <a name="articlecontentAdobe_image_8" style="visibility:hidden"></a><div class="parbase image section"> <img title="Figure 10. The video, adjusted to a larger size" alt="Figure 10. The video, adjusted to a larger size" class="cq-dd-image LayoutRow LayoutImage LayoutCellSides" src="/web/20120303042410im_/http://www.adobe.com/content/dotcom/en/devnet/flash/articles/reops_pt2/_jcr_content/articlecontentAdobe/image_8.adimg.mw.600.jpg/1279001898946.jpg"/> <div class="TextSmall LayoutCellSides LayoutRowTop LayoutBigRowBottom"> Figure 10. The video, adjusted to a larger size </div> </div> <a name="articlecontentAdobe_text_27" style="visibility:hidden"></a><div class="text parbase section"> <div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium"> <h4>Changing the scale mode</h4> <p> Follow these steps to change the scale mode:</p> <ol> <li> Return to the reosmf_config.xml file.</li> <li>Change the scaleMode attribute value in the <code><player></code> node from <b>stretch</b> to <b>letterbox</b>. <p class="note"> <b>Note:</b> Valid values for <code>scaleMode</code> are none, stretch, letterbox and zoom. For details on how each is handled, see the org.osmf.display.ScaleMode class.</p> </li> </ol> </div> </div> <a name="articlecontentAdobe_codeblock_15" style="visibility:hidden"></a><div class="parbase codeblock compbase section"> <div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow"> <code class="CodeBlock"><player width="768" height="600" scaleMode="letterbox" isLive="false" autoPlay="true" updateInterval="250" hasCaptions="false"></code> </div> </div> <a name="articlecontentAdobe_text_28" style="visibility:hidden"></a><div class="text parbase section"> <div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium"> <ol start="3"> <li>Save the file.</li> <li>Run the application. The video should now be presented in a much nicer letterbox format (see Figure 11).</li> </ol> </div> </div> <a name="articlecontentAdobe_image_9" style="visibility:hidden"></a><div class="parbase image section"> <img title="The video, played in letterbox format" alt="The video, played in letterbox format" class="cq-dd-image LayoutRow LayoutImage LayoutCellSides" src="/web/20120303042410im_/http://www.adobe.com/content/dotcom/en/devnet/flash/articles/reops_pt2/_jcr_content/articlecontentAdobe/image_9.adimg.mw.600.jpg/1279002227826.jpg"/> <div class="TextSmall LayoutCellSides LayoutRowTop LayoutBigRowBottom"> Figure 11. The video, played in letterbox format </div> </div> <a name="articlecontentAdobe_text_29" style="visibility:hidden"></a><div class="text parbase section"> <div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium"> <h4> Changing the default MediaElement</h4> <p> Follow these steps to change the default MediaElement:</p> <ol> <li>Return to the reosmf_config.xml file.</li> <li>To change the media from RTMP streaming to remote progressive video, locate the <code><mediaElement></code> node. Update the <code><media></code> node's <code>url</code> property to the URL shown:</li> </ol> </div> </div> <a name="articlecontentAdobe_codeblock_16" style="visibility:hidden"></a><div class="parbase codeblock compbase section"> <div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow"> <code class="CodeBlock"><mediaElement> <mediaElement> <media url="http://mediapm.edgesuite.net/strobe/content/test/AFaerysTale_sylviaApostol_640_500_short.flv" /> </mediaElement> </mediaElement></code> </div> </div> <a name="articlecontentAdobe_text_30" style="visibility:hidden"></a><div class="text parbase section"> <div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium"> <ol start="3"> <li>Save the file.</li> <li>Run the application. The new video should play (see Figure 12).</li> </ol> </div> </div> <a name="articlecontentAdobe_image_10" style="visibility:hidden"></a><div class="parbase image section"> <img title="The player, pointed to a diferent video" alt="The player, pointed to a diferent video" class="cq-dd-image LayoutRow LayoutImage LayoutCellSides" src="/web/20120303042410im_/http://www.adobe.com/content/dotcom/en/devnet/flash/articles/reops_pt2/_jcr_content/articlecontentAdobe/image_10.adimg.mw.600.jpg/1279002384089.jpg"/> <div class="TextSmall LayoutCellSides LayoutRowTop LayoutBigRowBottom"> Figure 12. The player, pointed to a diferent video </div> </div> <a name="articlecontentAdobe_text_31" style="visibility:hidden"></a><div class="text parbase section"> <div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium"> <h4>Setting the player skin</h4> <p>Follow these steps to change the player skin:</p> <ol> <li>Return to the reosmf_config.xml file.</li> <li>Update the <code>path</code> attribute of the <code><skin></code> node from:<p><code><skin path="assets/skins/RE_Skin.swf"></code></p> <p>to:</p> <code><skin path="assets/skins/Lunar.swf"></code><p class="note"><b>Note:</b> You can try the Core.swf and Formula.swf skin files as well.</p> </li> <li>Save the file.</li> <li>Run the application. You should see the different skin for the control bar (see Figure 13).</li> </ol> </div> </div> <a name="articlecontentAdobe_image_11" style="visibility:hidden"></a><div class="parbase image section"> <img title="The player with a new skin swapped in via XML" alt="The player with a new skin swapped in via XML" class="cq-dd-image LayoutRow LayoutImage LayoutCellSides" src="/web/20120303042410im_/http://www.adobe.com/content/dotcom/en/devnet/flash/articles/reops_pt2/_jcr_content/articlecontentAdobe/image_11.adimg.mw.600.jpg/1279002563822.jpg"/> <div class="TextSmall LayoutCellSides LayoutRowTop LayoutBigRowBottom"> Figure 13. The player with a new skin swapped in via XML </div> </div> <a name="articlecontentAdobe_text_32" style="visibility:hidden"></a><div class="text parbase section"> <div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium"> <h4>Positioning and auto-hiding the control bar</h4> <p> Follow these steps to position and auto-hide the control bar:</p> <ol> <li>Return to the reosmf_config.xml file.</li> <li>Locate the <code><skinElement></code> node with the id of <code>controlBar</code>.</li> <li>Update the <code>vAdjust</code> attribute value to be <b>–180</b>:</li> </ol> </div> </div> <a name="articlecontentAdobe_codeblock_17" style="visibility:hidden"></a><div class="parbase codeblock compbase section"> <div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow"> <code class="CodeBlock"><skinElement id="controlBar" elementClass="com.realeyes.osmfplayer.controls.ControlBar" initMethod="initControlBarInstance" scaleMode="none" hAdjust="0" vAdjust="-180" hAlign="center" vAlign="bottom" autoPosition="true" draggable="true" autoHide="false" /></code> </div> </div> <a name="articlecontentAdobe_text_33" style="visibility:hidden"></a><div class="text parbase section"> <div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium"> <ol start="4"> <li>Update the attribute value of <code>autoHide</code> to be true:</li> </ol> </div> </div> <a name="articlecontentAdobe_codeblock_18" style="visibility:hidden"></a><div class="parbase codeblock compbase section"> <div class="PanelFillLight PanelBevelTop LayoutCell LayoutRow"> <code class="CodeBlock"><skinElement id="controlBar" elementClass="com.realeyes.osmfplayer.controls.ControlBar" initMethod="initControlBarInstance" scaleMode="none" hAdjust="0" vAdjust="-180" hAlign="center" vAlign="bottom" autoPosition="true" draggable="true" autoHide="true" /></code> </div> </div> <a name="articlecontentAdobe_text_34" style="visibility:hidden"></a><div class="text parbase section"> <div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium"> <ol start="5"> <li>Save the file.</li> <li>Run the application. The control bar should now be positioned over the video at the bottom (see Figure 14). </li> </ol> </div> </div> <a name="articlecontentAdobe_image_12" style="visibility:hidden"></a><div class="parbase image section"> <img title="The video with control bar positioned over the bottom" alt="The video with control bar positioned over the bottom" class="cq-dd-image LayoutRow LayoutImage LayoutCellSides" src="/web/20120303042410im_/http://www.adobe.com/content/dotcom/en/devnet/flash/articles/reops_pt2/_jcr_content/articlecontentAdobe/image_12.adimg.mw.600.jpg/1279002777910.jpg"/> <div class="TextSmall LayoutCellSides LayoutRowTop LayoutBigRowBottom"> Figure 14. The video with control bar positioned over the bottom </div> </div> <a name="articlecontentAdobe_text_35" style="visibility:hidden"></a><div class="text parbase section"> <div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium"> <p>Also, if you move your mouse away from the player the control bar should auto-hide after a short period of time. The control bar should also be visible if you roll over the player again.</p> <h3>Deploying the REOPS player</h3> <p>Deploying the REOPS player is a simple process of gathering the necessary files and transferring them to your web server. Minimally you will need the following files for a REOPS deployment:</p> <ul> <li>HTML page to display the player</li> <li>Player SWF file</li> <li>XML configuration file</li> <li>Skin SWF file</li> </ul> <p>If you use the files from the MyREOPS walkthrough project, you can deploy the REOPS player by uploading the following files from the bin-debug directory to a web server:</p> <ul> <li><kbd>assets/data</kbd> directory, which includes the configuration file</li> <li><kbd>assets/skin/</kbd> directory, which includes the skin SWF files (you can remove the unused skin SWF files)</li> <li>MyREOPS.html</li> <li>MyREOPS.swf</li> <li>swfobject.js</li> </ul> <h3>Where to go from here</h3> <p>The RealEyes OSMF Player Sample leverages some built-in tools provided by the OSMF to make developing media players a less painful and more consistent process. You should have a good idea about how the REOPS uses the OSMF to create a very configurable and flexible media player. Using the external XML configuration file, you should also be able to set up a single player SWF file for multiple uses and deployments quickly and easily.</p> <p>In this article, we also covered some of the core concepts and components that are needed to build a media player using the OSMF:</p> <ul> <li>The MediaPlayerSprite</li> <li>MediaElements</li> <li>Traits</li> <li>The MediaContainer</li> <li>The MediaFacatory</li> <li>The NetConnectionFactory</li> </ul> <p>This information should help you to build your own media players using the OSMF, even if you don't use the REOPS project as a starting point.</p> <p>In <a href="/web/20120303042410/http://www.adobe.com/devnet/flash/articles/reops_pt3.html">Part 3</a> we will explain in detail the control bar and skinning system built into the REOPS project.</p> </div> </div> <a name="articlecontentAdobe_reference" style="visibility:hidden"></a><div class="parbase section reference"><div style="display:inline;" class="cq-dd-paragraph"><div class="text parbase"> <div class="Semantic LayoutCellSides LayoutBreakAfter TextMedium"> <p><a target="_blank" href="https://web.archive.org/web/20120303042410/http://creativecommons.org/licenses/by-nc-sa/3.0/"><img src="https://web.archive.org/web/20120303042410im_/http://cookbooks.adobe.com/resources/images/license_creative_commons.png" alt="Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License"></a>+<a target="_blank" href="/web/20120303042410/http://www.adobe.com/communities/guidelines/ccplus/commercialcode_plus_permission.html"><img src="https://web.archive.org/web/20120303042410im_/http://cookbooks.adobe.com/resources/images/license_adobe.jpg" alt="Adobe Commercial Rights"></a></p> <p>This work is licensed under a <a target="_blank" href="https://web.archive.org/web/20120303042410/http://creativecommons.org/licenses/by-nc-sa/3.0/">Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License</a>. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at <a target="_blank" href="/web/20120303042410/http://www.adobe.com/communities/guidelines/ccplus/commercialcode_plus_permission.html">Adobe</a>.</p> </div> </div> </div></div> </div></div> <div class="LayoutRow"> <div class="articlePaging paging"> </div> </div> </div> </div> <div class="ArticleWideGrid-5-6 ArticleWideRight"> <div class="LayoutBreakAfter RuleH ArticleWideRuleHide TextSmall LayoutBreak"> <div class="ArticleGrid-2-3 ArticleWideGridColReset"> <div class="morelikethis"> <div class="LayoutCellSides"> <h2 class="TextH5 LayoutRow">More Like This</h2> <ul class="LayoutRow"> <li class="LayoutSmallRowBottom"> <a href="/web/20120303042410/http://www.adobe.com/devnet/flash/articles/dynamic_sound_generation.html" title="Generating sounds dynamically in Flash Player 10">Generating sounds dynamically in Flash Player 10</a> </li> <li class="LayoutSmallRowBottom"> <a href="/web/20120303042410/http://www.adobe.com/devnet/flash/articles/custom_flvcomp.html" title="Customizing the FLVPlayback component">Customizing the FLVPlayback component</a> </li> <li class="LayoutSmallRowBottom"> <a href="/web/20120303042410/http://www.adobe.com/devnet/flash/articles/web_audio.html" title="Producing audio for the web using Soundbooth and Flash">Producing audio for the web using Soundbooth and Flash</a> </li> <li class="LayoutSmallRowBottom"> <a href="/web/20120303042410/http://www.adobe.com/devnet/flash/articles/reops_pt1.html" title="RealEyes OSMF Player Sample – Part 1: Setup and deployment">RealEyes OSMF Player Sample – Part 1: Setup and deployment</a> </li> <li class="LayoutSmallRowBottom"> <a href="/web/20120303042410/http://www.adobe.com/devnet/flash/articles/webcam_motion.html" title="Webcam Motion Detection: Using the BitmapData API in Flash 8">Webcam Motion Detection: Using the BitmapData API in Flash 8</a> </li> <li class="LayoutSmallRowBottom"> <a href="/web/20120303042410/http://www.adobe.com/devnet/flash/articles/vidtemplate_corppreso.html" title="Web video template: Spokesperson presentation with synchronized graphics">Web video template: Spokesperson presentation with synchronized graphics</a> </li> <li class="LayoutSmallRowBottom"> <a href="/web/20120303042410/http://www.adobe.com/devnet/flash/articles/vidtemplate_mediapreso.html" title="Flash video template: Video presentation with navigation">Flash video template: Video presentation with navigation</a> </li> <li class="LayoutSmallRowBottom"> <a href="/web/20120303042410/http://www.adobe.com/devnet/flash/articles/vidtemplate_vidshowcase.html" title="Web video template: Showcase website for personal video">Web video template: Showcase website for personal video</a> </li> <li class="LayoutSmallRowBottom"> <a href="/web/20120303042410/http://www.adobe.com/devnet/flash/articles/flvplayback_fplayer9u3.html" title="Using the FLVPlayback component with Flash Player 9 Update 3">Using the FLVPlayback component with Flash Player 9 Update 3</a> </li> <li class="LayoutSmallRowBottom"> <a href="/web/20120303042410/http://www.adobe.com/devnet/flash/articles/flash_video_3d.html" title="Mapping Flash video to 3D objects">Mapping Flash video to 3D objects</a> </li> </ul> </div> </div> </div> <div class="ArticleGrid-4 ArticleWideGridColReset"> <div class="LayoutRow"> <div class="parbase compbase inheritedpromo"> </div> </div> </div> </div> <div class="LayoutBreakAfter TextSmall"> <div class="ArticleGrid-2 LayoutSlimGrid-1-2 ArticleWideGridColReset"> <div class="parsys inheritedresources inheritedResources"> <div class="parsys inheritedresources"> </div> </div> </div> <div class="ArticleGrid-3 LayoutSlimGrid-1-2 ArticleWideGridColReset"> <div class="parsys inheritedresources inheritedResources2"> <div class="parsys"><div id="inheritedResources2"> <div class="rss section"><div id="rss-feed-1288127978931" class="RSSFeed "> <div pathtomoretext="moreText" class="LayoutRow LayoutBreakAfter TextH5"> <table style="width: 100%;"> <tbody> <tr> <td class="LayoutCellSides LayoutSmallCellVSides PanelFillDark"> <h2 class="TextH5"> Flash User Forum</h2> </td> <td class="LayoutCellSides LayoutSmallCellVSides RouterButton RouterMore" style="width: 40px"> <a class="RouterLink" href="https://web.archive.org/web/20120303042410/http://forums.adobe.com/community/flash/flash_general" target="_self">More</a> </td> </tr> </tbody> </table> </div> <div class="LayoutRowBottom LayoutCellSides TextSmall"> <table> <tr> <th class="TableCell TableNumber shortDateFormat"> 02/28/2012</th> <td> <a class="" href="https://web.archive.org/web/20120303042410/http://forums.adobe.com/thread/969003" target="_self">Text editable in images in flash Please help</a> </td> </tr> <tr> <th class="TableCell TableNumber shortDateFormat"> 02/28/2012</th> <td> <a class="" href="https://web.archive.org/web/20120303042410/http://forums.adobe.com/thread/968926" target="_self">building arrays and comparing the contents</a> </td> </tr> <tr> <th class="TableCell TableNumber shortDateFormat"> 02/28/2012</th> <td> <a class="" href="https://web.archive.org/web/20120303042410/http://forums.adobe.com/thread/968912" target="_self">Poor quality motion tween with png image, tried "Trace Bitmap", but then it looks like a newspaper</a> </td> </tr> <tr> <th class="TableCell TableNumber shortDateFormat"> 02/25/2012</th> <td> <a class="" href="https://web.archive.org/web/20120303042410/http://forums.adobe.com/thread/967540" target="_self">projector for lion</a> </td> </tr> </table> </div> </div> </div> </div></div> </div> </div> <div class="ArticleGrid-4 LayoutSlimGrid-1-2 ArticleWideGridColReset"> <div class="parsys inheritedResources3 inheritedresources"> <div class="parsys"><div id="inheritedResources3"> <div class="rss section"><div id="rss-feed-1288127990519" class="RSSFeed "> <div pathtomoretext="moreText" class="LayoutRow LayoutBreakAfter TextH5"> <table style="width: 100%;"> <tbody> <tr> <td class="LayoutCellSides LayoutSmallCellVSides PanelFillDark"> <h2 class="TextH5"> Flash Cookbooks</h2> </td> <td class="LayoutCellSides LayoutSmallCellVSides RouterButton RouterMore" style="width: 40px"> <a class="RouterLink" href="https://web.archive.org/web/20120303042410/http://cookbooks.adobe.com/" target="_self">More</a> </td> </tr> </tbody> </table> </div> <div class="LayoutRowBottom LayoutCellSides TextSmall"> <table> <tr> <th class="TableCell TableNumber shortDateFormat"> 02/13/2012</th> <td> <a class="" href="https://web.archive.org/web/20120303042410/http://cookbooks.adobe.com/post_Randomize_an_array-19625.html" target="_self">Randomize an array</a> </td> </tr> <tr> <th class="TableCell TableNumber shortDateFormat"> 02/11/2012</th> <td> <a class="" href="https://web.archive.org/web/20120303042410/http://cookbooks.adobe.com/post_How_to_create_a_Facebook_fan_page_with_Flash-19621.html" target="_self">How to create a Facebook fan page with Flash</a> </td> </tr> <tr> <th class="TableCell TableNumber shortDateFormat"> 02/08/2012</th> <td> <a class="" href="https://web.archive.org/web/20120303042410/http://cookbooks.adobe.com/post_Digital_Clock-19611.html" target="_self">Digital Clock</a> </td> </tr> <tr> <th class="TableCell TableNumber shortDateFormat"> 01/18/2012</th> <td> <a class="" href="https://web.archive.org/web/20120303042410/http://cookbooks.adobe.com/post_Recording_webcam_video___audio_in_a_flv_file_on_lo-17382.html" target="_self">Recording webcam video & audio in a flv file on local drive</a> </td> </tr> </table> </div> </div> </div> </div></div> </div> </div> </div> </div>  <div class="TextSmall LayoutRow LayoutGridBreak LayoutBreakAfter"> <div class="commentlist articleCommentList"> <div id="articleRankAndCommentList"></div> <script type="text/javascript"> ionReadyLoad(function(){ var badge = new ionBadge(); badge.anchor = document.getElementById("articleRankAndCommentSummary"); badge.container = document.getElementById("articleRankAndCommentList"); badge.locale = "en_US"; badge.productLabel = "product_flash_lr"; badge.siteArea = "DevNet"; badge.system = "adc"; badge.disableFeedback = false; badge.commenting = true; badge.rating = false; badge.url = window.location.href.replace(window.location.search, ""); badge.timeOutDelay = 30000; badge.maxCommentLength = 100; badge.load(); }); </script> </div> </div> </div> </div> </div> <div class="PrintLayoutHide">  <script type="text/javascript"> var hideEvidon = false; $(document).ready(adobe.fn.initGlobalFooter); changeRegion = adobe.fn.changeRegionFooter; </script>   <div id="SiteFooter" class="SiteFooter Text TextSmall TextInvert Link LayoutBreak"> <div class="LayoutBreakAfter"> <div class="LayoutGrid-1 LayoutSlimGrid-1 LinkInvert"> <div class="LayoutCellSides LayoutCellTop"> <h4><a href="/web/20120303042410/http://www.adobe.com/go/gffooter_products">Products</a></h4> <ul class="SiteFooterLinkList"> <li><a class="icon Icon SiteFooterMenuItemIconProducts SiteFooterMenuItemIconMobile" href="/web/20120303042410/http://www.adobe.com/go/gffooter_touchapps">Adobe Touch Apps</a></li> <li><a class="icon Icon SiteFooterMenuItemIconProducts SiteFooterMenuItemIconAcrobat" href="/web/20120303042410/http://www.adobe.com/go/gffooter_acrobat_family">Acrobat</a></li> <li><a class="icon Icon SiteFooterMenuItemIconProducts SiteFooterMenuItemIconCS" href="/web/20120303042410/http://www.adobe.com/go/gffooter_creative_suite">Creative Suite</a></li> <li><a class="icon Icon SiteFooterMenuItemIconProducts SiteFooterMenuItemIconOMS" href="/web/20120303042410/http://www.adobe.com/go/gffooter_online_marketing_suite">Digital Marketing Suite</a></li> <li><a class="icon Icon SiteFooterMenuItemIconProducts SiteFooterMenuItemIconDPS" href="/web/20120303042410/http://www.adobe.com/go/gffooter_digital_publishing_suite">Digital Publishing Suite</a></li> <li><a class="icon Icon SiteFooterMenuItemIconProducts SiteFooterMenuItemIconElements" href="/web/20120303042410/http://www.adobe.com/go/gffooter_elements">Elements</a></li> <li><a class="icon Icon SiteFooterMenuItemIconProducts SiteFooterMenuItemIconMobile" href="/web/20120303042410/http://www.adobe.com/go/gffooter_mobile_apps">Mobile Apps</a></li> <li><a class="icon Icon SiteFooterMenuItemIconProducts SiteFooterMenuItemIconPS" href="/web/20120303042410/http://www.adobe.com/go/gffooter_photoshop_family">Photoshop</a></li> </ul> </div> </div> <div class="LayoutGrid-2 LayoutSlimGrid-2 LinkInvert"> <div class="LayoutCellSides LayoutCellTop"> <h4><a href="/web/20120303042410/http://www.adobe.com/go/gffooter_solutions">Solutions</a></h4> <ul class="SiteFooterLinkList"> <li><a href="/web/20120303042410/http://www.adobe.com/go/gffooter_online_marketing">Digital marketing</a></li> <li><a href="/web/20120303042410/http://www.adobe.com/go/gffooter_content_authoring">Digital media</a></li> <li><a href="/web/20120303042410/http://www.adobe.com/go/gffooter_web_experience_management">Web Experience Management</a></li> </ul> <h4><a href="/web/20120303042410/http://www.adobe.com/go/gffooter_industries">Industries</a></h4> <ul class="SiteFooterLinkList SiteFooterLinkListBottom"> <li><a href="/web/20120303042410/http://www.adobe.com/go/gffooter_education">Education</a></li> <li><a href="/web/20120303042410/http://www.adobe.com/go/gffooter_financial_services">Financial services</a></li> <li><a href="/web/20120303042410/http://www.adobe.com/go/gffooter_government">Government</a></li> </ul> </div> </div> <div class="LayoutGrid-3 LayoutSlimGrid-1 LinkInvert"> <div class="LayoutCellSides LayoutCellTop"> <h4><a href="/web/20120303042410/http://www.adobe.com/go/gffooter_help">Help</a></h4> <ul class="SiteFooterLinkList"> <li><a href="/web/20120303042410/http://www.adobe.com/go/gffooter_product_help_centers">Product help centers</a></li> <li><a href="/web/20120303042410/http://www.adobe.com/go/gffooter_order_return">Orders and returns</a></li> <li><a href="/web/20120303042410/http://www.adobe.com/go/gffooter_download_install">Downloading and installing</a></li> <li><a href="/web/20120303042410/http://www.adobe.com/go/gffooter_myadobe">My Adobe</a></li> </ul> <h4><a href="/web/20120303042410/http://www.adobe.com/go/gffooter_learning">Learning</a></h4> <ul class="SiteFooterLinkList SiteFooterLinkListBottom"> <li><a href="/web/20120303042410/http://www.adobe.com/go/gffooter_adobe_developer_connection">Adobe Developer Connection</a></li> <li><a href="/web/20120303042410/http://www.adobe.com/go/gffooter_adobetv">Adobe TV</a></li> <li><a href="/web/20120303042410/http://www.adobe.com/go/gffooter_training_certification">Training and certification</a></li> <li><a href="/web/20120303042410/http://www.adobe.com/go/gffooter_forums">Forums</a></li> <li><a href="/web/20120303042410/http://www.adobe.com/go/gffooter_design_center">Design Center</a></li> </ul> </div> </div> <div class="LayoutGrid-4 LayoutSlimGrid-2 LinkInvert"> <div class="LayoutCellSides LayoutCellTop"> <h4><a href="/web/20120303042410/http://www.adobe.com/go/gffooter_buy">Ways to buy</a></h4> <ul class="SiteFooterLinkList"> <li><a href="/web/20120303042410/http://www.adobe.com/go/gffooter_homeuse">For personal and home office</a></li> <li><a href="/web/20120303042410/http://www.adobe.com/go/gffooter_students_store">For students, educators, and staff</a></li> <li><a href="/web/20120303042410/http://www.adobe.com/go/gffooter_small_medium_business">For small and medium businesses</a></li> <li><a href="/web/20120303042410/http://www.adobe.com/go/gffooter_licensingprograms">For businesses, schools, and government</a></li> <li><a href="/web/20120303042410/http://www.adobe.com/go/gffooter_special_offers">Special offers</a></li> </ul> <h4><a href="/web/20120303042410/http://www.adobe.com/go/gffooter_downloads">Downloads</a></h4> <ul class="SiteFooterLinkList SiteFooterLinkListBottom"> <li><a href="/web/20120303042410/http://www.adobe.com/go/gffooter_adobe_reader">Adobe Reader</a></li> <li><a href="/web/20120303042410/http://www.adobe.com/go/gffooter_adobe_flashplayer">Adobe Flash Player</a></li> <li><a href="/web/20120303042410/http://www.adobe.com/go/gffooter_adobe_air">Adobe AIR</a></li> <li><a href="/web/20120303042410/http://www.adobe.com/go/gffooter_adobe_shockwave_player">Adobe Shockwave Player</a></li> </ul> </div> </div> <div class="LayoutGrid-5 LayoutSlimGrid-1-2 LinkInvert"> <div class="LayoutCellSides LayoutCellTop"> <h4><a href="/web/20120303042410/http://www.adobe.com/go/gffooter_company">Company</a></h4> <ul class="SiteFooterLinkList"> <li><a href="/web/20120303042410/http://www.adobe.com/go/gffooter_news_room">News room</a></li> <li><a href="/web/20120303042410/http://www.adobe.com/go/gffooter_partner_programs">Partner programs</a></li> <li><a href="/web/20120303042410/http://www.adobe.com/go/gffooter_corporate_social_responsibility">Corporate social responsibility</a></li> <li><a href="/web/20120303042410/http://www.adobe.com/go/gffooter_career_opportunities">Career opportunities</a></li> <li><a href="/web/20120303042410/http://www.adobe.com/go/gffooter_investor_relation">Investor Relations</a></li> <li><a href="/web/20120303042410/http://www.adobe.com/go/gffooter_events">Events</a></li> <li><a href="/web/20120303042410/http://www.adobe.com/go/gffooter_legal">Legal</a></li> <li><a href="/web/20120303042410/http://www.adobe.com/go/gffooter_contact_adobe">Contact Adobe</a></li> </ul> </div> </div> <div class="LayoutGridBreak"> <div class="LayoutCellSides LayoutCellBottom"> <div class="SiteFooterRegionSelector TextInvert LinkInvert LinkStrong"> <a href="/web/20120303042410/http://www.adobe.com/go/gffooter_choose_region" id="sfRegion" class="SiteFooterMenuItemIcon SiteFooterMenuItemIconRegionBlue">Choose your region</a> <span id="sfRegionSet" class="SiteFooterMenuItemIcon SiteFooterMenuItemIconRegionBlack" style="display: none;">United States <a href="/web/20120303042410/http://www.adobe.com/go/gffooter_choose_region" id="sfRegionChange">(Change)</a></span> </div> <div class="SiteFooterRegionPanel SiteFooterRegionPanelEvidon" id="RegionPanel" style="display: none;"> <div class="SiteFooterRegionPanelHeader"> <span class="SiteFooterMenuItemIcon SiteFooterMenuItemIconRegionBlack">Choose your region</span> <a id="sfRegionClose" class="SiteFooterRegionPanelHeaderClose">Close</a> </div> <div class="Column"> <div class="Column-1"> <p class="SiteFooterRegionPanelRegionHeader">North America</p> </div> <div class="Column-2-3"> <p class="SiteFooterRegionPanelRegionHeader">Europe, Middle East and Africa</p> </div> <div class="Column-4"> <p class="SiteFooterRegionPanelRegionHeader">Asia Pacific</p> </div> <div class="Column-1"> <ul> <li lang="en"><a onclick="changeRegion('ca');">Canada - English</a></li> <li lang="fr"><a onclick="changeRegion('ca_fr');">Canada - Français</a></li> <li lang="es"><a onclick="changeRegion('la');">Latinoamérica</a></li> <li lang="es"><a onclick="changeRegion('mx');">México</a></li> <li lang="en"><a onclick="changeRegion('us');">United States</a></li> </ul> <p class="SiteFooterRegionPanelRegionHeader">South America</p> <ul> <li lang="pt"><a onclick="changeRegion('br');">Brasil</a></li> </ul> </div> <div class="Column-2"> <ul> <li lang="en"><a onclick="changeRegion('africa');">Africa - English</a></li> <li lang="de"><a onclick="changeRegion('at');">Österreich - Deutsch</a></li> <li lang="en"><a onclick="changeRegion('be_en');">Belgium - English</a></li> <li lang="fr"><a onclick="changeRegion('be_fr');">Belgique - Français</a></li> <li lang="nl"><a onclick="changeRegion('be_nl');">België - Nederlands</a></li> <li lang="bg"><a onclick="changeRegion('bg');">България</a></li> <li lang="hr"><a onclick="changeRegion('hr');">Hrvatska</a></li> <li lang="cs"><a onclick="changeRegion('cz');">Česká republika</a></li> <li lang="da"><a onclick="changeRegion('dk');">Danmark</a></li> <li lang="en"><a onclick="changeRegion('eeurope');">Eastern Europe - English</a></li> <li lang="et"><a onclick="changeRegion('ee');">Eesti</a></li> <li lang="fi"><a onclick="changeRegion('fi');">Suomi</a></li> <li lang="fr"><a onclick="changeRegion('fr');">France</a></li> <li lang="de"><a onclick="changeRegion('de');">Deutschland</a></li> <li lang="hu"><a onclick="changeRegion('hu');">Magyarország</a></li> <li lang="en"><a onclick="changeRegion('ie');">Ireland</a></li> <li lang="en"><a onclick="changeRegion('il_en');">Israel - English</a></li> <li lang="it"><a onclick="changeRegion('it');">Italia</a></li> <li lang="lv"><a onclick="changeRegion('lv');">Latvija</a></li> <li lang="lt"><a onclick="changeRegion('lt');">Lietuva</a></li> <li lang="de"><a onclick="changeRegion('lu_de');">Luxembourg - Deutsch</a></li> <li lang="en"><a onclick="changeRegion('lu_en');">Luxembourg - English</a></li> </ul> </div> <div class="Column-3"> <ul> <li lang="fr"><a onclick="changeRegion('lu_fr');">Luxembourg - Français</a></li> <li lang="en"><a onclick="changeRegion('mena_en');">Middle East and North Africa - English</a></li> <li lang="fr"><a onclick="changeRegion('mena_fr');">Moyen-Orient et Afrique du Nord - Français</a></li> <li lang="nl"><a onclick="changeRegion('nl');">Nederland</a></li> <li lang="no"><a onclick="changeRegion('no');">Norge</a></li> <li lang="pl"><a onclick="changeRegion('pl');">Polska</a></li> <li lang="pt"><a onclick="changeRegion('pt');">Portugal</a></li> <li lang="ro"><a onclick="changeRegion('ro');">România</a></li> <li lang="ru"><a onclick="changeRegion('ru');">Россия</a></li> <li lang="sr"><a onclick="changeRegion('rs');">Srbija</a></li> <li lang="sk"><a onclick="changeRegion('sk');">Slovensko</a></li> <li lang="sl"><a onclick="changeRegion('si');">Slovenija</a></li> <li lang="es"><a onclick="changeRegion('es');">España</a></li> <li lang="sv"><a onclick="changeRegion('se');">Sverige</a></li> <li lang="de"><a onclick="changeRegion('ch_de');">Schweiz - Deutsch</a></li> <li lang="fr"><a onclick="changeRegion('ch_fr');">Suisse - Français</a></li> <li lang="it"><a onclick="changeRegion('ch_it');">Svizzera - Italiano</a></li> <li lang="tr"><a onclick="changeRegion('tr');">Türkiye</a></li> <li lang="uk"><a onclick="changeRegion('ua');">Україна</a></li> <li lang="en"><a onclick="changeRegion('uk');">United Kingdom</a></li> </ul> </div> <div class="Column-4"> <ul> <li lang="en"><a onclick="changeRegion('au');">Australia</a></li> <li lang="zh"><a onclick="changeRegion('cn');">中国</a></li> <li lang="zh"><a onclick="changeRegion('hk_zh');">中國香港特別行政區</a></li> <li lang="en"><a onclick="changeRegion('hk_en');">Hong Kong S.A.R. of China</a></li> <li lang="en"><a onclick="changeRegion('in');">India - English</a></li> <li lang="ja"><a onclick="changeRegion('jp');">日本</a></li> <li lang="ko"><a onclick="changeRegion('kr');">한국</a></li> <li lang="en"><a onclick="changeRegion('nz');">New Zealand</a></li> <li lang="en"><a onclick="changeRegion('ap');">Pacific - English</a></li> <li lang="zh"><a onclick="changeRegion('tw');">台灣</a></li> </ul> <p class="SiteFooterRegionPanelRegionHeader">Southeast Asia</p> <ul> <li lang="en"><a onclick="changeRegion('sea');">Includes Indonesia, Malaysia, Philippines, Singapore, Thailand, and Vietnam - English</a></li> </ul> </div> </div> </div> </div> </div> <div class="LayoutGridBreak"> <div class="LayoutCellSides"> <hr/> </div> </div> <div class="LayoutGrid-1-4 LayoutSlimGrid-1-2 LinkInvert LinkStrong"> <div class="LayoutCellSides LayoutCellBottom LinkInvert"> <p class="SiteFooterRow TextSmall">Copyright © 2012 Adobe Systems Incorporated. All rights reserved.</p> <p class="SiteFooterRow TextSmall">Use of this website signifies your agreement to the <a href="/web/20120303042410/http://www.adobe.com/go/gffooter_terms_of_use">Terms of Use</a> and <a href="/web/20120303042410/http://www.adobe.com/go/gffooter_online_privacy_policy">Online Privacy Policy</a>.</p> <p class="SiteFooterRow SiteFooterRowTop"><a href="#" id="_bapw-link" class="TextSmall icon Icon SiteFooterMenuItemIconEvidon" style="display:none;">Ad Choices</a></p> </div> </div> <div class="LayoutGrid-5 LayoutSlimGrid-1-2"> <div class="LayoutCell"> <p class="TextRight"><a href="/web/20120303042410/http://www.adobe.com/go/gffooter_trust_icon"><img alt="Reviewed by TRUSTe: site privacy statement" src="/web/20120303042410im_/http://www.adobe.com/include/img/truste_seal_eu.gif"/></a></p> </div> </div> </div> </div>  </div> <div class="parsys templatembox bottomofbodymbox"> <div class="mboxDefault"> </div> <script type="text/javascript"> mboxCreate('defaultmboxname'); </script> </div> <div class="parsys doubleclickfloodlight"> </div>  <script language="JavaScript" type="text/javascript">  </script> <script language="JavaScript" type="text/javascript">  </script> <script language="JavaScript" type="text/javascript">  </script> <noscript> <img src="https://web.archive.org/web/20120303042410im_/http://stats.adobe.com/b/ss/mxmacromedia/1/H.22--NS/0?pageName=WCMS%3A%20Noscript&g=http%3A//www.adobe.com/&ch=WCMS%3A%20noscript&server=WCMS" height="1" width="1" border="0" alt=""/> </noscript>   <script type="text/javascript"> //<![CDATA[ if (isDesktop()) { var scJsHost = (("https:" == document.location.protocol) ? "https://web.archive.org/web/20120303042410/https://www.adobe.com" : "https://web.archive.org/web/20120303042410/http://wwwimages.adobe.com"); document.write(unescape("%3Cscript src='" + scJsHost + "/include/script/foresee/foresee-trigger.js' type='text/javascript'%3E%3C/script%3E")); } //]]> </script> </div> </body> </html>

CINXE.COM

RealEyes OSMF Player Sample – Part 2: Building and configuration | Adobe Developer Connection