Aim
This tutorial will provide you with the necessary information to:
- configure Drupal and the SWF Tools and Lightbox2 modules.
- create an ImageCache preset.
- create a new content type for uploading flash video and its corresponding video screengrab image.
- create a basic view that only displays thumbnails of the video screengrab images.
- modify the view to display and play the corresponding flash video in a Lightbox2 overlay after clicking on the screengrab thumbnail.
- solve problems if this tutorial doesn't work.
- take it a step further...
This tutorial was created using a 'clean' Drupal installation i.e. one that didn't contain any content or additional modules. For a better understanding of the Lightbox2 and SWF Tools modules, this tutorial deals with the most basic, minimum requirements for displaying flash video in a Lightbox2 overlay, which is launched by clicking on a thumbnail image that has been automatically created by ImageCache, and only includes the steps that are necessary to achieve this aim. It has been successfully tested with *.swf, *.flv and *.mp4 videos both online and locally using WAMP.
We are very happy at waldbeek.com to release this tutorial to the Drupal community as a 'thank you' to all of the people who continually provide their knowledge and support for free to maintain and extend Drupal - keeping it the number one open source, free content management system - please feel free to link to this tutorial and tell the world about it.
Minimum Software Requirements
| Content Management System | Version | Download Link |
|---|---|---|
| Drupal | 6.15 | http://drupal.org |
| Modules | Version | Download Link |
|---|---|---|
| Administration Menu 1 | 6.x-1.5 | http://drupal.org/project/admin_menu |
| Backup and Migrate 1 | 6.x-2.2 | http://drupal.org/project/backup_migrate |
| CCK | 6.x-2.6 | http://drupal.org/project/cck |
| FileField | 6.x-3.2 | http://drupal.org/project/filefield |
| ImageAPI | 6.x-1.6 | http://drupal.org/project/imageapi |
| ImageCache | 6.x-2.0-beta10 | http://drupal.org/project/imagecache |
| ImageField | 6.x-3.2 | http://drupal.org/project/imagefield |
| Lightbox2 | 6.x-1.9 | http://drupal.org/project/lightbox2 |
| SWF Tools | 6.x-2.5 | http://drupal.org/project/swftools |
| Views | 6.x-2.8 | http://drupal.org/project/view |
1 These modules are recommended but are not absolutely necessary for this tutorial.
| Additional Files | Version | Download Link |
| JW Flash Player 2 | Version | http://www.longtailvideo.com/players/jw-flv-player |
2 The Longtailvideo JW Flash Player is free for non-commercial use only.
1] Installing the Modules and Additional Files
1.1] Unpack and install the JW Flash Player listed in the Additional Files table in the libraries folder - NOTE: you might need to manually create this folder with your FTP program:
'http://your-server.com/drupal-installation-root-folder/sites/all/libraries'.
1.2] Unpack and install the modules listed in the Modules table in the standard third-party module folder in Drupal:
'http://your-server.com/drupal-installation-root-folder/sites/all/modules'.
| drupal-installation-root-folder/ | sites/ | all/ | libraries/ | mediaplayer |
| modules/ | admin_menu | |||
| backup_migrate | ||||
| cck | ||||
| filefield | ||||
| imageapi | ||||
| imagecache | ||||
| imagefield | ||||
| lightbox2 | ||||
| swftools | ||||
| views |
2] Enable the Modules
2.1] Using your browser, navigate to 'http://your-server.com/drupal-installation-root-folder/admin/build/modules/list' and enable the checkboxes for:
- Administration menu (optional)
- Content
- FileField
- ImageField
- ImageAPI
- ImageAPI GD2
- ImageCache
- ImageCache UI
- Backup and Migrate (optional)
- Lightbox2
- SWF Tools
- Views
- Views UI
Click the [Save configuration] button.
3] Configure the Settings for SWF Tools and Lightbox2
The most confusing aspects of these modules are:
- The settings for SWF Tools on the modules administration page. Because we are not trying to play flash video that is embedded within the node itself in this tutorial, it is not necessary to enable any of the third-party players for SWF Tools on the modules administration page - only the SWF Tools module itself should be enabled (Image 3.1). These settings do not have anything to do with the JW Flash Player that is installed in 'http://your-server.com/drupal-installation-root-folder/sites/all/libraries/mediaplayer'.
Image 3.1 - SWF Tools module settings.
- The settings for the 'File handling' for SWF Tools - from the administration menu, select: 'Site configuration > SWF Tools > File handling' and expand the 'File handling' section. Even though none of the third-party players have been enabled on the modules administration page for SWF Tools, it is still possible to use the 'Generic FLV player' to play flash video that is embedded within the node itself (Image 3.2).
Image 3.2 - SWF Tools File handling settings.
- The 'Video settings' for Lightbox2 - from the administration menu, select: 'Site configuration > Lightbox2 > General' and expand the 'Video settings' section. By default, the 'Enable video support' setting for Lightbox2 is disabled. Even after enabling this checkbox and saving the settings, Lightbox2 will still not be able to display flash video because the default setting for the 'Path to FLV Player:' is wrong. This must be set to 'sites/all/libraries/mediaplayer/player.swf' (Image 3.3) - which is the path to the JW Flash Player that is installed in 'http://your-server.com/drupal-installation-root-folder/sites/all/libraries/mediaplayer'.
Image 3.3 - Lightbox2 Video settings.
4] Create an ImageCache Preset for the Video Screengrab Thumbnail
From the administration menu, select: Site building > ImageCache > Add new preset
4.1] Enter a name for the new preset in the 'Preset Namespace:' text field e.g. 'Video_Thumbnail_Preset' (Image 4.1).
Image 4.1 - Adding a new ImageCache preset.
Click the [Save Preset] button.
4.2] Set the image processing actions for the preset:
Click the 'Add Scale' link.
Set the Width to 200 and the Height to 150 (200 x 150 = 4:3 aspect ratio) (Image 4.2).
Image 4.2 - Setting the ImageCache Actions.
Click the [Create Action] button.
5] Create a new Content Type for the Video and Screengrab Image
From the administration menu, select: Content management > Content types > Add content type
5.1] Define the content type on the 'Content types' page:
Specify the name for the new content type in the 'Name:' field e.g. 'Video'.
Specify the type for the new content type in the 'Type:' field e.g. 'video'.
Click on the 'Workflow settings' link to display the default options and disable the checkbox for 'Promoted to front page' (Image 5.1).
Image 5.1 - Defining the Video content type.
Click the [Save content type] button. This action will display the list of content types.
5.2] Add and Configure Two Custom Content Fields to the New Video Content Type
Click the 'manage fields' link for the Video content type. The next screen displays a list of the fields that currently exist in the Video content type.
5.2.1] Add a new field for uploading the flash video file:
Define the name for the field in the 'Label' text field e.g. 'Video'.
Define the internal Drupal name for the field in the 'Field name' text field e.g. 'field_video'.
Set the 'Type of data to store' dropdown to 'File'.
Set the 'Form element to edit the data' dropdown to 'File Upload' (Image 5.2.1).
Image 5.2.1 - Adding a flash video upload field to the Video content type.
Click the [Save] button. The options for this new Video File Upload field are displayed on the next page.
Change the 'Permitted upload file extensions:' from 'txt' to 'swf flv mp4'.
In the 'Global settings' section, enable the 'Required' checkbox.
Click the [Save field settings] button. The list of fields existing in the Video content type is displayed again.
5.2.2] Add a new field for uploading the video's screengrab image file:
Define the name for the field in the 'Label' text field e.g. 'Video Thumbnail'.
Define the internal Drupal name for the field in the 'Field name' text field e.g. 'field_thumb'.
Set the 'Type of data to store' dropdown to 'File'.
Set the 'Form element to edit the data' dropdown to 'Image' (Image 5.2.2).
Image 5.2.2 - Adding a video screengrab image upload field to the Video content type.
Click the [Save] button. The options for this new image field are displayed on the next page.
In the 'Global settings' section, enable the 'Required' checkbox.
Click the [Save field settings] button. The list of fields existing in the Video content type is displayed again.
5.2.3] Set the method for displaying the fields:
Click the 'Display fields' tab.
Set the 'Label', 'Teaser' and 'Full node' dropdowns for both custom 'Video' and 'Video Thumbnail' content fields to <hidden>. This setting makes the flash video and screengrab image invisible when a node of the new Video type is displayed in teaser or full node mode (Image 5.2.3).
Image 5.2.3 - Setting the Teaser and Node display method for the custom fields to <hidden>.
Click the [Save] button.
6] Create a Video Node - Upload a Flash Video and its Screengrab Image using the New Video Content Type
From the administration menu, select: Content management > Create content > Video
Specify the 'Title:' for the Video node e.g. 'Video 01'.
Scroll down the page and select the flash video by clicking the [Browse] button next to the empty 'Video:' field.
Select the screengrab image (that will be used for the thumbnail) by clicking the [Browse] button next to the empty 'Video Thumbnail:' field (Image 6.1).
Image 6.1 - Creating a Video node.
Click the [Save] button. The new Video node should be displayed but the flash video and the associated screengrab image will not be visible (because these fields were set to <hidden> in step 5.2.3).
NOTE: This tutorial will be more effective if you create several Video nodes, each containing one flash video and one screengrab image.
7] Create a Basic View to Display Content from the Video Nodes
From the administration menu, select: Site building > Views > Add
Specify the name for the new view in the 'View name:' field e.g. 'View_Video'.
Enter a description for the new view in the 'View description:' field e.g. 'Displays content from nodes of the Video content type' (Image 7.1).
Image 7.1 - Defining a Video View.
Click the [Save] button. The standard 'Edit view' screen will be displayed for the new 'View_Video' view.
7.2] Set the Default display parameters for the view
7.2.1 ] Click the [+] symbol in the Filters section and add two filters:
Scroll down the list of 'Default: Add filters' and enable the checkboxes for 'Node: Published' and 'Node: Type' (Image 7.2.1).
Image 7.2.1 - Adding two filters to the Default display.
Click the [Add] button.
In the 'Defaults: Configure filter Node: Published' section that will appear, enable the 'Published:' > 'Yes' radio button. Click the [Update] button.
In the 'Defaults: Configure filter Node: Type' section that will appear, enable the 'Node type:' > 'Video' radio button. Click the [Update] button.
NOTE: A warning will be displayed automatically: 'Display "Defaults" uses fields but there are none defined for it or all are excluded.'. This is a standard warning - you haven't done anything wrong! Let's add some fields to the Default display...
7.2.2] Click the [+] symbol in the Fields section and add two fields:
Scroll down the list of 'Default: Add fields' and enable the checkboxes for 'Content: Field (field_video)' and 'Content: Field (field_thumb)' (Image 7.2.2).
Image 7.2.2 - Adding two fields to the Default display.
Click the [Add] button.
In the 'Defaults: Configure field Content: Video (field_video)' section that will appear, enable the 'Exclude from display' checkbox. Click the [Update] button.
Enable the 'Label:' > 'None' radio button.
Set the 'Format:' dropdown to 'URL to file'. Click the [Update] button.
In the 'Defaults: Configure field Content: Video Thumbnail (field_thumb)' section that will appear, enable the 'Label:' > 'None' radio button.
Set the 'Format:' dropdown to 'Video_Thumbnail_Preset image'. Click the [Update] button.
Click the [Save] button to save the Default display settings.
7.3] Add a Page display to the new 'View_Video' view
7.3.1] Make sure the dropdown is set to 'Page' and click the [Add display] button.
NOTE: All of the settings that were made to the Default display in step 7.2 are applied to the new Page display automatically. This means that when this Page display is initiated (i.e. displayed as a standard Drupal node), only the 'Video Thumbnail' fields will be displayed as 200x150 pixel thumbnail images (using the 'Video_Thumbnail_Preset' ImageCache preset) that exist on every Video content type that has been published.
NOTE: A warning will be displayed automatically: 'Display "Page" uses a path but the path is undefined.' This is a standard warning - you haven't done anything wrong! Let's define the path for the new Page display...
7.3.2] In the 'Page settings' section, click the 'Path: None' link.
In the 'Page: The menu path or URL of this view' section that will appear, enter the path for the Page display e.g. 'videos' (Image 7.3.2).
Image 7.3.2 - Setting the Path for the Page display.
Click the [Update] button.
Click the [Save] button to save the Page display settings and the overall view.
7.4] Test the Page display of the 'View_Video' view
Using your browser, navigate to 'http://your-server.com/drupal-installation-root-folder/videos'. You should see a node containing a list of the 'Video Thumbnail' fields in 200x150 pixel format. At the moment, nothing will happen if you click on a thumbnail - Lightbox2 will not be initialised and the corresponding flash video will not be played.
7.5] Modify the Page display to display the flash video in Lightbox
From the administration menu, select: Site building > Views > List
7.5.1] In the 'Normal Node view: View_Video' row, click the 'Edit' link. The Default display of the View_Video view configuration page will be displayed.
Important: Make sure that you click on 'Page' in the left-hand column to select the Page display.
NOTE: The Page display is currently using the settings from the Default display - which is illustrated by the italicised text for all of the sections apart from the 'Page settings' section.
7.5.2] In the 'Fields' section, click on the 'Content: Video Video_Thumbnail_Preset image' link.
IMMEDIATELY click the [Override] button on the right-hand side of the 'Page: Configure field Content: Video Thumbnail (field_thumb)' section.
Enable the 'Rewrite the output of this field' checkbox. This action will reveal the 'Replacement patterns' options for this setting.
Image 7.5.2 - Configuring the Video Thumbnail field for the Page display.
The 'Replacement patterns' section details the substitution patterns for the two fields. These patterns are used to dynamically generate the link that will be applied to each of the video thumbnail images on the 'videos' node. The substitution patterns should be:
- [field_video_fid] == Content: Video (field_video)
- [field_thumb_fid] == Content: Video Thumbnail (field_thumb)
If they do not appear exactly in this order, the order of the fields themselves in the Page view will need to be changed.
7.5.3] In the 'Text:' text area underneath the 'Rewrite the output of this field' text, enter the following html code:
<a href="[field_video_fid]" rel="lightvideo">[field_thumb_fid]</a>
Image 7.5.3 - Rewriting the output of the Video Thumbnail field for the Page display.
This line of code enables Drupal to output a standard html link, where the target is the path to the flash video (defined by the dynamic [field_video_fid] code). The link itself is applied to the corresponding video screengrab thumbnail (defined by the dynamic [field_thumb_fid] code). The most important part of the code is rel="lightvideo" - this initialises Lightbox2 and enables the video to be displayed and played by the JW Flash Player within the Lightbox2 overlay.
Click the [Update] button to save the modifications made to the overridden 'Content: Video Video_Thumbnail_Preset image' field.
Click the [Save] button to save the Page display settings and the overall view.
8] Test the Page display of the 'View_Video' view
Using your browser, navigate to 'http://your-server.com/drupal-installation-root-folder/videos'. You should see exactly the same node containing a list of the 'Video Thumbnail' fields that you obtained in step 7.4. However, after clicking on a thumbnail, Lightbox2 should now be initialised and the corresponding flash video should be played using the JW Flash Player.
Solving Problems
- Ensure that your browser is able to play flash video i.e. the flash browser plugin is installed correctly.
- Ensure that both the Lightbox2 and SWF Tools modules are installed correctly and are enabled on the modules administration page.
- Ensure that both the Lightbox2 and SWF Tools settings are configured correctly.
Enhancing this Technique
- Naturally, in the spirit of the Drupal community and the Open Source movement, it would be preferable to play the flash video with a truly free, open-source flash player.
- The view could be highly modified to suit your taste: output a different display, such as a block - add sorting - only select videos tagged with a specific taxonomy term or uploaded by a specific user - use paging - use panels........
- The flash player could be modified for each video dynamically, according to it's dimensions.
- A thumbnail could be displayed as a background before the video is played.
- e.t.c........
Any trademarks mentioned in this article are the property of their respective owners.
Very NICE
Your step is perfectly woking i really thanking you
Nice site
Thank you for this great tutorial. The player does not work here. Instead [url=http://www.testking.com/640-802.htm]640-802[/url] of playing the movie, the browser dowloads the movie. What can I do, to solve the problem.
Nice site
This line of code enables Drupal to output a standard html link, where the target is the path to the flash video (defined by the dynamic [field_video_fid] code). The link itself is applied to the corresponding video screengrab thumbnail (defined by the dynamic [field_thumb_fid] code). The 640-802 most important part of the code is rel="lightvideo" - this initialises Lightbox2 and enables the video to be displayed and played by the JW Flash Player within the Lightbox2 overlay.
Thanks
Brainlee
Thats a great
Thanks a gazillion.
Do you know how long I have been looking for a decent tutorial?
Thanks
Thanks man!
This is the way to write a tutorial! great work!
Jasonh
Awesome tutorial. Thx!!
dreamdezigns
thanks for the great work , useful tutorial
I am having the same problem.
I am having the same problem. The browser is not playing the file, it is either loading the code in the browser window or tries to download the flv file.
http://www.ya7by.com/
sujeet.k@infomazeapps.com
I am having the same problem. The browser is not playing the file, it is either loading the code in the browser window or tries to download the flv file.
sujeet.k@infomazeapps.com
on lightbox when i rightclick then it displays movie not loaded
Marya
I am having the same problem. The browser is not playing the file, it is either loading the code in the browser window or tries to download the flv file.
شات - دردشة
Had a problem, fixed it
At first when clicking the link it wouldn't play on the browser. Instead it wanted to download it onto my workstation.
Turns out the settings screen at admin > settings > lightbox2 was deficient. I added under video settings > FLV Player flashvars: > autoplay=1&playerMode=normal which is the example text on my settings screen and it works like a charm.
Thanks alot.
Marty
Thanks a lot man !
So nice !!!!!!!!
Thank you so much !
johncein
An informative post.... Thanks for sharing.
Flv Player
thanks!
YOU ARE AWESOME!!!
Thank you for this nice tutorial!
I searched weeks for this.
It's great and it works!
Els
Great tutorial.
A great tutorial that works perfectly. Good work!
Fantastic tutorial on Drupal flash video lightbox! -Drupal.
Fantastic tutorial on Drupal flash video lightbox! Module installation is quick and easy....... Clear steps, useful post to share with us :) Thanks a lot! Drupal Video Player
http://www.hdflvplayer.net/drupal-web-video-player/
Problem rewriting the output
Hi, very nice tutorial, thanks!
Unfortunately, I'm having problem rewriting output for field_thumb on page view. My text is exactly yours
[field_thumb_fid]
and the names of the variables match those ones shown in the replacements patterns panel. When the page is viewed, it seems that it does not translate well (I see the thumbnail and the string " rel="lightvideo"> side by side). The source of the page is :
demo.swf" rel="lightvideo">
The rel="lightvideo" is outside the html tags.
Any help would be very appreciated!
Pat
Replace " with '
Replace " with '
Nice post, but flashvars dont work
I dont get the flashvars to work. When i leave the field empty, the video dont start, when i add:
autoplay=1&playerMode=normal the player and the video load but I have to click start
Using autostart=true gets the
Using autostart=true gets the video to play automatically. So your flashvars line will look like this: autoplay=1&playerMode=normal&autostart=true.
Great tutorial, btw, thanks so much. If only I'd found this a couple of hours earlier...
Great tutorial!
Works as described... on a page. But why doesn't it work in a block? Shouldn't it function the same whether it's on a page or a block? Can anyone help?
WOW
Hi There,That is great post.It is full of information and knowledge.You just solve my problem.I'm still having a problem. If I click on one of ththumbnails on /videos the lightbox will open but it will never start to play. It will just load forever.I am very much thankful to you for this post.Keep it up.Thanks for sharing this.
MichaeL
[url=http://www.pass4exam.com/]pass4sure[/url]
Great post
Hi There,That is great post.It is full of information and knowledge.You just solve my problem.I am very much thankful to you for this post.Keep it up.Thanks for sharing this.
MichaeL
pass4sure
samuel simons
late boomer here but same problem...Thanks for the instructions, I was having a real hard time and no one is here to help me with my difficulties with uploading videos in my two drupal sites...Thanks a lot again..Keep it up!
--
photography tutorial
digital photography tutorials
digital photography tutorial
Thank you. It is a great
Thank you. It is a great tutorial and it works 100%
GREAT TUTORIAL
I for some reason can't get the the sizes correct. The swf file appears bigger than what the window displays. It shows to big and off centered.
Is there any way for the litebox to work in the same way that it does with photos and resize itself to the appropriate size of the uploaded SWF
Hi Men, Fantastic Tutorial
Hi Men,
Fantastic Tutorial thank You..!
A slight modification is necessary, in the the section above ...
''''The 'Video settings' for Lightbox2 - Lightbox2 will still not be able to display flash video because the default setting for the 'Path to FLV Player:' is wrong. This must be set to 'sites/all/libraries/mediaplayer/player.swf' (Image 3.3) - which is the path to the JW Flash Player that is installed in 'http://your-server.com/drupal-installation-root-folder/sites/all/libraries/mediaplayer'.''''
The path is now out of date. It should now read
sites/all/libraries/mediaplayer-5.2/player.swf
Eddison
http://art-magi.com/kilnwizz
Video only playes at domain level
Hi
Great tutorial! I configured it and it works wonderfull when the video is at a directory first level (domain.com/directory or domain.com/page), but when I try to play it in a subdirectory. Any subdirectory (domain.com/directory/dubdirectory), it wont work. The lightbox will kick in but then the video will never appear.
Have you encounter this before? Thank you
-A. Darwin
Thanks!
Your tutorial is really useful. Thanks a lot for so clear explanation!
Great tutorial
Thanks a lot, very useful!
Great Tutorial
Works great... Do you have any thoughts on how I could show the description as a mouseover? Thanks
JeffTackett85@hotmail.com
Movie does not play; flv file is being download
Dear "Waldbeek",
thank you very much for your tutorial. This helps a lot. However, I cannot solve the problem of not playing the movie. Instead it is download (as written above by others). Syntax of the custom html code is correct. Flash works fine with other sites.
Yours Tim
thanks a lot :)
i didn't success in configuring my view. But you show me the way to : "Rewrite the output of this field".
Now I see the light ;)
i'm using shadowbox and SWFObject API, but it is the same.
great job (and btw, very nice portfolio)
Cédric
Local urls ?
Hi, many thanks for this tutorial. I'm trying it right now.
I was wonderning how I would have to modify it to use local urls for (video and thumbnail) files instead of uploaded ones (yet I still need the thumbnail to be resized). TIA.
Alternative Video Player
Hi,
Have a look at Opn Video Player - http://openvideoplayer.sourceforge.net
Also, have a look at Colorbox - http://colorpowered.com/colorbox
Lightbox opens video never plays
Great Tuorial!! I learned a lot. But I'm still having a problem. If I click on one of ththumbnails on /videos the lightbox will open but it will never start to play. It will just load forever.
If I click on it, it will stop loading and I can play it just fine..
Any thoughts?
One thing missing from the
One thing missing from the tutorial are the settings for the lightbox flashvars:
select:
'yoursite.com/admin/settings/lightbox2/general'
and then expand the video settings fieldset.
In the 'FLV Player flashvars:' section add:
autoplay=1&playerMode=normal
I hope this helps!
Player does not work
Thank you for this great tutorial. The player does not work here. Instead of playing the movie, the browser dowloads the movie. What can I do, to solve the problem.
Regards
Stéphane
Same problem
I had the same plroblem until I put a leading / "path to the FLV Player
Hello Stéphane,Thank you for
Hello Stéphane,
Thank you for your comment - and e-mail. The problem that you describe was one that I experienced before getting this to work. It sounds like there is something wrong with your View - are you using a Block display instead of a Page display?
Have you got the syntax of the custom html code correct? i.e. the names of your fields - they might not be exactly the same as:
* [field_video_fid] == Content: Video (field_video)
* [field_thumb_fid] == Content: Video Thumbnail (field_thumb)
Hope this helps,
Rob
Hi Rob
I am having the same problem. The browser is not playing the file, it is either loading the code in the browser window or tries to download the flv file.
I have tried a block view http://www.floots.co.uk/portfolio and a page view http://www.floots.co.uk/portfolio-page - both are acting the same way. The syntax is correct also - otherwise it would not be finding the correct file.
I really hope you can help!
Simon
I found the solution
Hello again.
I found a solution to the above problem.
In the Lightbox2 video settings, under "FLV Player flashvars:", add the following : "autoplay=1&playerMode=normal". The video will then play like it should. I hope this helps somebody!
Post new comment