Akamai Multi Player User Guide

AkamaiMultiPlayerforAdobeFlash:UserGuide

Page1 2/27/2009


ContentsIntroduction ................................................................................................................................................................ 2

MultiPlayerfeatures.................................................................................................................................................... 2

Playercomponents...................................................................................................................................................... 3

Videodisplay............................................................................................................................................................ 4

Playbackcontrolbar ................................................................................................................................................ 4

Playlistpanel ........................................................................................................................................................... 4

Contextmenu .......................................................................................................................................................... 5

Contentpreparation.................................................................................................................................................... 5

Configurationanddeployment ................................................................................................................................... 5

MultiPlayerconfigurationtool................................................................................................................................. 5

Advancedconfigurationanddeploymentconsiderations....................................................................................... 6

Troubleshooting .......................................................................................................................................................... 7

Debugtracepanel.................................................................................................................................................... 7

AppendixA:Configurationoptions ............................................................................................................................. 8

AppendixB:Exampledeploymentwebpage............................................................................................................ 10

AppendixC:Dynamicstreamswitching .................................................................................................................... 12

AppendixD:References ............................................................................................................................................ 12

Articles ................................................................................................................................................................... 12

Samplecontentlinks.............................................................................................................................................. 13


Page2 2/27/2009

IntroductionThisdocumentisaquickreferenceforusingtheAkamaiMultiPlayerforAdobeFlash.TheAkamaiMultiPlayerisaready‐to‐deploymediaplayerapplicationforFlashmediacontent.Itislight,flexible,andbasedonopen

standards.ThisuserguidewillwalkyouthroughthefeaturesintheAkamaiMultiPlayeranddescribehowtodeployitforusewithyourFlashmediacontent.

MultiPlayerfeaturesTheAkamaiMultiPlayeroffersarobustplatformbasedonAdobeActionScript3fortheplaybackofawidevarietyofstreamingandprogressivemediadeliveredbytheAkamaiplatform.Thefigurebelowshowstheplaybackofa

playlistofon‐demandFlashvideostreamingcontentintheMultiPlayer.

Figure1:TheplaybackofaplaylistthroughtheAkamaiMultiPlayer.

Specificfeaturesinclude:

• Dynamicallyscalable.Allviewsarere‐scaledandpositionedeachtimetheflashplayerisresized.• Twolayoutmodes.Differentlayoutsforthecontrolsandplaylistthatcanbetoggledatanytimeduring

playback:o Overlay,wherethecontrolsareoverlaidoverthevideoandhidethemselvesifyoumouse‐offthe

player.o Side‐by‐side,wherethecontrolsarepermanentlyonthescreenandtheplaylistviewislocatedto

therightofthevideocontentarea.• Fourvideoscalingmodes.Differentvideoscalingthatcanbetoggledatanytimeduringplayback:

o Fit,wherethevideoisscaledaslargeaspossibletofitwithintheconfinesoftheplayerwhilestillpreservingitsnativeaspectratio.

o Stretch,wherethevideoisisstretchedtofitexactlywithintheconfinesoftheplayer.Nativeaspectratioisnotpreserved.


Page3 2/27/2009

o Native,wherethevideoisscaledtothenativesizeitwasencodedat.Notethatthissizemaybelargerthantheplayerthatistryingtorenderthevideo,inwhichcasethevideowillbecenteredwithintheavailableplayerspace.

o Nativeorsmaller,wherethevideowillbescaledtoitsnativesizeunlessthatislargerthantheplayerinwhichcase"fit"scalingwillbeinvoked.

• Standardplaybackcontrols.Commonplaybackfunctionalityincludingplay/pause,volume,scrub(seek),currentposition,duration.

• Fullscreenmode.Maximizethevideodisplaydimensionsandretainaccesstotheplaybackcontrols.• Socialmediaoptions.Providesaccessto“link”and“embed”dataforplayerre‐distribution.• Playlistvisibility.Hideorshowtheplaylistduringplayback.• Troubleshooting.Built‐indebugscreentoassistwithdebuggingconnectionandplaybackproblems.• Multipledeliveryformats.Playcontentusingavarietyofdeliveryoptions:

On‐demandStreaming

