User Guide Cancel

cfmediaplayer

 

THIS TAG HAS BEEN DEPRECATED

For a full list of deprecated features, refer to Deprecated features.

Description

Creates an in-built media player that lets you play videos in any format supported by HTML 5 compliant browsers in addition to FLV, MPEG-3, and MPEG-4 files. FLV files can be played from any web server. You can play MPEG-3/MPEG-4 only from Flash Media Server using RTMP. You can also play audio files of MP3 format.

Category

Syntax

<cfmediaplayer
align="alignment option"
autoplay="true|false"
bgcolor="hexadecimal value"
hideborder="true|false"
hidetitle="true|false"
controlbar="true|false"
fullScreenControl="yes|no"
name="name"
onComplete="JavaScript function name"
onError="JavaScript function name"
onPause="JavaScript function name"
onLoad="JavaScript function name"
onStart="JavaScript function name"
posterImage="URL"
quality="low|high|medium"
repeat="true|false"
skin="XML_Path"
source="source name"
style="style specification"
title="title"
type="html|flash">
height="integer"
width="integer"
wmode="window|opaque|transparent">
</cfmediaplayer>
<cfmediaplayer align="alignment option" autoplay="true|false" bgcolor="hexadecimal value" hideborder="true|false" hidetitle="true|false" controlbar="true|false" fullScreenControl="yes|no" name="name" onComplete="JavaScript function name" onError="JavaScript function name" onPause="JavaScript function name" onLoad="JavaScript function name" onStart="JavaScript function name" posterImage="URL" quality="low|high|medium" repeat="true|false" skin="XML_Path" source="source name" style="style specification" title="title" type="html|flash"> height="integer" width="integer" wmode="window|opaque|transparent"> </cfmediaplayer>
<cfmediaplayer 
align="alignment option" 
autoplay="true|false" 
bgcolor="hexadecimal value" 
hideborder="true|false" 
hidetitle="true|false" 
controlbar="true|false" 
fullScreenControl="yes|no" 
name="name" 
onComplete="JavaScript function name" 
onError="JavaScript function name" 
onPause="JavaScript function name" 
onLoad="JavaScript function name" 
onStart="JavaScript function name" 
posterImage="URL" 
quality="low|high|medium" 
repeat="true|false" 
skin="XML_Path" 
source="source name" 
style="style specification" 
title="title" 
type="html|flash"> 
height="integer" 
width="integer" 
wmode="window|opaque|transparent"> 
</cfmediaplayer>

History

ColdFusion 10: type, repeat, posterImage, title, skin, onPause, {{onError}}

ColdFusion 9: Added this tag.

Attributes

Attribute

Req/Opt

Default

Description

align

Optional

left

Specifies the horizontal alignment of the media player. You can select from left, right, and center.

autoplay

Optional

false

A Boolean value that specifies if the media player must automatically play the FLV file on loading the CFM page:

  • true
  • false

bgcolor

Optional

6b7c85

The background color of the media player specified as a Hexadecimal value or or a recognized color name, for example red. In the case of HTML player, this attribute applies only if you are using the attribute wmode set to transparent.
The dependency does not exist if you are using Flash player.

controlbar

Optional

true

A Boolean value that specifies if you want to display the control panel for the media player:

  • true
  • false

hideborder

Optional

true

A Boolean value that specifies if you want a border for the media player panel:

  • true
  • false

hidetitle

Optional

true

If true, hides the video file name.

fullScreenControl

Optional

yes

Whether full screen is enabled:

  • yes
  • no
    The following characteristics apply:
  • Single click plays/pauses the media player.
  • Borders, if defined, are not displayed in full-screen mode.
  • Double-click for full-screen mode.
  • (If you are in full-screen mode) Press "Esc" or double-click to restore the player to normal mode.
    This attribute is unsupported for HTML playback. Also, you cannot disable full screen for Flash player.

height

Optional

275 pixels

Height of the media player, in pixels.

name

Required if source is not defined

 

Name of the media player. The name attribute is required when you invoke JavaScript functions.

onComplete

Optional

 

Custom JavaScript function to run when the FLV file has finished playing.

onError

 

 

Custom JavaScript function to run when playback results in an error.

onLoad

Optional

 

Custom JavaScript function to run on loading of the player component.

onPause

 

 

Custom JavaScript function to run when the video is paused.

onStart

Optional

 

Custom JavaScript function to run when the FLV file starts playing.

posterImage

 

 

Sets a poster image for the video playback. Takes URL or relative address as value.

quality

Optional

high

The quality of the media playback:

  • low
  • medium
  • high

repeat

 

false

If true, continues playback from first to last frame after the media player reaches the end of the video.

skin

 

 

Path to the XML in which skinning options are specified. Applies only to FlashFor example, <cfmediaplayer source="myvideo.mp4" skin="./skin/myskin.xml">

