Code of the example above <txp:cfm_videoplayer width="768" height="432" video="9" postermovie="5" ipodversion="8" autoplay="false" controlbar="over" bufferlength="2" smoothing="true" logo="/images/4.png"/>

_{Version 0.2.09 – initial beta release Build at the Circus Family devlab by Peejee}

Get it

- Download latest version 2.10 cfm_videoplayer

- Download version 2.09 cfm_videoplayer

- Older version cfm_videoplayer_208.txt

What does it do?

This plugin is designed to allow you to easily add video to your site. With iPhone, Android and Blackberry and iTunes video Podcast support. You can embed video files from your Textpattern file tap or use url’s to external located video files.

It uses the excellent JW FLV Player which can handle FLV, MP4, MP3, AAC, JPG, PNG and GIF files.
and is based on the wlk_qt script made by Walker Hamilton.
It uses two files; swfobject.js and player.swf

All you need to do is to put the files in the root of your textpattern site, add the javascript to the head section of your site, and place the cfm_videoplayer tag in an article, form or page.
Then your ready to embed video on your site!

Installation

1. Download cfm_player and get the JW FLV Player
2. Copy swfobject.js and player.swf to the root of your site (or the appropriate directory)
3. Copy paste the plugin code and activate the plugin through the ‘admin->Plugins’ menu in Textpattern
4. Add the swfobject script to the header of the page
   <script src="/swfobject.js" type="text/javascript"></script>
5. Additional add custom fields to your article and add the cfm_player to the form that renders your post. See Usage Examples
6. That’s it! You’re done. You can now enter the following into a post or page in to insert a video:
   <txp:cfm_videoplayer video="id number of file" postermovie="id number of image" />

Usage Examples

Basic embed in article:

The basic tag to include video’s to your site that are not in the textpattern database or on an external server.

<txp:cfm_videoplayer width="512" height="288" video="http://linktoyourfile" postermovie="http://linktoyourfile" />

When the video’s are hosted on your site and in the textpattern database you can also use this tag:

<txp:cfm_videoplayer width="512" height="288" video="number of file" postermovie="number of image" />

Embed with custom fields

Use the fieldname and pmfieldname attributes.

1. Create two custom fields, one custom field for the video and one custom field for the posterframe.
   for example; name the custom field where you put the flv/mp4 video file in “video1”
   name the custom field where you will put the posterframe in “poster”
2. Then add to the output form the cfm_videoplayer tag.
   Something like this:
   <txp:cfm_videoplayer width="512" height="288" fieldname="video1" pmfieldname="poster" ipodversion="ipodversion"
3. Upload a video to the textpattern Files tap, and add a description. After upload remember the ID of the file
4. Upload a posterframe to the textpattern Image tap, and add Alternate text and Caption. After upload remember the ID of the image.
5. Create an article add the file id of the video to the “video1” field and add the image id of the posterframe to the “poster” field.
6. Post your article and, if all went well you can watch the video.

Podcasts

To use this plugin to spread your video’s as a RSS feed for a video podcast to itunes. To make this work you have to enable Allow PHP in pages and Allow PHP in articles set to yes at Preferences->Advanced->Publish.
In this example we use the excerpt for the description of our item’s

1. First download the mg_setheader plugin from Michael Gravel
2. Create the Form myrss_podcast that will spit out the articles. Check the tags, modify them to your own needs.
   <item> <title><txp:title /></title> <itunes:author><txp:author /></itunes:author> <itunes:summary> <txp:php> $text = excerpt ( array () ); echo strip_tags($text); echo "\n"; </txp:php> </itunes:summary> <pubDate><txp:posted format="%a, %d %b %Y %I:%m:%S" /> GMT</pubDate> <link><txp:permlink /></link> <txp:cfm_videoplayer width="512" height="288" fieldname="video1" pmfieldname="poster" ipodversion="ipodversion" podcast="true"/> <itunes:keywords>Your podcast keyword,<txp:custom_field name="Keywords"/></itunes:keywords> </item>