LiveStreaming ProgressiveDownload

Yahoo!MediaRSSPlayLists

StreamOSMetafiles

DynamicStreamSwitchingPlayLists

AkamaiMediaDelivery(AMD)

Yes Yes Yes No No Yes

StreamOS Yes Yes Yes Yes Yes No

Notes1. PlaylistsupportcurrentlyincludesanyplaylistthatiscompliantwiththeYahoo!MediaRSSspecification

andhasafileextensionof‘.xml’or‘.rss’.2. StreamOSmetafilesincludestypes1,2,and4.3. DynamicstreamingswitchingincludessupportfortheSMIL1.0definitionsupportedbytheAdobe

FLVPlaybackcomponent.Thesection‘Configurationanddeployment’providesmoredetailsandAppendixCprovidesasample.

PlayercomponentsTheMultiPlayerhasseveralcomponents.Theseinclude:

1. Videodisplay2. Playbackcontrolbar

3. Playlistpanel4. Contextmenu

Figure2belowshowsthesecomponents.


Page4 2/27/2009

Figure2:MultiPlayercomponents.

VideodisplayThevideodisplayiswherethevideocanbeviewed.

PlaybackcontrolbarTheplaybackcontrolbarenablestheend‐usertodothefollowing:

• Playandpausethecurrentcontentplaying

• Scrub(seek)throughthetimelineofthecurrentcontentplaying• Adjustthevolume(audiolevel)• Viewthecurrentandremainingtimeforthecurrentcontentplaying

• Viewanindicationofhowmuchofthecurrentcontentplayinghasdownloaded(progressivedownloadonly)

• Toggletheplaylistdisplaymode(displayedonlywhenaplaylistisinuse)

• Togglefullscreendisplaymode• Providelinkandembedcodefortheplayer

• Viewanindicationofquality(dynamicstreamingonly)

PlaylistpanelTheplaylistpanelliststhecontentinaplaylist.Theplaylistpanelenablesend‐userstodothefollowing:

• Viewthemetadataforeachitemintheplaylist• Viewanindicationofwhichitemiscurrentlyplaying• Scrollupanddownthroughtheplaylist

• Selectanitemintheplaylistforplayback


Page5 2/27/2009

ContextmenuThecontextmenuisafloatingmenuthatcanbeactivatedbyrightclickinganywhereontheplayer.Thecontext

menuenablesend‐userstodothefollowing:

• Togglethelayoutmode• Togglethevideoscalingmode• Togglethedebugtracepanel

• Toggletheswitchingmode(manualversusautomatic,dynamicstreamingonly)• Manuallyswitchtocontentwithahigherdatarate(dynamicstreamingonly)• Manuallyswitchtocontentwithalowerdatarate(dynamicstreamingonly)

ContentpreparationThefollowingshouldbeconsideredwhenpreparingcontent:

• TheMultiPlayersupportsallFlashvideoandaudioformatsandinparticularallstreamingformats

supportedbyFMS3.5.EncodingguidelinescanbefoundintheAdobeDeveloperConnectioncommunitysiteathttp://www.adobe.com/devnet/.

• TheMultiPlayersupportsRSSfeedsforplaylists.Specificallythismeansthatyoumustcomplywiththe

RSS2.0andYahoo!MediaRSSspecifications.Formoreinformationonthesespecifications,checkoutthelinksinAppendixDofthisdocument.ItisimportanttonotethatifyouhosttheRSSfeedonadifferentdomainthanwhereyourplayer(SWF)resides,youwillneedacross‐domainfileintherootpathofthe

webserverwheretheRSSfeedresides.• Dynamicstreamingrequiresareferencetovariouspropertiesforallofyourcontentderivatives.The

MultiPlayerrequirestheuseofaSMILdocumentforthispurpose.Formoreinformationonthesyntaxof

theSMILdocument,checkoutthesampleinAppendixCofthisdocument.IfyouhosttheSMILdocumentonadifferentdomainthanwhereyourplayer(SWF)resides,youwillneedacross‐domainfileintherootpathofthewebserverwheretheSMILdocumentresides.

ConfigurationanddeploymentUseoftheMultiPlayerrequiresconfigurationanddeploymentlikeanyFlash(SWF)application.Aconfiguration

