| Automated Setup Flowplayer's official site has a built-in setup tool that you can use for simple graphical on-screen configuration of your player. It allows you to see what configuration options are available and style the player for your needs, then gives you code that will work on your server. |
With Flowplayer's free version, you can do both network hosting and self-hosting. The project teamed up with leading providers that can convert your video from its original format into FLV, H.264, and MP4, all of which Flowplayer can play, and also host it on a global hosting network. The downsides? You can use this service only for non-confidential materials, and conversion and hosting services are not free if you want to publish your videos. And even if you use this option you still need to place Flowplayer's JavaScript files on your own server.
The next grade of usage is, of course, self-hosting of videos and player itself. In this case you have to install the player, which involves copying three files onto your host: JavaScript with API, SWF with player itself and optional, but still recommended, plugin for controlbar. Then you need to convert your videos into an acceptable format. Even though Flowplayer supports MP4, I would not recommend using it because Flowplayer can't support all of its flavors. Thus you should choose between the closed FLV format or the standard H.264. I use FLV below, because earlier versions of Flash Player support it, unlike H.264, which has been supported only since Flash v9, and it is generally less troublesome. You can also provide a fallback solution where H.264 comes as default and FLV is used when H.264 playback is not possible.
Once the software is installed and you have the video in the format you want to use, you can add the player to your web page. The simplest and most straightforward implementation requires three pieces of code to be placed in HTML. First, declare the JavaScript player:
<script src="http://www.darkduck.com/VIDEO/flowplayer-3.2.6.min.js"></script>Ideally, this declaration is placed in the <head> tag of a web page, but you can place it in other parts as well, as you might do if you don't have access to the <head> tag, as you might not with some free hosting services. Next, specify the source of your video and define where the player window should appear:
<a href="http://www.darkduck.com/VIDEO/flowplayer.flv"Finally, start the player itself, somewhere following the source definition:
style="display:block;width:425px;height:300px;"
id="player"></a>
<script language="JavaScript">Of course you should change the file specification to match that of your own web server. As you can see, adding Flowplayer to a web page is simple enough that even an HTML beginner can do it. To your site visitors, the result looks like this.
flowplayer("player", "http://www.darkduck.com/VIDEO/flowplayer-3.2.7.swf");
</script>
That's not bad, but we can configure the player a little bit differently to improve our presentation.
If you look at Flowplayer script above, you can see it has two parameters by default. The player actually supports three parameters, and it's the third one that makes all the difference. It supports JSON notation, which JavaScript programmers can use to customize the code. Also, you may dynamically generate configuration parameters on your page.
To see how this can help your video presentation, create a playlist that consists of a logo and the video itself. We set autoplay for logo, so user will see it automatically instead of Flowplayer Play button. At the same time we disable autoplay for video, which forces the user to click on the player to initiate playback. To speed up the playback process, we enable auto buffering for both parts. The script below does all that, and also adds a message at the end of the clip using the Flowplayer onFinish event:
<script language="JavaScript">Flowplayer supports lots of different events, so you have good flexibility in configuration. Here is how player looks now.
flowplayer("player", "http://www.darkduck.com/VIDEO/flowplayer-3.2.7.swf", {
playlist: [
// show logo
{url: 'http://www.darkduck.com/VIDEO/Logo2.png', scaling: 'orig', autoBuffering: true, autoPlay: false},
// play video when requested
{url: 'http://www.darkduck.com/VIDEO/flowplayer.flv', autoPlay: true, autoBuffering: true, onFinish: function() {
alert("Thank you for watching!");}}
],
});
</script>
Plugins
Flowplayer, like any decent application these days, supports plugins, which can control the player, playlist building, and even the streaming process. To use a plugin, you need to download a SWF file from official page and place it on your host, so you can refer to it from within your player configuration. It is good idea to place your plugins in the same directory as the player itself, but you can use a distributed model too. Let's have a look at couple of plugins and see how you can change the player even more.Sharing
This plugin displays buttons atop your video that let you share your video via e-mail, Facebook, Twitter, and embedded code. Here is how I configure my sharing buttons:plugins:{
sharing: {
// load the sharing plugin
url: 'http://www.darkduck.com/VIDEO/flowplayer.sharing-3.2.1.swf',
// Buttons' colors
buttons: {
// make the colors teal and blue
overColor: '#0000DD',
color: '#008080'
},
// email specific options
email: {
// use a non-default subject line in emails
subject: 'I like Flowplayer!'
}
},
// Position and sizing for the button 'dock'
dock: {
// make it vertical
horizontal: false,
// make the width appropriate for vertical orientation
width: '10%'
},
autoHide: 'fullscreen'
}
}
Analytics
Analytics for your videos can tell you how many times each video was started, how many times they were played to the end, paused, and so on. As I stated above, Flowplayer supports many events, and each of them can be tracked using this plugin. Flowplayer's Analytics plugin works with Google Analytics, the most popular tool for webmasters. It places analytics in the Content -> Event Tracking section of your Google Analytics page. Here is how I configure this plugin for my player:<script language="JavaScript">You can find many more plugins on the project's official plugins page. Another one I recommend is the plugin for Controlbar, which allows you to reconfigure the control elements. This plugin actually comes in the default download package, although it is not activated by default.
flowplayer("player", "http://www.darkduck.com/VIDEO/flowplayer-3.2.7.swf", {
playlist: [
// show logo
{url: 'http://www.darkduck.com/VIDEO/Logo2.png', scaling: 'orig', autoBuffering: true, autoPlay: false},
// play video when requested
{url: 'http://www.darkduck.com/VIDEO/flowplayer.flv', autoPlay: true, autoBuffering: true, onFinish: function() {
alert("Thank you for watching!");}, eventCategory: "Flowplayer article"}
],
plugins:{
gatracker: {
url: "http://www.darkduck.com/VIDEO/flowplayer.analytics-3.2.2.swf",
// track all possible eventsevents: {
all: true
},
accountId: "UA-6414486-4" // my Google Analytics id
}
});
</script>
Below is the final HTML code with all the bells and whistles added:
<head>How does the player look now? See the final result here.
<script src="http://www.darkduck.com/VIDEO/flowplayer-3.2.6.min.js"></script>
</head>
<body>
<a href="http://www.darkduck.com/VIDEO/flowplayer.flv"
style="display:block; width:800px; height:500px;"
id="player">
</a>
<script language="JavaScript">
flowplayer("player", "http://www.darkduck.com/VIDEO/flowplayer-3.2.7.swf", {playlist: [
// show logo
{url: 'http://www.darkduck.com/VIDEO/Logo2.png', scaling: 'orig', autoBuffering: true, autoPlay: false},
// play video when requested
{url: 'http://www.darkduck.com/VIDEO/flowplayer.flv', autoPlay: true, autoBuffering: true, onFinish: function() {
alert("Thank you for watching!");}, eventCategory: "Flowplayer article"}
],
plugins:{
gatracker: {
url: "http://www.darkduck.com/VIDEO/flowplayer.analytics-3.2.2.swf",
// track all possible events
events: {
all: true
},
accountId: "UA-6414486-4" // my Google Analytics id
},
sharing: {
// load the sharing plugin
url: 'http://www.darkduck.com/VIDEO/flowplayer.sharing-3.2.1.swf',
// Buttons' colors
buttons: {
// make the colors teal and blue
overColor: '#0000DD',
color: '#008080'
},
// email specific options
email: {
// use a non-default subject line in emails
subject: 'I like flowplayer!'>
}
},
// Position and sizing for the button 'dock'
dock: {
// make it vertical
horizontal: false,
// make the width appropriate for vertical orientation
width: '10%'
},
autoHide: 'fullscreen'
}
});
</script>
</body>
As you can see, Flowplayer is a powerful tool that can help you to host your own videos. One final word to the wise: a downside of self-hosting that you might have to consider is that it requires more of your network traffic bandwidth and server disk space, both of which may be limited by your hosting provider.
Originally published at Wazi.
0 comments:
Post a Comment