© Arie Molendijk
Loading a movie / an audio file on the fly
(no <embed> for the movie / no opener window for the audio file)
DEMOS: TO THE LEFT
The scripts and css given
here (styles given in blue) allow us
to load audio / video files on the fly. The files (except those running on the windows media player) have their outputs in a
div having
class="audiovideo" and
id="container".
The styles (in blue, see above) play a crucial role in the scripts, so leave them intact.
The function
stop_audio_video (in red) is used to stop any running audio/video when a new file is loaded (but I didn't find a javascript way for stopping a file running on the media player
except when a link is clicked for running another file on the media player itself). The function is integrated in the functions
get_movie,
get_audio_mediaplayer and
get_audio_custom (see below) and works like this:
onclick="stop_audio_video('div','audiovideo')".
With the function
get_movie, a
video file (function in green) is loaded (the video file may have sound, of course).
Usage (just an example):
<a href="#null" onclick="get_movie('container','http://www.youtube.com/v/qOHI11iBYnw&hl=nl&fs=1', 'position:absolute; width:80%; left:150px; top:20%; height:78%; background:gray;
color:white; font-weight: bold'); return false; " >Fireworks</a>
The styles determine the location and the size of the video box (that shows with the click event), the background of a button that appears on top of the box, and the style of the text within the
button. A click on the button stops the video, and hides the video box.
Using the windows media player for loading
audio files is done with function
get_audio_mediaplayer (pale darkred). Certain lines in the script ensure that the player opens without the
annoying window that is always there when you load files with the player.
Usage (example):
<a href="#null" onclick="get_audio_mediaplayer('http://cgi.omroep.nl/cgi-bin/streams?/avro/klassiek/week_cd/klankkast0310_sb.wma'); return
false">Wachet auf</a>
The function
get_audio_custom takes care of loading
audio files without windows media player.
Usage (example):
<a href="#null" onclick="get_audio_custom('container','http://cgi.omroep.nl/cgi-bin/streams?/avro/klassiek/klaskraker/klaskraker_030522.wma',
'position:absolute; width:30%; left:30%; top:43%; height:20px','60px', '<div style=\'text-align: center\'>Wagner:
\'<i>Walkürenritt</i>\'<br><br>The Philharmonia o.l.v. Yuri Simonov.</div>');return false">Walkürenritt</a>
The styles except
height determine the location of a custom audio box (that shows with the click event). The height (here:
height: 20px) gives the vertical size of an inbuilt audio
plugin with a play button, a stop button etc. It's better to always use '20px' here. The part in green (here:
'60px') gives the height of the div given in red. In this div, we can write down
information about the audio that is being played, following the syntax given in the red div. With a click on a button that automatically appears when we call a custom audio file, the playing can be
stopped / the audio box can be hidden.
NOTES:
- In non-IE, we could use get_audio_custom for also loading video files. But this wouldn't work for IE, so let's use get_movie for loading movies.
-
About audio files:
.wma files function both with get_audio_custom and get_audio_mediaplayer. The same seems to be true for .asx files.
.mp3 files and .m3u files function both with get_audio_custom and get_audio_mediaplayer in IE, but don't function with get_audio_custom in non-IE. So for .mp3 files and .m3u files we should only use function get_audio_mediaplayer.
Same story for .ram files (using function get_audio_mediaplayer opens the files with realplayer).
- All of this may seem rather complicated but, in terms of usability, it's quite simple. Just follow the guidelines for 'usage' given above, and you'll be fine. To start experimenting, just
copy/paste the content of the js_css (not the source, bur what
you see).