toolisavailable,whichenablesasimple,intuitiveapproachtoconfiguringanddeployingtheplayer.

MultiPlayerconfigurationtoolThistoolwillenableyouto:

• Intuitivelyconfigurethecustomizableoptionsintheplayer.• Previewtheplayerwiththeoptionsconfigured.


Page6 2/27/2009

• Generateandexportthesyntax(basedonSWFObject)necessarytoreferencetheplayerinyourweb

page.ThetooliswritteninFlexandrequirestheFlashPlayerplug‐in.ThetoolcanbeaccessedfromtheOVPSourceForgesitehere:

http://openvideoplayer.sourceforge.net/get‐startedFormoredetailsontheconfigurationoptions,pleasereferto‘AppendixA:Configurationoptions’inthis

document.

AdvancedconfigurationanddeploymentconsiderationsUsingtheMultiPlayerdoesnotrequiretheconfigurationtool.ConfigurationanddeploymentoftheplayeroutsideoftheconfigurationtoolcanprovideadditionalflexibilitybutrequiresagoodunderstandingofhowtodeployaFlash(SWF)application.Specifically:

1. CreateawebpagethatreferencestheMultiPlayerconfiguration

2. ConfiguretheMultiPlayer3. Testtheplayeronyourwebserver4. Deploythewebpage

CreateawebpageUsingtheAkamaiBasicMediaPlayerrequiresyoutoreferencetheplayerinawebpagejustlikeanyFlash/Flexapplication.Commonlyknownas“embedding”,thiscanbeaccomplishedmanywaysandcaninvolveseveral

languagessuchasHTMLandJavaScript,allofwhichdependsontheconsiderationsyoumakearoundtheconfigurationoptionsfortheFlashPlayerplug‐inandtheBasicMediaPlayer,includingversionsupport,end‐user

installationexperience,andmore.FormoredetailsonFlashPlayerdetectionandinstallation,visittheFlashPlayerDeveloperCenterintheAdobeDeveloperConnection,aresourceforlearningaboutAdobeproductsandservices:

http://www.adobe.com/devnet/flashplayer/detection_installation.html

ForagreatperspectiveontheconsiderationsforembeddingFlashcontent,visit:

http://www.alistapart.com/articles/flashembedcagematch

SWFObjectishighlyrecommendedforembeddingtheAkamaiBasicMediaPlayer.AppendixBprovidesan

exampleofthesyntaxthatisrequiredusingSWFObject.Formoredetailsonthismethod,visit:

http://code.google.com/p/swfobject/


Page7 2/27/2009

ConfiguretheMultiPlayerAfteryouhavecreatedyourwebpage,younextneedtodefinetheconfigurationoptionsfortheplayer.AlloptionsfortheMultiPlayerareconfiguredusingtheFlashVarspropertyoftheAdobeFlashPlayerplug‐in.This

propertyprovidesanefficientmethodofdynamicallypassingtheconfigurationoptionsfortheMultiPlayerfromthewebpagewhentheplayerisloaded.FormoredetailsontheFlashVarsproperty,visit:

http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_16417

TesttheplayerAfteryouhaveconfiguredtheplayerthenextstepistotestthewebpagethatreferencestheplayer.Ifpossible,youshouldtestitonvariousversionsofwebbrowserapplications(FireFox2/3,InternetExplorer6/7,Safari,

and/orOpera)andvariousversionsofoperatingsystems(WindowsXP/Vista,MacOS,and/orLinux)toensuretheoptimalend‐userexperience.KeepinmindthatSWFObjectusessyntaxthatprovidesawiderangeofbrowserandoperatingsystemcompatibility.

DeploythewebpageOnceyouhavedeterminedthatyourplayerisconfiguredandfunctionsasdesired,yousimplyneedtodeployyourwebpageintoyourproductionwebsite.

Troubleshooting

DebugtracepanelThebuilt‐indebugtracepanelprovidesalogfortroubleshootingplaybackissues.Figure3belowshowsthedebugtracepanel.


Page8 2/27/2009

Figure3:Debugtracepanel

Thepaneldisplaystracestatementsforsignificantapplicationevents,includingallunderlyingNetConnectionand