3. create a page design that spit outs the RSS feed and give it a name like myrrspodcast. Again check the tags, modify them to your own needs, if you only want to output one or more sections, check the section tag.
   <txp:mg_setheader name="Content-Type" value="application/rss+xml" /><?xml version="1.0" encoding="UTF-8"?> <rss xmlns:itunes="http://www.itunes.com/dtds/podcast-1.0.dtd" version="2.0"> <channel> <generator>http://textpattern.com/</generator> <title>Add your podcast title here</title> <link><txp:link_to_home /></link> <language>en-us</language> <copyright>2009 Your name</copyright> <itunes:subtitle>Our Podcastk</itunes:subtitle> <itunes:author>Yourname</itunes:author> <itunes:summary>your little summary info on your podcast</itunes:summary> <description>and a description =)</description> <itunes:owner> <itunes:name>again yourname</itunes:name> <itunes:email>your email</itunes:email> </itunes:owner> <itunes:image href="Put here your image like http://yourdomain/images/130.jpg" /> <itunes:category text="TV &amp; Film"/> <itunes:explicit>no</itunes:explicit> <txp:article_custom allowoverride="0" form="myrss_podcast" limit="1000" pgonly="0" section="podcast" /> </channel> </rss>
4. create a section to output your podcast; In this example I use the name “podcast” So the URL for the feed will be http://yoursite/podcast/ when curl is enabled.
5. Start filling your podcast section with articles.
6. Check your feed at http://yourdomain/podcast additionally you can use feedburner, and add it to itunes.

More custom fields for mobile browsers

Additional you can add more custom fields. For example if you would like to add an alternative for the mobile platform. For example the iPhone.

1. Add the custom field ipodversion
2. Then add to the output form the cfm_videoplayer tag.
   Something like this:
   <txp:cfm_videoplayer width="512" height="288" fieldname="video1" pmfieldname="poster" ipodversion="ipodversion"
3. encode a basic mp4 file with max dimensions of 320×240 or use Quicktime Pro built-in export to iPhone feature.
4. Upload a the iphone/ipod version video to the textpattern Files tap, and add a description. After upload remember the ID of the file
5. Create a new article add the file id of the video to the “video1” field, add the image id of the posterframe to the “poster” field and finally add the video id of the ipodversion to the “ipodversion” field.

Take total control

Plugin specific attributes

• video location of the mediafile or playlist to play.
• postermovie location of a preview image; shown in display and playlist.
• fieldname name of the field where mediafile or playlist to play can be found
• pmfieldname name of the field where image for posterframe can be found
• ipodversion
• showdownload when set to true download link to media appears in controller
• mobilewidth if set the standard width will be overruled with this one
• mobileheight if set the standard height will be overruled with this one
• class (cfm_videoplayer) set the class of the containing div

You can use all the flashvars as attributes with the cfm_videoplayer tag that the FLVplayer supports.
Check them out in the next chapter.

Supported variables for the FLVplayer Flash (flashvars)

File properties

