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 03 June 2011 - 22:03

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

See a demo exercise Watch a demo

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! 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!

Mind that!SWFObject 2.0 has been released and is now hosted on the code.google.com website. Please consider the new v2 instead of v1.5.

Read Using SWFObject 2 and a playlist.xml for FLV

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 or download the zip from Google code for offline use.

Read on: Using SWFObject 2 and a playlist.xml for FLV

Related tutorials:

Rate this:

  • Currently3.08831521739/5 Stars
  • 1
  • 2
  • 3
  • 4
  • 5
Votes: 1472

Share it:

Windows Live

Write a comment

  • Required fields are marked with *.

If you have trouble reading the code, click on the code itself to generate a new random code.
Security Code:
 
admin
Posts: 1
Comment
JW Player
Reply #2 on : Mon March 21, 2011, 14:41:14
Hi Deb,

you have some extra carriage returns in the code which Hot Potatoes have turned into br tags. So your code is broken.
<object type="application/x-shockwave-flash"<br /> width="300" height="245" <br /> data="flvplayer.swf?file=swing.flv&autostart=false"><param name="movie"<br /> value="flvplayer.swf?file=swing.flv&autostart=false" /><param name="wmode"<br /> value="transparent" /></object>

This results from Copy-Paste routines, usually.

Read the tutorial carefully. You must have skipped Warning note 1 above.
Deborah Delin
Posts: 2
Comment
JW Player
Reply #1 on : Tue October 26, 2010, 17:28:25
Hi Stan,

It is so good of you to help us HP users with your great website.

I am new to flash video. Try as I may I cannot get the video to show up, using the simple <object> code, or any other code I try. I have tried all the suggestions on the JW support page too. I have the player in the file with the HP. If you have a moment to tell me where I am going wrong I would be so grateful.

Here is a link to the failed example:

http://www.strivney-english.com/video_exercises/jw_test.htm

Thanks so much in advance.

Deborah