NetStreamstatusevents,withlatesteventsatthetop.Thiscanbecriticalalongwithend‐userdetailssuchasoperatingsystem,browser,andplug‐in.ClearandCopybuttonsareprovidedtorespectivelyclearthecontentsofthepanelandcopythecontentstotheclipboardtosendtoothersforfurtheranalysis.

AppendixA:ConfigurationoptionsThefollowingisalistofrequiredandoptionalconfigurationoptions.

Name Description Necessity DefinedValues Default

Value

Notes

src ThesourceURIofthecontentwhichthe

playerisexpectedtoplay.

Required Thismustbeavalidandwellstructured

referencetoAMDorStreamOScontent,ora

HTTPlinktoprogressivecontentonany

webserver.

mode Thelayoutmode.

Optional • overlay

• sidebyside

sidebyside

scaleMode Thestartingscalingmodeforthevideo.

Optional • fit

• stretch

• native

• nativeorsmaller

fit

frameColor TheHEXvalue

fortheframecolor.

Optional 333333 “0x”or“#”are

notrequired.


Page9 2/27/2009

fontColor TheHEXvalue

fortheframecolor.

Optional CCCCCC “0x”or“#”are

notrequired.

themeColor TheHEXvaluefortheframe

color.Usedforbuttonmouse‐overhighlights,

scrubbarshading,volumecontrol

shading,andplaylisttitlefontcolor.

Optional 0395D3 “0x”or“#”arenotrequired.

autostart Defines

whetherthevideostarts

playingaftertheplayerisloaded.

Optional true Ifsetto"false",

theplayerwillrenderthefirst

keyframeinthevideotocreateasplashscreen

andthenstop.

link TheURLwhichtheusercanusetolinktoa

mountedinstanceoftheplayer.

Optional Thisparametermustbeescaped(URL‐encoded)

orelseitwillmaskotherFlashVar

attributes.Notethatthebuttontosurfacethe

link/embeddedpanelwillonlybevisibleif

eitherthelinkorembedparameterhasa


Page10 2/27/2009

nonempty‐

stringvalue.

embed TheURLwhichtheusercanusetoembed

theplayer.

Optional Thisparametermustbeescaped(URL‐encoded)

orelseitwillmaskotherFlashVar

attributes.Notethatthebuttontosurfacethe

link/embeddedpanelwillonlybevisibleif

eitherthelinkorembedparameterhasa

nonempty‐stringvalue.

Notes

1. Inorderforfullscreenmodetobefunctional,theplayermustbeembeddedinthewebpagewiththe‘allowFullScreen’setto“true”.

2. Theminimumembedwidthfortheplayervariesdependingonhowitisconfigured.Seethetablebelowfortheminimumwidthinvariousconfigurations:

OverlayMode Side‐by‐SideMode

FullscreenorShare

(pixels)

Fullscreenand

Share(pixels)

Fullscreenor

Share(pixels)

Fullscreenand

Share(pixels)

Playlistcontent 390 420 680 720

Singlefileplayback 360 390 360 390

AppendixB:ExampledeploymentwebpageAsanexample,viewtheHTMLscriptbelow.Thisrequiresthattheswfobject.jsandexpressInstall.swffilestobelocatedinthesamefolderastheHTMLfile:


Page11 2/27/2009

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>

<title>SWFObject dynamic embed</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script type="text/javascript" src="swfobject.js"></script>

<script type="text/javascript">

var flashvars = {

src: "rtmp%3A//cp27886.edgefcs.net/ondemand/14808/nocc_small307K.flv",

autostart: "true",

themeColor: "0395d3",

mode: "sidebyside",

scaleMode: "fit"

};

var params = {};

var attributes = {

id: "myPlayer",

name: "myPlayer",

allowFullScreen: "true"

};

swfobject.embedSWF("AkamaiFlashPlayer.swf", "myPlayerGoesHere", "802", "489", "9.0.0", "expressInstall.swf", flashvars, params, attributes);

</script>

</head>

<body>

<div id="myPlayerGoesHere">

<a href="http://www.adobe.com/go/getflashplayer">

<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />

</a>


Page12 2/27/2009