source

Required if name is not defined

 

The URL to the FLV file. This can be a URL relative to the current page.
You can store the FLV file on the ColdFusion server or any other streaming server.

style

Optional

 

The following are the supported styles:

  • bgcolor: The background color of the media player.
  • borderbottom: A numeric value. The default is 10.
  • bordertop: A numeric value. The default is 10.
  • borderleft: A numeric value. The default is 10.
  • borderright: A numeric value. The default is 10.
  • titletextcolor: Hexadecimal value of RGB color. For example, specify the color white as ##FFFFFF or FFFFFF. The default is black.
  • titlebgcolor: Hexadecimal value of RGB color. The default is black.
  • progresscolor: The foreground color for the progress bar. Hexadecimal value of RGB color. The default is black.
  • progressbgcolor: The background color for the progress bar. Hexadecimal value of RGB color. The default is black.
  • controlscolor: The foreground color of the controls in the Control panel. Hexadecimal value of RGB color. The default is black.
  • controlbarbgcolor: The background color of the controls. Hexadecimal value of RGB color. The default is black.

title

 

 

Sets title on the media player. The title appears over the media player on upper-left corner. If title is specified and hideTitle is not specified, then hideTitle is set to false. Also when playback is Flash, the attribute wmode for Flash player is set to opaque, and ignores the default/user-specified value.

type

 

flash

The media player type, if html or flash.

width

Optional

480 pixels

Width of the media player, in pixels.

wmode

Optional

window

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
    When you set playback type as Flash, value of this attribute is set to opaque, and ignores the default/user-specified value.

Example

In this example, the FLV file is stored in the web root used by the ColdFusion server. You need to store an FLV file - mediafile.flv in the location _web_root__xyz_. You can now create the media player with the following content:

<h3>cfmediaplayer Example</h3>
<cfmediaplayer
name="Myvideo"
source="/xyz/mediafile.flv"
width=500
height=400
align="center"
quality="high"
fullscreencontrol="true"/>
<h3>cfmediaplayer Example</h3> <cfmediaplayer name="Myvideo" source="/xyz/mediafile.flv" width=500 height=400 align="center" quality="high" fullscreencontrol="true"/>
<h3>cfmediaplayer Example</h3> 
<cfmediaplayer 
name="Myvideo" 
source="/xyz/mediafile.flv" 
width=500 
height=400 
align="center" 
quality="high" 
fullscreencontrol="true"/>

The following code illustrates styling of the media player:

<cfset bgColorTheme = "EDC393">
<cfset titleColorTheme = "800517">
<cfset controlsColorTheme = titleColorTheme>
<cfset progressColorTheme = "E67451">
<cfset progressbgColorTheme = "FFF8C6">
<cfmediaplayer name="player2" style="bgcolor:#bgColorTheme#;
titletextcolor:#titleColorTheme#;titlebgcolor:#bgColorTheme#;controlbarbgcolor:
#bgColorTheme#;controlscolor:#controlsColorTheme#;progressbgcolor:#progressbg
ColorTheme#;progresscolor:#progressColorTheme#;borderleft:20;borderright:20;
bordertop:10;borderbottom:13" hideborder="false" hideTitle=false controlbar="true" source="#defaultFlvfile#">
<cfset bgColorTheme = "EDC393"> <cfset titleColorTheme = "800517"> <cfset controlsColorTheme = titleColorTheme> <cfset progressColorTheme = "E67451"> <cfset progressbgColorTheme = "FFF8C6"> <cfmediaplayer name="player2" style="bgcolor:#bgColorTheme#; titletextcolor:#titleColorTheme#;titlebgcolor:#bgColorTheme#;controlbarbgcolor: #bgColorTheme#;controlscolor:#controlsColorTheme#;progressbgcolor:#progressbg ColorTheme#;progresscolor:#progressColorTheme#;borderleft:20;borderright:20; bordertop:10;borderbottom:13" hideborder="false" hideTitle=false controlbar="true" source="#defaultFlvfile#">
<cfset bgColorTheme = "EDC393"> 
<cfset titleColorTheme = "800517"> 
<cfset controlsColorTheme = titleColorTheme> 
<cfset progressColorTheme = "E67451"> 
<cfset progressbgColorTheme = "FFF8C6"> 
<cfmediaplayer name="player2" style="bgcolor:#bgColorTheme#; 
titletextcolor:#titleColorTheme#;titlebgcolor:#bgColorTheme#;controlbarbgcolor:
#bgColorTheme#;controlscolor:#controlsColorTheme#;progressbgcolor:#progressbg
ColorTheme#;progresscolor:#progressColorTheme#;borderleft:20;borderright:20;
bordertop:10;borderbottom:13" hideborder="false" hideTitle=false controlbar="true" source="#defaultFlvfile#">

Get help faster and easier

New user?