Free Videos about Mastering Views

How To: Using the Drupal Flowplayer Module

Play Video
Movie link (right-click to download)
Problem with this video? Contact me

Flash and its associated players are all the rage (actually have been for quite some time), except for with the iPad that is. Obviously, you can embed video into your Drupal site in a number of ways.

You can use an external site like YouTube or Blip.tv using the Embedded Media Field Module or you can implement video on your own site using the FLV Media Player Module in conjunction with JW Player.

I've already covered how you can use any of the possible flash players (JW Player or Flowplayer) in this video about SWFTools. So, what was next was Flowplayer and it's here that I've put together a video about using the Flowplayer API Module in conjunction with the respective, and required, Flowplayer flash player and javascript.

Now, you don't have to worry about downloading the Flowplayer Javascript and flash file, those are all included with the Flowplayer API Module. What isn't covered, that I show in the video, is some of the extended coolness you get with things like Flowplayer playlists.

However, if you're seeking to do REALLY cool things with video then Flowplayer API is definitely the way to go. It's going to provide the greatest level of customization (that's customization that YOU'LL have to do), with the lowest amount of overhead, of the other modules I've worked with. You'll have to get into the PHP of your theme to implement, but once you start to learn it, you'll really start to think about radical things like Views based videos series driving Flowplayer to create dynamic playlists and other cool whiz-bang features.

UPDATE: In the video, I mention that Flowplayer is becoming the most popular open source flash player. This is debatable. I should have said it's "my" favorite player. Here are some trends and insights regarding the two most popular players.

thank you for the nice screencast!
i am wondering how you added the playlist plugin with the flowplayer api module.
i was able to render a playlist with views and this javascript from the flowplayer page

$(function() {
     // setup player without "internal" playlists
    $f("player2", "http://releases.flowplayer.org/swf/flowplayer-3.1.5.swf", {
        clip: {baseUrl: 'http://blip.tv/file/get'} 
    // use playlist plugin. again loop is true
    }).playlist("div.petrol", {loop:true});
});

is it possible to load the playlist plugin with the flowplayer_add function?

You'll need to get the Flowplayer playlist javascript file and load that into your site - manually.

Currently, the playlist feature is not integrated into the Flowplayer API module. This is something that will hopefully get integrated into it. There is an issue in the Flowplayer queue to add support for the playlist feature.

For right now, it's more of a manual process to use it. I hope this gets you started in the right direction.

hatsch,

Would you mind giving a tip in the right direction on this? I've been trying to follow the manual configuration example from Flowyplayer documentation—building it into a view template—but can't get the player to load alongside my Views created list of videos.

Use flowplayer_add in template.php or somewhere in the view template?

I was building a DashPlayer based view, but Flowplayer looked like it might be cleaner and more managable.

Thanks for any tips!

Excellent video
I was wondering what exact format do you use for your videos for both audio and video because they are so sharp and clear with a very good voice quality but yet very compressed!
Many thanks

By downloading the video and opening it in Quicktime then using "movie inspector" you can get an idea of what compression settings are being used on QT videos.

Audio - AAC, Mono, 32.000 kHz
Video - H.264, 960 × 600, Millions
Data Rate - 254kbits/s
FPS : 2.38 (So here is how he is achieving such good image quality by limiting the frame rate)

On a different note.. thanks for the awesome videos and site!!!! :)

I really liked this video but am having some difficulty getting everything working. I was wondering if you would mind posting all of the code in your template.php file. You kind of skim over that portion in the video, and I can tell that there is a lot of stuff that the viewer simply doesn't get to see.

If you could share that, I'm sure it would be a great help!

Thanks, keep up the good work.

I have followed the tutorial to a T and get nothing - no player - nothing when I print $video_player.

Here's what I did:

Turned on the Flowplayer module (flowplayer-6.x-1.0-beta1)

In the template file in the mytheme_preprocess_page, I added:
flowplayer_add('#video-player', array(
'clip' => array(
'autoPlay' => FALSE, // Turn autoplay off
'url' => 'http://localhost:8888/sites/all/themes/mirjamstheme/test_video.flv',
),
 ));

$vars['video_player'] = "<div id=\"video-player\" style=\"width:200px height:200px\";></div>";

In the Page file, I added:
print $video_player;

Nothing was printed. Can anyone help?

Thanks!

I noticed in your $vars statement that you have misplaced the semicolon, try this instead:

$vars['video_player'] = "

";

ok, that didn't come out the way i wanted......... =)

$vars['video_player'] = "<div id=\"video-player\" style=\"width:200px; height:200px;\"></div>";

Hey Matt,
Awesome video, got everything working except ran into a snag. Flowplayer loads the entire video before it will play it. I've looked around a bit and it seems that you have to render videos in a certain way for them to stream correctly. Do you do that with your videos? Is there any way to get flowplayer to do this?
Thanks for all the great tutorials,
 Joe

This is such a great resource that you are providing and you give it away for free. I love seeing websites that understand the value of providing a quality resource for free. It’s the old what goes around comes around routine.

Thank you for the video but I wish you would get to the point and really make a video about how to use the flowplayer in a very easy to understand way. You are explaining your method that is not very friendly for designers for example. I found it very VERY confusing.