Playlists for the FLV Media Player with FieldFrame
published on Jul 19th, 2009 // 13 Comments
Create a customisable media playlist solution right inside your installation of ExpressionEngine using FieldFrame and the FLV Media Player plugin
introduction
As more and more clients become used to the idea of having video on their website, the previous bespoke setups that only their web developer could change or add to are long gone. Clients want full control, and with that, us as web developers are having to become educators as much as providers.
This tutorial covers creating a playlist for the FLV Media Player plugin with the overall intention of making it as easy on the client as possible for updating their video content. YouTube is easy because a client can upload a video in any format and it is ready to go straight away. So lets use that concept as a base for this tutorial.
Third Party Addons
FieldFrame
Download the current version of FieldFrame. Follow Brandon’s installation instructions making sure to enable the FF Matrix Field Type from the Fieldtypes Manager (found in FieldFrame’s settings or from Admin > Utilities)
FLV Player Plugin
Download the most current version of the FLV Media Player Plugin
I generally use the following upload locations to keep things organised.
/system/plugins/pi.flvplugin.php
/inc/swf/player.swf
/inc/swf/yt.swf
/inc/swf/skins/
Weblog Setup
- Create a new weblog called with a short name of ‘media_gallery‘
- Create a new custom field group called ‘Media‘
- Create a custom field inside that group called ‘media_videos‘
- Give it a Label of ‘Playlist‘
- Select FF Matrix as the FieldType
- Set up your matrix as per the following image
Now go ahead and create a new entry. This entry will be our playlist. Populate a few rows and save. If at a later stage we wanted another playlist, then we just need to create a new entry.
Playlist Template
Create a new XML type template called ‘media-playlist‘ (it can live in any template group). Add the following to it and save
<playlist>
<trackList>
{exp:weblog:entries weblog="media_gallery" limit="1" disable="trackbacks|categories|pagination|category_fields|member_data"}
{media_videos}
<track>
<title>{cell_1}</title>
<annotation>{cell_2}</annotation>
<location>http://www.youtube.com/watch?v={cell_3}</location>
<image>http://img.youtube.com/vi/{cell_3}/0.jpg</image>
</track>
{/media_videos}
{/exp:weblog:entries} </trackList>
</playlist>
<annotation> gives us our video description, <location> our YouTube URL and <image> gives us our preview image and playlist thumbnail.
If at a later stage we have more than one playlist we can use the entry_id= parameter to identify the playlist entry from our Media Gallery weblog
Player Template
Add the following to the template where you would like the player to display with appended playlist.
{exp:flvplugin playerpath="/inc/swf/player.swf" file="/template_group/media-playlist/" playlist="bottom" playernumber="23" width="512" height="288" skin="/inc/swf/skins/stijl.swf" backcolor="505150" frontcolor="c9171e" lightcolor="1aa3be" backcolor="bad0be" icons="true" controlbar="bottom" smoothing="true" stretching="fill"}
<div id="player23"></div>
Things to try
Instead of a normal custom field for the YouTube ID why not try the nGen File Field by nGen Works for uploading your own FLV’s
13 Comments
Editor says:
Smartpill,
1. All you videos are included in the matrix which are only inside one entry so I didn’t need to limit it to one as there is only one. If you have more than one playlist then you can use this parameter or even just use the entry_id=
2. There is no need you can do so. In other tutorials i suggest the entry id as it is unique and if you have multiple players on the same page you need each one to have a unique div id.
There are 3 images you can use for the YouTube image 0.jpg is the largest but you also have 1.jpg and 2.jpg to play with too.
scott Thigpen says:
Hey I’ve almost got everything working on this but I come up with this http://atlantadsaa-dev.org/ (I’m currently working on this so if you it working, I got it. But here is a screen grab of how it looks now: http://skitch.com/sthig/b4ctu/homepage )
this is my code
{exp:flvplugin playerpath="/inc/swf/player.swf" file="/Atlantadsaa/media-playlist" playlist="bottom" playernumber="23" width="642" height="320" skin="/inc/swf/skins/stijl.swf" backcolor="505150" frontcolor="c9171e" lightcolor="1aa3be" backcolor="bad0be" icons="true" controlbar="bottom" smoothing="true" stretching="fill"}
<div id="player23"></div>
my spidey senses say the “player23” needs to be changed to something else, but I’m unsure what to do.
Any help?
Editor says:
@scott, I take it you are up and running?
scott Thigpen says:
actually no, I’m having a terrible time with this. Is there anyway we could chat on im and/or you could answer some questions for me?
Kevin Evans says:
What would be the playerlist code if I had just a regular old upload field using the upload file or ngen File ? instead of Youtube field?
Alex says:
Great! but i have some problems to view more than one playlist in one page i want to create an events page, one event (entries) one playlist…ten events (entries) ten different playlist. i try with entry_id parameter in xml but not working Any help?
thanks!
Rod says:
Hi… nice work on this, but I have one small — but huge — stumbling block. I have a movie review site, and want to have a playlist of clips within the review page of each movie. Each playlist would contain clips for just that movie. I have the entire thing built using FF Matrix, etc., and it’s almost working. But how can I pass an entry_id or some other info to the playlist template? Please embarrass me by showing me how obvious this is! Thanks!
Rod says:
Okay … once I got some sleep I realized how easy this was — you simply pass the info in the URL. Working great now. Thanks so much for your good work with this plugin!
smartpill says:
Thank you for this. The timing is perfect. I have a couple of questions though…
1. Should there be
limit="1"for a playlist or will that limit the playlist data to only one video?2. I’m guessing the entry ID should be used in the player template for “playernumber” and
<div id="player{entry_id}"></div>maybe?I didn’t realize you could grab the youTube preview image. Thanks for that too.