Working with SWFObject / SWFObject & JW Player pt. 1
Subtitles of the Movie
In this tutorial we're going to use SWFObject, which we've seen in previous tutorials with JW Player, a very popular media player that can play FLV files, as well as a number of other types of files. JW Player is free for non-commercial uses and it's inexpensive for commercial uses and it's also open source. We saw in previous tutorials how SWFObject can load a SWF file, which in turn can load an FLV. With JW Player, JW Player is the SWF file, and specifically it's playered as SWF, of course you could rename that to anything you want. And I'm going to show you where to download JW Player, how to deploy a basic player. We're going to add some non-video content to the Web page, and configure or customize the player using Flashvars, Flash variables. So, this is where you download JW Player. This is at LongTail video.com and different versions of the player can behave differently, so make sure you're using at least version 4.2 for these tutorials. It does give you a demo of the player so you can see how it works a little bit. So, once you've downloaded the player you'll have a Media Player. zip file. Unzip that and you'll have all these files. Here's the player itself. It gives you SWFObject. js, since it depends on that, this video flv is this same demo file that we just looked at. So, once you have all these files you're ready to implement a basic player. And here we have a basic player. This embed. swf line you'll recognize from previous tutorials on SWFObject and it's added flashvars, params, and attributes here. Now, the params and the attributes are just empty sets at this point, so we're not going to worry about those, but we're actually using Flash vars. We've got three flashvars here: File, Width, and Height. This is just the name of the FLV file, and the Width and the Height of the FLV file. This, by the way, is the width and height of the player itself. You'll notice that the player is a little bit higher than the video and we'll see why in just a moment. In fact, let's just try testing this. So, the reason that we gave it that extra height is to allow some room for this control bar. If we don't have that Ð let's just try making this 200, and reload and play Ð you'll get these black bars because it squeezes the video into the available space. So notice we have to have the SWFObject. js. It has to be in the same directory in this case because we don't give any path to it, and we're also using Express Install and we don't give any path to that, so that should be in the same directory as well. So, this is the actual directory that I'm using. This is my HTML, it loads the player swf, which loads nuthatch dot flv, and notice that the JavaScript file for SWFObject and the Express Install file are in that same directory. And that concludes this tutorial on implementing a basic JW Player with SWFObject.
Tutorial Information
| Course: | Adobe Flash CS4 Video |
| Author: | Michael Hurwicz |
| SKU: | 33967 |
| ISBN: | 1-935320-32-7 |
| Release Date: | 2009-02-17 |
| Duration: | 8.5 hrs / 121 lessons |
| Work Files: |
Yes |
| Captions: | Available on CD and Online University |
| Compatibility: |
Vista/XP/2000, OS X, Linux QuickTime 7, Flash 8 |
VTC Sign up & Benefits
- Unlimited Access
- 81,350 Video Tutorials (20,800 free)
- Video Available as Flash or QuickTime
- Over 782 Courses
- $30 for One Month Access
- Multi-User Discounts Available
United States 