Yahoo! Live: Flash Embeds and JavaScript API

The Yahoo! Live Regular player is nearly identical to the player on the Yahoo! Live web site and can be accessed at http://live.yahoo.com/swf/v1/player. To accommodate the user interface elements, the player is 12 pixels wider and 63 pixels taller than the video it displays. To view a video stream at 400 by 300 pixels, embed the player into your page at 412 by 363 pixels. Whatever size you embed, the video is displayed in its native aspect ratio; odd sizes will result in letterboxing (trimming and/or padding).

Use of the Flash embeddable video players, and any other code provided to you as part of the Y! Live service, is governed by the Yahoo! Terms of Service and the Yahoo! Live Additional Terms of Service.

The Yahoo! Live Skinless player supports all the functionality of the Regular player, but has no user interface. However, you can build a user interface for this player using HTML and the JavaScript API. Video in the skinless player is displayed at exactly the size you embed, without regard to aspect ratio.

To embed either player, use HTML <object> and <embed> tags. The <object> tag is preferred for Internet Explorer; the <embed> tag for Firefox, Safari, and Netscape-based browsers. To provide the best results under most circumstances, nest the <embed> tag inside an <object> tag.

The following HTML code demonstrates how to embed a player for permalink mychannel into a web page.

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="412" height="363"
        codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
        <param name="movie" value="http://live.yahoo.com/swf/v1/player/mychannel" />
        <param name="quality" value="high" />
        <param name="bgcolor" value="#000000" />
        <embed src="http://live.yahoo.com/swf/v1/player/mychannel" 
               quality="high" 
               bgcolor="#869ca7"
               width="412" 
               height="363" 
               align="middle" 
               play="true" 
               loop="false" 
               quality="high"
               type="application/x-shockwave-flash" 
               pluginspage="http://www.adobe.com/go/getflashplayer">
        </embed>
</object>

To enable the JavaScript API, you must add a couple of parameters to the <embed> and <object> tags. One of these parameters, allowScriptAccess, enables JavaScript access from the SWF file to the container. The other id in the <object> tag and name in the <embed> tag, help you find the SWF in your page's Document Object Model (DOM) so you can interact with it via JavaScript.

The following example displays a skinless player for mychannel, and enables JavaScript access.

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="ylsp" width="400" height="300"
        codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
        <param name="movie" value="http://live.yahoo.com/v1/ylsp/mychannel" />
        <param name="quality" value="high" />
        <param name="bgcolor" value="#869ca7" />
        <param name="allowScriptAccess" value="always" />
        <embed src="http://live.yahoo.com/ylsp/mychannel" 
               quality="high" 
               bgcolor="#869ca7"
               width="400" 
               height="300" 
               name="ylsp" 
               allowScriptAccess="always"
               align="middle" 
               play="true" 
               loop="false" 
               quality="high" 
               type="application/x-shockwave-flash" 
               pluginspage="http://www.adobe.com/go/getflashplayer">
        </embed>
</object>

SWFs embedded using these tags will require a user click to activate them in some versions of Microsoft Internet Explorer. To avoid this constraint, imposed in 2006 due to a patent dispute and resolved in late 2007, you'll need to generate and write your embedding tag using JavaScript. There are several open-source libraries that provide this functionality. We recommend SWFObject, which you can find at http://blog.deconcept.com/swfobject/.