cfMediaPlayer

Version: 20100223.01
Author: Stephen J. Withington, Jr. | www.stephenwithington.com
Credits: JW Player™ / longtail video | www.longtailvideo.com

License

By using cfMediaPlayer, you agree to the 'non-commercial' license found at http://creativecommons.org/licenses/by-nc-sa/3.0/. For corporate use or if you're planning to generate revenue from your site (e.g., by running advertisements on the page, selling anything, etc.) you will need to buy a license for JW Player™. To obtain a commercial license of the JW Player™, please visit http://longtailvideo.com/players/jw-flv-player/commercial-license/

Description

ColdFusion custom tag wrapper to display FLV, MP3, MP4 and AAC files using the JW FLV Player™ with one line of code. For example, <cf_mediaplayer file="myvideo.flv"></cf_mediaplayer> See more examples below.

The JW Player™ is the Internet's most popular and flexible media player. It supports playback of any format the Adobe Flash Player can handle (FLV, MP4, MP3, AAC, JPG, PNG and GIF). It also supports RTMP, HTTP, live streaming, various playlists formats, a wide range of settings and more.

For more information about the JW Player™, visit http://www.longtailvideo.com/players/jw-flv-player/

Install

Place the entire contents of cfMediaPlayer somewhere on your server. Create a custom tag path that points to this folder.

If the folder is stored above/outside of the webroot, then you will need to provide the virtual/alias directory name using the 'basdir' attribute when calling the tag.

Attributes

