Flash video player in Blackboard

This guide is outdated.

A revised version is available at:


http://icto.weblog.leidenuniv.nl/2009/04/21/embed-a-flash-video-player-in-blackboard

—————————————

Howto: embed a flash video file (FLV) in Blackboard.
Create a YouTube like video player in your Blackboard course in 10 steps.
This howto was written for JW_FLV_Media_Player 3-14.
Download this Howto as a pdf file.

1. Download the JW_FLV_Media_Player from http://www.jeroenwijering.com/?item=JW_FLV_Media_Player .

2. Unzip the downloaded zip file somewhere on your computer. Remember where you put the files.

3. In your Blackboard course create a Folder somewhere in a Content area. In this example I created the folder ‘JW Mediaplayer’ in the content area Documents&Sheets. Of course you can use any name you like.

4. Upload the file ‘mediaplayer.swf’ to the folder ‘JW Mediaplayer’: create a new Item, give it a name and choose attach local file. Click ‘Browse’ to select the file to attach. In this case ‘mediaplayer.swf’ (you can find it where you unzipped the JW_FLV_Media_Player file (step 1.). Make sure you select Special Action: create a link to this file. The file ‘mediaplayer.swf’ is the actual media player application.

Click to enlarge picture htflvbb_pic1.jpg.

5. Upload the video file you want to embed to the folder ‘JW Mediaplayer’: create a new Item, give it a name and choose attach local file. In this example I uploaded the video file ‘video.flv’. Again, make sure you select Special Action: create a link to this file.

6. Upload the picture you want to show in the player before the movie clip starts to play to the folder ‘JW Mediaplayer’: create a new Item, give it a name and choose attach local file. In this example I uploaded the picture ‘video.jpg’. Again, make sure you select Special Action: create a link to this file.

7. Open a new tab/windows in your browser. Open the setup wizard at http://www.jeroenwijering.com/?page=wizard to create the html code required to embed the movie player.

8. In the setup wizard fill in the appropriate values under ‘Tweak the available flashvars’. For ‘source’, ‘file’ and ‘image’ these are the hyperlinks to the items you uploaded in step 4-6. You can find the hyperlink by clicking the right mouse button on any of these items in the folder ‘JW Mediaplayer’ in your Blackboard course and choose ‘Copy Link Location’ (Firefox) or ‘Copy Shortcut’ (Internet Explorer). Now go to the setup wizard an enter the value by clicking into the related form field and type ctrl-v (paste) or right click and select paste. Height and width refer you the dimensions of the video file.

Click to enlarge picture htflvbb_pic3.jpg.

9. After entering all the values click ‘Update preview&code’.

Click to enlarge picture htflvbb_pic4.jpg.

10. Copy the rendered code from the setup wizard and paste it in a new Item you create in the folder ‘JW Mediaplayer’. Make sure you set the Content Information type to ‘HTML’ In this example I set the item name to ‘Test movie clip (embedded)’.

Click to enlarge picture htflvbb_pic2.jpg

Done. Play your movie!

Optional:

Store the media player application ‘mediaplayer.swf’ in a location outside Blackboard. It is not necessary to store the player inside Blackboard. You can put it anywhere on-line. This is especially useful if you have several embedded player in your Blackboard course(s). You can link to just one mediaplayer.swf outside Blackboard instead of having to upload a mediaplayer.swf file for each embedded player you use. Just make sure to change the ‘source’ value in the setup-wizard and update the code. Also verify that your students actually have access to the location where you stored the player. This is also true for the video file and the the picture. If you like you can also store it outside Blackboard.

Experiment with the different player settings in the setup wizard.