Upload
sebastian-ferraro
View
296
Download
4
Tags:
Embed Size (px)
Citation preview
AkamaiMultiPlayerforAdobeFlash:UserGuide
Page1 2/27/2009
AkamaiMultiPlayerforAdobeFlash:UserGuide
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
AkamaiMultiPlayerforAdobeFlash:UserGuide
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.
AkamaiMultiPlayerforAdobeFlash:UserGuide
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.
AkamaiMultiPlayerforAdobeFlash:UserGuide
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
AkamaiMultiPlayerforAdobeFlash:UserGuide
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.
AkamaiMultiPlayerforAdobeFlash:UserGuide
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/
AkamaiMultiPlayerforAdobeFlash:UserGuide
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.
AkamaiMultiPlayerforAdobeFlash:UserGuide
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.
AkamaiMultiPlayerforAdobeFlash:UserGuide
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
AkamaiMultiPlayerforAdobeFlash:UserGuide
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:
AkamaiMultiPlayerforAdobeFlash:UserGuide
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>
AkamaiMultiPlayerforAdobeFlash:UserGuide
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
AkamaiMultiPlayerforAdobeFlash:UserGuide
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
AkamaiMultiPlayerforAdobeFlash:UserGuide
Page14 2/27/2009