HotPotatoes Tutorials and How-to's

You are here: Home » Tutorials » for HotPotatoes » Flash Video

Flash Video in HotPotatoes

Posted by Stan Bogdanov on 14 June 2007 - 08:54
Last updated 11 December 2009 - 11:50

Note: The flash video code implementation here is different from the sample code because of this CMF/site.

See a demo exercise

Wouldn't it be nice if you could play video in your exercises, and in most, if not all browsers? Here's a really multi functional and highly customizable flv player. The code is xHTML1.1 valid and tested on WinXP SP2 in:

IE6, IE7
Firefox 1.5+
Opera 8.52+
SeaMonkey 1.0.4+
Netscape 7.7+

Player name: JW FLV Player | Author: Jeroen Wijering | Download: http://www.jeroenwijering.com

Single Flash Video (FLV) file

Get the Flash Player to see this player.

The code

<object type="application/x-shockwave-flash"
   width="300"  height="245" 
   data="flvplayer.swf?file=my_movie_file.flv&amp;autostart=false">
  <param name="movie"
    value="flvplayer.swf?file=my_movie_file.flv&amp;autostart=false" />
  <param name="wmode"
    value="transparent" />
</object>

Mind that!

If you copy-paste the code above,
1: make sure it has no carriage returns. When you put the code into a JMatch exercise, or another one where the flash object code is placed in the Javascript code, mind that it must run as a single line! Otherwise the Javascript code of the exercise in which it is inserted gets broken and you see nothing! And don't complain I have not warned you because I do now!

2: note the sample code &autostart. Certain characters must be escaped, i.e.,
& becomes & a m p ;

3: you may have seen autoStart somewhere, but not in this tutorial's sample code - it must be autostart - all in lowercase! camelCase makes your pages NOT xHTML1.1 valid.

4: you will have changed my_movie_file.flv with the name of your file; and you'll have uploaded all the necessary files along with the exercise.

Only the basic functionalities have been used here. In addition to a single Flash video file, JW FLV Player supports playback of HD254, MP4; RTMP streams with a wide range of flashvars (settings) for tweaking both behaviour and appearance and an extensive, documented javascript/actionscript API. There are the accessibility examples for captions and Arab language. See the online setup wizard to customize your players, and also the full list of extras: Playlist and captioning example XML'S (RSS, XSPF and ATOM playlists - with advertisement possibilities) and other advanced functionalities.

JW FLV Player with an XML playlist and the SWFObject v1.5 javascript!

Get the Flash Player to see this player.

The code

To use this technique, you also need to download SWFObject 1.5 and link to it before the < head > tag.
Make sure you also read the documentation at deconcept.com.

<script type="text/javascript" src="swfobject.js"></script>
<head>

Alternatively, if you feel insecure when editing your HotPotatoes exercises output files, you can put the swfobject.js right before the < div id="player" >. It will look something like this:

 
<script type="text/javascript" src="swfobject.js"></script>
<div id="player"><a href="http://www.macromedia.com/go/getflashplayer">
  Get the Flash Player</a> to see this movie.</div>
<script type="text/javascript">
  var s = new SWFObject("flash/flvplayer.swf","flash/jw_flv_playlist.xml",
  "300","330","8");
....

SWFObject 2.0

UFO and SWFObject authors have joined effort to write SWFObject 2. It's officially out and aims to be the ultimate in embedding flash content. After you've read the documentation and different implementation possibilities, you may want to start with the online code generator.