Attribute Req/Opt Default Description
allowfullscreen  Optional TRUE allow user to view fullscreen mode
author  Optional [empty string] author of the video, shown in the display or playlist
autostart  Optional FALSE automatically start the player on load
backcolor Optional  ffffff background color of the controlbar and playlist
bandwidth  Optional 5000 available bandwidth for streaming the file. used predominately for 'bitrate switching.' set this var if you want to hint the player on the initial bandwidth. overwritten every 2 seconds whenever a 'video' or 'http' stream is loading or an 'rtmp' stream is playing
basedir  Optional [empty string] if cfMediaPlayer is stored outside of the webroot, then you will need to provide the 'basedir' attribute pointing to the 'virtual directory' (IIS) or 'alias directory' (apache).  (i.e., you've placed this in 'D:\offwwwroot\customtags\' and you have an alias or virtual directory setup as '/mytags' which points to this directory, then basedir="/mytags")
bgcolor  Optional ffffff background color of container div
border  Optional 1 border (in pixels) to apply around the player  (set to '0' to turn off the border)
bordercolor  Optional 000000 color of border
borderstyle  Optional solid style of border. Options: solid, ridge, outset, none, inset, hidden, groove, double, dotted, dashed
bufferlength  Optional 1 number of seconds of the file that has to be loaded before starting. set this to a low value to enable instant-start and to a high value to get less mid-stream buffering. see http://developer.longtailvideo.com/trac/wiki/FlashFormats#BitrateSwitching for more information
controlbar Optional bottom position of the control bar. Options: bottom, over, none
date Optional [empty string] publish date of the media file
description  Optional [empty string] text description of the file
displayclick  Optional play what to do when one clicks the display. when set to 'none', the handcursor is also not shown. Options: play, link, fullscreen, mute, next, none
dock  Optional FALSE set this to 'true' to show the dock with large buttons in the top right of the player
duration  Optional 0 duration of the file in seconds
file Required [empty string] location of the mediafile (FLV, MP3, MP4 or AAC) or playlist to play. can be a URL relative to the current page or even stored elsewhere on the ColdFusion server or any other streaming server. See 'playlist' attribute for information about crossdomain security restrictions
frontcolor Optional 000000 color of all icons and texts in the controlbar and playlist
hdfile  Optional [empty string] if you have a High Definition file, pass in the file location to this attribute (i.e., http://www.longtailvideo.com/jw/upload/bunny.mov) 
height  Optional 270 height of the display in pixels. The control bar height is 20px, which is the minium setting. If the file is an .mp3, then the height will auto-adjust accordingly.
icons  Optional TRUE show icons on top of movie screen?
image  Optional [empty string] location of a preview image; shown in display and playlist
item  Optional 0 playlistitem that should start to play. use this to set a specific start-item (an array beginning at 0)
lightcolor Optional 000000 color of an icon or text when you rollover it with the mouse
link Optional [empty string] url to an external page the display, controlbar and playlist can link to
linktarget  Optional _blank browserframe where link from the display are opened in. options: _blank, _self, _parent, _top
logo  Optional [empty string] location of an external jpg, png or gif image to show in a corner of the display
margin  Optional 1em 0 margin on container div 
mute  Optional FALSE mute all sounds on startup. is saved in a cookie
padding  Optional 0 padding on container div
player  Optional player.swf Standard options are 'player.swf' and 'player-viral.swf.' if you have purchased a license for JW Player, drop the 'player-licensed.swf' and 'player-licensed-viral.swf' into the 'player' directory. You will then be able to include 'player-licensed.swf' or 'player-licensed-viral.swf' to your list of available options.
playlist  Optional none position of the playlist. Options: none, bottom, over, right.
in order to use playlist, the 'file' attribute must actually be an XML Playlist
note that playlist XML files are subject to the crossdomain security restrictions of Flash
for more information, see http://developer.longtailvideo.com/trac/wiki/FlashFormats#XMLPlaylists
(i.e. http://gdata.youtube.com/feeds/api/standardfeeds/recently_featured )

ALSO: to use an xml playlist, you need to add an xml namespace as follows:
xmlns:jwplayer="http://developer.longtailvideo.com/trac/wiki/FlashFormats"
playlistsize  Optional 180 when 'below' this refers to the height, when 'right' this refers to the width of the playlist
plugins  Optional [empty string] comma-separated list of plugins
repeat  Optional none set to 'list' to play the entire playlist once, to 'always' to continuously play the song/video/playlist and to 'single' to continue repeating the selected file in a playlist
rtmploadbalance  Optional FALSE used in with 'streamer' attribute
rtmpsubscribe  Optional FALSE used in with 'streamer' attribute
screencolor Optional 000000 background color of the display
showtitle  Optional TRUE show title above the media file
sharecode Optional FALSE display "Embed" code button to allow user to grab code and embed the video on their own web site or blog
sharelink Optional FALSE display "Share" button to allow user to send a link to the page displaying the video or post the link to facebook, twitter, or myspace
shuffle  Optional FALSE shuffle playback of playlist items
skin  Optional default skinning options: default, vimeo, desktop
smoothing  Optional TRUE this sets the smoothing of videos, so you won't see blocks when a video is upscaled. set this to 'false' to get performance improvements with old computers / big files
start  Optional 0 position in seconds where playback has to start. Won't work for regular (progressive) videos, but only for streaming (HTTP / RTMP)
state  Optional idle current playback state of the player. 'idle'=no file loaded, 'buffering'=loading a file, 'playing'=playing a file, 'paused'=pausing playback; loading continues, 'completed'=same as 'idle,' but the file and player are loaded completely 
streamer  Optional [empty string] location of server/script to use for streaming. for streaming, please read: http://developer.longtailvideo.com/trac/wiki/FlashFormats#RTMPStreaming
in addition to the 'file' and the 'type=rtmp' variables, RTMP streams usually need the 'streamer' var
which gives the player the location of the RTMP server (i.e., streamer='rtmp://edge.sercer.com/application')
stretching Optional uniform defines how to resize images in the display. can be 'none'=no stretching, 'exactfit'=disproportionate, 'uniform'=stretch with black borders, or 'fill'=uniform, but completely fill the display
tags  Optional [empty string] keywords associated with the media file
title  Optional [empty string] title of the video, shown in the display or playlist
type  Optional none this determines what type of mediafile this item is, and thus which model the player should use for playback. by default, the type is detected by the player based upon the file extension. if there's no suiteable extension or you use a streaming server, it can be manually set. the following media types are supported:
* video: progressively downloaded FLV / MP4 video, but also AAC audio.
* sound: progressively downloaded MP3 files.
* image: JPG/GIF/PNG images.
* youtube: videos from Youtube.
* http: FLV/MP4 videos played as http speudo-streaming.
* rtmp: FLV/MP4/MP3 files played from an RTMP server.
valid options: none, video, sound, image, youtube, http, rtmp 
volume  Optional 90 startup volume of the player. can be 0-100. is saved in a cookie
width  Optional 480 width of the display in pixels
wmode  Optional opaque  Specifies the absolute positioning and layering capabilities in your browser: window: Plays the media player in its own rectangular window on a web page, opaque: Hides everything behind the media player on the web page, transparent: Lets the background of the web page show through the transparent portions of the media player

Syntax

<cfmediaplayer 
	allowfullscreen="true|false"
	author="author name"
	autostart="true|false"
	backcolor="hexadecimal value"
	bandwidth="integer"
	basedir="If stored outside of the webroot, will need the virtual/alias directory name"
	bgcolor="hexadecimal value"
	border="integer"
	bordercolor="hexadecimal value"
	borderstyle="solid|ridge|outset|none|inset|hidden|groove|double"
	bufferlength="integer" 
	controlbar="bottom|over|none" 
	date="publish date"
	description="text description of the media file"
	displayclick="play|link|fullscreen|mute|next|none"
	dock="true|false"
	duration="integer"
	file="location/url of the mediafile or xml playlist"
	frontcolor="hexadecimal value"
	hdfile="location/url of a high definition file"
	height="integer"
	icons="true|false"
	image="location/url of preview image (.jpg|.png|.gif)"
	item="integer"
	lightcolor="hexadecimal color"
	link="url"
	linktarget="_blank|_self|_parent|_top"
	logo="location/url of logo (.jpg|.png|.gif)"
	margin="css settings for player container div"
	mute="true|false"
	padding="css settings for player container div"
	player="player.swf|player-licensed.swf|player-viral.swf|player-licensed-viral.swf"
	playlist="none|bottom|over|right"
	playlistsize="integer"
	plugins="comma-separated list of plugins"
	repeat="list|always|single|none"
	rtmploadbalance="true|false"
	rtmpsubscribe="true|false"
	screencolor="hexadecimal value"
	sharecode="true|false"
	sharelink="true|false"
	showtitle="true|false"
	shuffle="true|false"
	skin="default|vimeo|desktop"
	smoothing="true|false"
	start="integer"
	state="idle|buffering|playing|paused|completed"
	streamer="location/url of server/script for streaming"
	stretching="none|exactfit|uniform|fill"
	tags="text keywords associated to the file"
	title="title of the file"
	type="none|video|sound|image|youtube|http|rtmp"
	volume="integer"
	width="integer"
	wmode="opaque|transparent|window">
</cfmediaplayer>

Examples

Single FLV with Default Skin and Sharing Options

default flv skin with sharing options

<cf_mediaplayer 
	file="http://www.longtailvideo.com/jw/upload/bunny.flv" 
	skin="default" 
	sharelink="true"
	sharecode="true"
	title="FLV with Default Skin and Sharing Options" />

Single FLV with Vimeo Skin, Controlbar=over and Custom Color Attributes

flv with vimeo skin

<cf_mediaplayer 
	file="http://www.longtailvideo.com/jw/upload/bunny.flv" 
	skin="vimeo" 
	backcolor="333333"
	frontcolor="FFFFFF"
	lightcolor="3399FF"
	controlbar="over"
	title="FLV with Vimeo Skin, Controlbar=over and Color Attributes" />

FLV with Desktop Skin

flv with desktop skin

<cf_mediaplayer 
	file="http://www.longtailvideo.com/jw/upload/bunny.flv" 
	skin="desktop" 
	title="FLV with Desktop Skin" />

Single MP3 with Border=0 and Width=200

mp3

<cf_mediaplayer 
	file="http://www.longtailvideo.com/jw/upload/bunny.mp3" 
	border="0"
	title="Single MP3 with Border=0 and Width=200"
	width="200" />

MP3 Playlist without Playlist Shown and Border=0 and Width=300

<cf_mediaplayer 
	file="myplaylist.xml"
	border="0"
	height="0"
	width="300"
	title="MP3 Playlist without Playlist Shown and Border=0, Width=300" />

Mixed-Media (FLV & MP3) Playlist with Playlist Shown and No Video/Image

mixed-media playlist no video or image

<cf_mediaplayer 
	file="myplaylist.xml"
	border="0"
	height="0"
	playlist="bottom"
	title="Mixed-Media (FLV & MP3) Playlist with Playlist Shown and No Video/Image" />

Mixed-Media Playlist (FLVs and MP3s) with Playlist=right

mixed-media playlist right

<cf_mediaplayer 
	file="myplaylist.xml"
	playlist="right"
	stretching="fill"
	title="Mixed-Media Playlist (FLVs and MP3s) with Playlist=right" />

Mixed-Media Playlist (FLVs and MP3s) with Playlist=bottom

<cf_mediaplayer 
	file="myplaylist.xml"
	playlist="bottom"
	stretching="fill"
	title="Mixed-Media Playlist (FLVs and MP3s) with Playlist=bottom" />

YouTube Playlist with Playlist=right and Playlistsize=325

<cf_mediaplayer 
	file="http://gdata.youtube.com/feeds/api/standardfeeds/recently_featured"
	playlist="right"
	playlistsize="325"
	title="YouTube Playlist with Playlist=right and Playlistsize=325" />

YouTube Playlist with Stretching=fill and Sharing Options

<cf_mediaplayer 
	file="http://gdata.youtube.com/feeds/api/standardfeeds/recently_featured"
	playlist="bottom"
	stretching="fill"
	title="YouTube Playlist with Stretching=fill and Sharing Options" />

High Definition (HD) Example
HD

<cf_mediaplayer 
	file="http://www.longtailvideo.com/jw/upload/bunny.flv"
	hdfile="http://www.longtailvideo.com/jw/upload/bunny.mov" 
	stretching="exactfit"
	title="High Definition (HD) with Stretching=exactfit" /

XML Playlists

In order to enable XML Playlists, you will need to add the jwplayer namespace to your xml file. For example:

xmlns:jwplayer="http://developer.longtailvideo.com/trac/wiki/FlashFormats"

By inserting this into your feed, file properties that are not supported by the feed format itself (such as the type or duration in an RSS feed) can be amended without breaking validation. Also, the player will not operate properly without this namespace. For example, if you already have an RSS feed for your published podcasts, you could simply add the above namespace and then use the tag to consumer your feed as a playlist.

Here's an example iTunes RSS feed with the JWPlayer namespace added:

<rss version="2.0" xmlns:itunes="http://www.itunes.com/dtds/podcast-1.0.dtd" xmlns:jwplayer="http://developer.longtailvideo.com/trac/wiki/FlashFormats">
	<channel>
		<title>Example iTunes RSS playlist</title>
		<item>
			<title>FLV Video</title>
			<link>http://www.bigbuckbunny.org/</link>
			<description>Big Buck Bunny is a short animated film by the Blender Institute, part of the Blender Foundation.</description>
			<enclosure url="http://www.longtailvideo.com/jw/upload/bunny.flv" type="video/x-flv" length="33" />
			<itunes:author>the Peach Open Movie Project</itunes:author>
		</item>
		<item>
			<title>MP3 Audio with image</title>
			<link>http://www.bigbuckbunny.org/</link>
			<description>Big Buck Bunny is a short animated film by the Blender Institute, part of the Blender Foundation.</description>
			<enclosure url="http://www.longtailvideo.com/jw/upload/bunny.mp3" type="audio/mpeg" length="33" />
			<itunes:author>the Peach Open Movie Project</itunes:author>
			<jwplayer:image>http://www.longtailvideo.com/jw/upload/bunny.jpg</jwplayer:image>
		</item>
		<item>
			<title>PNG Image with duration</title>
			<description>Big Buck Bunny is a short animated film by the Blender Institute, part of the Blender Foundation.</description>
			<enclosure url="http://www.longtailvideo.com/jw/upload/bunny.png" type="image/png" />
			<itunes:author>the Peach Open Movie Project</itunes:author>
			<itunes:duration>00:10</itunes:duration>
		</item>
		<item>
			<title>Youtube video with start</title>
			<link>http://www.bigbuckbunny.org/</link>
			<description>Big Buck Bunny is a short animated film by the Blender Institute, part of the Blender Foundation.</description>
			<enclosure url="http://youtube.com/watch?v=IBTE-RoMsvw" type="text/html" length="32" />
			<itunes:author>the Peach Open Movie Project</itunes:author>
			<jwplayer:start>10</jwplayer:start>
		</item>
	</channel>
</rss>

Assuming you saved the above XML file as myplaylist.xml and saved it to /playlists/myplaylist.xml, all you would need is the following line of code:

<cf_mediaplayer file="/playlists/myplaylist.xml" playlist="bottom"></cf_mediaplayer>

See http://developer.longtailvideo.com/trac/wiki/FlashFormats#XMLPlaylists for more information about the JWPlayer Namespace.