Library Widget

From Livestream » User Guide

Jump to: navigation, search

Contents


Image:WidgetLibraryVideo.png

See it in action! >>


The Livestream Video Library Widget allows users to browse through the clips in a channel's library. It can be set to display a particular playlist (storyboard) in the library or show the latest clips automatically. This Flash widget can be embedded using standard <object><embed> syntax and can be customized using flashVars or query string parameters.


The Video Library Widget can be embedded separately as a standalone widget, or can be used in conjunction with a Livestream Player embedded on the same page.


Premium Only Options

Premium Producers gain access to additional customization options to make the widget their own. You can locate these settings within the your Channel's Configuration Page of the Livestream Account Center. Or, click here to be taken there directly.

Image:VideoLibConfig.png


Current Options include:

  • Hide the Livestream Logo from the Video Library Widget (white label widget).
  • Disable the "Grab This Widget" button to ensure the widget remains on only your website.


Embed Options (Free & Premium Users)

Standalone Embed (default)

  • The Video Library Widget can be customized and embedded as a standalone product to attract viewers from your embed location to your Livestream.com Channel Page.
  • Simply customize the size of your Library and choose between a Full Library or just your Latest Content.
  • Copy the embed code from your Channel's Share Page (.../channelname/share)

image:VidLibWidgScreen3.png


Embed with a Livestream Player

iFrame Embed Code

Linking the Livestream Player & Library Widget when using the iFrame Embed Code is easy and can be accomplished with two small additions of code.

Add the following to your player source in the embed code: &lcID=123

And then the following to your library source in the embed code: &mode=lc&lcID=123&player=lsplayer

Paste both of these at the end of the src attribute inside double quotes. Your two embed codes should look like this:

<iframe width="560" height="340" src="http://cdn.livestream.com/grid/LSPlayer.html?channel=showreel&autoPlay=false&lcID=123" id="iframeplayer" style="border:0;outline:0" frameborder="0" scrolling="no"></iframe><div style="font-size: 11px;padding-top:10px;text-align:center;width:560px">Watch <a href="http://www.livestream.com/?utm_source=lsplayer&utm_medium=embed&utm_campaign=footerlinks" title="live streaming video">live streaming video</a> from <a href="http://www.livestream.com/showreel?utm_source=lsplayer&utm_medium=embed&utm_campaign=footerlinks" title="Watch showreel at livestream.com">showreel</a> at livestream.com</div>

<iframe width="300" height="250" src="http://cdn.livestream.com/grid/LSLibrary.html?channel=showreel&browseMode=false&mode=lc&lcID=123&player=lsplayer" id="iframelibrary" style="border:0;outline:0" frameborder="0" scrolling="no"></iframe><div style="font-size: 11px;padding-top:10px;text-align:center;width:300px">Watch <a href="http://www.livestream.com/?utm_source=lsplayer&utm_medium=embed&utm_campaign=footerlinks" title="live streaming video">live streaming video</a> from <a href="http://www.livestream.com/showreel?utm_source=lsplayer&utm_medium=embed&utm_campaign=footerlinks" title="Watch showreel at livestream.com">showreel</a> at livestream.com</div>

Object Embed Code

  • The "idname" parameter is the suggested method to link your Livestream Player and the Video Library Widget together when using the Object Embed Code. Locate the name of your Livestream Player (usually "lsplayer") and reference this parameter in your Library Widget embed code as player=lsplayer. Add this parameter as a query after web address.
  • You'll also need to specify the mode in which you are referencing this player. As explained above, we will use the mode=idname parameter. An example can be found below:


For example, if your Player Embed Code looks like this:

<object width="560" height="340" id="lsplayer" name="lsplayer" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"><param name="movie" value="http://cdn.livestream.com/grid/LSPlayer.swf?channel=aplive&autoPlay=false"></param><param name="allowScriptAccess" value="always"></param><param name="allowFullScreen" value="true"></param><embed name="lsplayer" src="http://cdn.livestream.com/grid/LSPlayer.swf?channel=aplive&autoPlay=false" width="560" height="340" allowScriptAccess="always" allowFullScreen="true" type="application/x-shockwave-flash"></embed></object>


You should add the following text (in bold) to your Library Embed Code:

&player=lsplayer&mode=idname

<object width="300" height="250" id="lslibrary" name="lslibrary" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"><param name="movie" value="http://cdn.livestream.com/grid/LSLibrary.swf?channel=aplive&player=lsplayer&mode=idname"></param><param name="allowScriptAccess" value="always"></param><param name="allowFullScreen" value="true"></param><embed name="lslibrary" src="http://cdn.livestream.com/grid/LSLibrary.swf?channel=aplive&player=lsplayer&mode=idname" width="300" height="250" allowScriptAccess="always" allowFullScreen="true" type="application/x-shockwave-flash"></embed></object>

  • You can reference the player using the "name" parameter as well if desired.
  • It's also possible to reference a player by the html "id" parameter. This method of linking the Library Widget and the Livestream Player is only recommended for advanced users who prefer to use SWFObject.


Embed with Specific Storyboards

If you would like to choose specific storyboards to add to the Video Library Widget, you can do so by adding the 'playlist=' parameter to your library widget embed code.


1. Navigate to your Livestream channel page, scroll down to the Video Library section and click on the desired storyboard.

2. You will be directed to a page that displaying the content in that storyboard. Copy the 'playlist ID' which will be at the end of the URL in your browser. (The id begins after the equal sign, as highlighted in the example below). Full details on getting the playlist ID can be found here|www.livestream.com/userguide/index.php?title=Video_On_Demand#How_Do_I_Find_my_ClipID

File:VODembed.png

3. Add the parameter playlist=[playlistID&amp] in the embed code before the 'layout=' parameter.

e.g. "playlist=8762dad2-3587-458d-89b5-372a614d9b66&amp"

The full embed code would look like:

<iframe width="300" height="250" src="http://cdn.livestream.com/embed/showreel?playlist=8762dad2-3587-458d-89b5-372a614d9b66&amp;layout=5&height=250&width=300&browseMode=false" style="border:0;outline:0" frameborder="0" scrolling="no"></iframe>

Advanced Parameters

Variable Type Required Default Value Description
channel String Yes Null Set this to the channel you would like to get clips for.
mode String No Null Set to 'idname' (preferred), 'name' or 'id' - specifies whether to address a player by its html 'idname', 'name' or 'id' parameter (use the 'player' variable to specify the actual value of this parameter). Use 'id' when embedding with SWFObject, but use 'idname' or 'name' in all other cases, and make sure that both <object> and <embed> tags have the 'idname' or 'name' parameter specified.
player String No Null Set this to the html name of the player you wish to control. If you do not set this variable the Library Widget will direct users to the appropriate page on the Livestream website when clicked. The player ID can also be used to reference the player, but is recommended for advanced users who wish to us SWFObject.
aspectWidth, aspectHeight String No 16, 9 Set these to the aspect ratio width and height of your clips. For instance, a widescreen channel will have these variables set to 16 and 9 respectively.
rows String No 0 Set the number of rows of clips to display. Note that the Library widget will automatically reduce this number if the thumbnails are too small. Setting the value to 0 will automatically generate lines based on widget size.
textLines String No 2 Set this to increase the number of lines of text beneath each thumbnail. Setting this to '1' will create special scrollable text fields.
browseMode String No false The Library Widget can be configured to browse your channel's entire On-Demand Library, or just your latest content. By default, the widget is set to display your latest clips. Change this variable to 'true' to enable the entire library (hierarchical).
playlist String No Null The Library Widget can be configured to browse specific playlists. By default, the widget is set to display your latest clips.


Return to Main Page