• link (undefined): url to an external page the display, controlbar and playlist can link to.
• title (undefined): title of the video, shown in the display or playlist.
• type (undefined): this is determines what type of mediafile this item is, and thus which model the player should use to determine playback. Supported values in the default player are sound, image, video, youtube, http or rtmp. Custom models for certain API’s or CDN’s can be loaded to extend the filetype support (e.g. lighttpd, limelight or brightcove. More info here.

Colors

• backcolor (undefined): background color of the controlbar and playlist. This is white with the default skin.
• frontcolor (undefined): color of all icons and texts in the controlbar and playlist.
• lightcolor (undefined): color of an icon or text when you rollover it with the mouse.
• screencolor (undefined): background color of the display.

Layout

• controlbar (bottom): position of the controlbar. Can be set to bottom, over and none.
• height (512): height of the display in pixels. When resizing is set to false, this is the overall player height.
• playlist (none): position of the playlist. Can be set to bottom, over, right or none.
• playlistsize (180): when below this refers to the height, when right this refers to the width of the playlist.
• skin (undefined): location of a SWF file with the player graphics. Here’s a skinning tutorial , an overview of supported elements and a couple of example skins
• width (288): width of the display in pixels. When resizing is set to false, this is the overall player width.

Behaviour

• autostart (false): automatically start the player on load.
• bufferlength (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.
• displayclick (play): what to do when one clicks the display. Can be play, link, fullscreen, none, mute, next. When set to none, the handcursor is also not shown.
• fullscreen (false): fullscreen state of the player. This is a read-only flashvar, useful for plugins.
• icons (true): set this to false to hide the play button and buffering icon in the middle of the video.
• item (0): playlistitem that should start to play. Use this to set a specific start-item.
• linktarget (_blank): browserframe where link from the display are opened in. Some possibilities are ‘_self’ (same frame) or ‘_blank’ (new browserwindow).
• logo (undefined): location of an external jpg, png or gif image to show in a corner of the display. With the default skin, this is top-right, but every skin can freely place the logo.
• mute (false): mute all sounds on startup. Is saved in a cookie.
• replace (undefined): set this flashvar to a regular expression that is applied to the media file urls. You can use this to obscure file paths (people cannot copy-paste them from HTML). An example is deny|allow which will change the url www.mysite.com/deny/video.flv into www.mysite.com/allow/video.flv.
• repeat (none): set to list to play the entire playlist once, to always to continously play the song/video/playlist and to single to continue repeating the selected file in a playlist.
• resizing (true): by default, the player will resize itself to fill the entire canvas. Set this to false if you don’t want the player to resize (e.g. when you load the player in a Flex application).
• respectduration (false): when set to true, the player will respect any duration flashvar you have set. This allows you to show a 15sec. preview of a file that might actually be a few minutes long.
• shuffle (false): shuffle playback of playlist items.
• smoothing (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.
• stretching (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).
• volume (90): startup volume of the player. Can be 0 to 100. Is saved in a cookie.

Google Analytic integration.

Introduction The Google Analytics plugin for the JW Player is designed to help you understand how well your video content is performing online. The plugin tracks events that occur in the player, aggregates it, and passes along the relevant information for tracking within Google Analytics.

Requirements

• JW Player 4.1+ Note – User bandwidth data is only available when using JW Player 4.4+
• Script access enabled (“allowscriptaccess” must be set to “always”)
• A Google Analytics account with event tracking enabled. If you do not have access to Google Analytics or event tracking, you can register at [http://www.google.com/analytics/].

Note – You do not need to have the Google Analytics tracking code present on the page with the player for tracking to function.

Setup Once you have a Google Analytics account, tracking data via the plugin is a snap! It simply requires a small modification to the code you use to embed your player. Add this to the cfm_videoplayer embedd code:

gapro_accountid="UA-XXXXXXX-X"

Where UA-XXXXXXX-X is your Google Analytics account ID.

Example: <txp:cfm_videoplayer width="512" height="288" video="number of file" postermovie="number of image" gapro_accountid="UA-XXXXXXX-X" />

Variables

• gapro_accountid = (UA-XXXXXXX-X) Your Google Analytics account ID. Generally of the form “UA-XXXXXXX-X”. This must be set for the plugin to function.
• gapro_trackstarts = (true) Controls whether data about video starts are sent to Google Analytics. One start event is sent each time a viewer begins playback from the first frame of the video. Note – This include starts that occur after the viewer pressed stop, or completed the video and pressed play again.
• gapro_trackpercentage = (true) Controls whether data about the percentage of the total video content played by the viewer is sent to Google Analytics.
• gapro_tracktime = (true) Controls whether data about the total time the viewer spent watching the video is sent to Google Analytics.
• gapro_trackcompletes =(false) this is in beta and be carefull!!! Controls whether data about video completion are sent to Google Analytics. One completion event is sent each time a viewer allows playback to run through the last frame of video.false

More information about the Google Analytics plugin at Longtail video