</div>

</body>

</html>

AppendixC:DynamicstreamswitchingAdobedynamicstreamswitchingrequiresderivativesofyoursourcecontentatspecificdataratesyoudefineand

themediaplayerapplicationmustknowaboutthesederivatives.ThiscanbeaccomplishedusingaSMILdocumentthathasaformatsupportedbyAdobeandtheFLVPlaybackcomponent.Belowisasamplefile:

<smil> <head> <meta base="rtmp://cp67126.edgefcs.net/ondemand" /> </head> <body> <switch> <video src="mp4:mediapm/ovp/content/demo/video/elephants_dream/elephants_dream_768x428_24.0fps_408kbps.mp4" system-bitrate="408000"/> <video src="mp4:mediapm/ovp/content/demo/video/elephants_dream/elephants_dream_768x428_24.0fps_608kbps.mp4" system-bitrate="608000"/> <video src="mp4:mediapm/ovp/content/demo/video/elephants_dream/elephants_dream_1024x522_24.0fps_908kbps.mp4" system-bitrate="908000"/> <video src="mp4:mediapm/ovp/content/demo/video/elephants_dream/elephants_dream_1024x522_24.0fps_1308kbps.mp4" system-bitrate="1308000"/> <video src="mp4:mediapm/ovp/content/demo/video/elephants_dream/elephants_dream_1280x720_24.0fps_1708kbps.mp4" system-bitrate="1708000"/> </switch> </body> </smil>

NOTE:IfyouhosttheSMILdocumentonadifferentdomainthanwhereyourplayer(SWF)resides,youwillneeda

cross‐domainfileintherootpathofthewebserverwheretheSMILdocumentresides.

AppendixD:References

ArticlesAdobeDeveloperConnection:FlashPlayerDeveloperCenter:DetectionandInstallation

http://www.adobe.com/devnet/flashplayer/detection_installation.html

FlashEmbeddingCageMatch

http://www.alistapart.com/articles/flashembedcagematch


Page13 2/27/2009

GoogleCode:SWFObject

http://code.google.com/p/swfobject/

AdobeTechNote:UsingFlashVarstopassvariablestoaSWF

http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_16417

RSS2.0specification

http://www.rssboard.org/rss‐specification

Yahoo!MediaRSSspecification

http://search.yahoo.com/mrss

SamplecontentlinksThefollowingsamplecontentlinksareprovidedfortestingpurposes:

• AMDon‐demandstreamingvideo(H.264):

o rtmp://cp67126.edgefcs.net/ondemand/mp4:mediapm/ovp/content/demo/video/elephants_dream/elephants_dream_768x428_24.0fps_608kbps.mp4

• AMDprogressivedownloadvideo(H.264):

o http://mediapm.edgesuite.net/ovp/content/demo/video/elephants_dream/elephants_dream_768x428_24.0fps_608kbps.mp4

• AMDlivestreamingvideo(H.264):

o rtmp://cp34973.live.edgefcs.net/live/Flash_Live_Benchmark@632• AMDdynamicstreaming:

o http://mediapm.edgesuite.net/ovp/content/demo/smil/elephants_dream.smil

• AMDon‐demandstreamingaudioonly(MP3):o rtmp://cp67126.edgefcs.net/ondemand/mediapm/ovp/content/test/video/nocc_small.mp3

• StreamOSon‐demandstreamingvideo,type4metafile(H.264):

o http://products.edgeboss.net/flash/products/content/demo/video/elephants_dream_768x428_24.0fps_608kbps.mp4?xmlvers=4

• StreamOSprogressivedownloadvideo(H.264):

o http://products.edgeboss.net/download/products/content/demo/video/elephants_dream_768x428_24.0fps_608kbps.mp4

• StreamOSRSSfeed(on‐demandstreamingvideo,VP6):

o http://rss.streamos.com/streamos/rss/genfeed.php?feedid=1675&groupname=products• StreamOSRSSfeed(progressivedownloadvideo,VP6):

o http://rss.streamos.com/streamos/rss/genfeed.php?feedid=1679&groupname=products


Page14 2/27/2009

Akamai Multi Player User Guide

Documents

Transcript of Akamai Multi Player User Guide