Explanations:
Page template:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="imagetoolbar" content="no">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<title>Some title</title>
<!--[if IE 6]>
<style type="text/css">
html, body{height:100%;margin: 0;padding: 0;border: none;}
</style>
<![endif]-->
<script type="text/javascript" src="
video.js"></script>
</head>
<body>
<!-- The following browser-specific lines have to do with the fact that the div ('receiver') in which the video's are put has an instable height in IE if we have 'position: absolute' in that browser: the height will increase every time we load a video. For some reason, we must have various sizes depending on the browser we use. Leave this as it is, just to be sure. -->
<!--[if !IE 6]><!-->
<div id="receiver" style="position:absolute;top:0px;left:-0.5%;height:102%;width:100%;">
</div>
<!--<![endif]-->
<!--[if IE 6]>
<div id="receiver" style="position:relative;top:-5%;left:-0.5%;height:102%;width:100%;">
</div>
<![endif]-->
<!--[if gt IE 6]>
<div id="receiver" style="position:relative;top:-7%;left:-2.5%;height:100%;width:105%;">
</div>
<![endif]-->
<!-- We MUST HAVE this div somewhere on the page (in the body) to allow the video's to run. We should put everything in it that overlaps with the video. If nothing overlaps with it, we must still have the div, which will be empty in that case. If we don't leave the div empty, we must put everything we want to be inside it in another div (IE needs the extra div inside 'behind_video') -->
<div id="behind_video" >
<div style="bla">
bla bla
</div>
</div>
<!-- LINES FOR LOADING THE VIDEO'S (SEE BELOW FOR EXPLANATIONS) HERE.
The links to the video's must be wrapped into a div having position: absolute and z-index:1 (or heigher), otherwise they won't be accessible.
-->
</body>
</html>
Loading the video's:
The
lines for loading video's would be something like
(don't forget what has been said above about the position and the index of the links):
Youtube video on Tubechop:
<a href="javascript:void(0)" onclick="get_movie('receiver','
http://swf.tubechop.com/tubechop.swf?vurl=3H8V4Fzrcr0&start=0&end=550','80%','85%','19%','9%'); info_video('<div ><b>Composer<\/b>: Warsaw Concerto<br>Royal Philh. Orch., Cristina Ortiz, Moshe Atzmon <\/div>')">Warsaw Concerto</a>
Youtube video on YouTube:
<a href="javascript:void(0)" onclick="get_movie('receiver','
http://www.youtube.com/v/EUSsXdhxFIM&hl=nl&fs=1&autoplay=1&rel=0&start=0&showsearch=0&color1=0x2b405b&color2=0x6b8ab6&border=1','80%','85%','19%','9%'); info_video('<div ><b>Holst<\/b><br>The Planets:<i>Jupiter<\/i> (unknown orchestra)<\/div>')">Jupiter</a>
DailyMotion video:
<a href="javascript:void(0)" onclick="get_movie('receiver','
http://www.dailymotion.com/swf/xsjol&hl=nl&fs=1&fs=1&autoplay=1&rel=0','80%','85%','19%','9%'); info_video('Bach/Loussier: Air uit de Suite in D maj., BWV 1068<br>Trio Jacques Loussier')">Air on the G-string</a>
etc.
In the parts in red, you can put any video-address that can be found in the (non-valid) embed-codes given by the sites that provide the video's. Our script (in
video.js) will then replace the invalid embed-code by a valid include-code.
The percentages to the right of the video-address give the width, the height,the left position and the top position, respectively, of the video. You can modify them, of course.
The function
info_video (to the right of the percentages) is used to provide (your own) info about the video's. You can use plain HTML, but don't forget to use backslash escape characters (see the examples given above). The info will appear on the screen as soon as the video starts. You don't have to provide info, but you MUST write down the function. You may write
info_video('') or simply
info_video() if you don't want to give info about a particular video.
Loading the video's with a select box:
A handy way of creating a playlist is using a select box, because you can make very long select boxes without using significant space. You'll need the following script (in the head):
<script type="text/javascript">
/* Script for loading video's with the help of a select box. You can add as many
if (optionValue== as you like. The values (like "stuart" etc.) must be present in the options of the select box.*/
var which="";
function DoSomethingWithOptionvalue(which) {
var optionValue = document.getElementById(which).options[document.getElementById(which).selectedIndex].value;
if (optionValue=="none") {};
if (optionValue=="stuart") {get_movie('receiver','http://swf.tubechop.com/tubechop.swf?vurl=yGYQtNAHbX4&
amp;start=4&
amp;end=143','53%','75%','30%','14%'); info_video('<div ><b>Henry Purcell<\/b><br><i>Music for the Funeral of Queen Mary: The Queen`s Funeral March<\/i> <\/div>')};
if (optionValue=="tomjerry") {get_movie('receiver','http://video.libero.it/static/swf/eltvplayer.swf?id=f30606d37dd60fdc4f6e09643a4a6fa0.flv;','53%','75%','30%','14%'); info_video('<div ><b>Liszt<\/b>:<i>2nd Hungarian Rhapsodie<\/i><br>by Tom and Jerry<\/div>')};
if (optionValue=="bean") {get_movie('receiver','http://video.google.nl/googleplayer.swf?docid=3132980300931574703&
amp;hl=nl&
amp;fs=true&
amp;autoplay=1','53%','75%','30%','14%'); info_video('Mr Bean conducting a Brass Band')};
/*etc. etc.*/
}
</script>
This script allows us to create as many video-loading-selectboxes as we want. Two simple examples (in the body)
(don't forget what has been said above about the position and the index of the links) :
<select name="selectBox1" id="selectBox1" onchange="DoSomethingWithOptionvalue('selectBox1');selectedIndex=0" onmouseout="selectedIndex=0">
<option value="none" selected >Video's</option>
<optgroup label="Playing video`s from a video sharing web site">
<option value="bean" >- Mr. Bean conducting</option>
<option value="stuart" >- Poor Mary (Purcell)</option>
</optgroup>
</select>
<select name="selectBox2" id="selectBox2" onchange="DoSomethingWithOptionvalue('selectBox2');selectedIndex=0" onmouseout="selectedIndex=0">
<option value="none" selected >More video's</option>
<optgroup label="Playing video`s from a video sharing web site">
<option value="stuart" >- Poor Mary (Purcell)</option>
<option value="tomjerry" >- TOM EN JERRY play Liszt`s 2nd Hungarian Rhapsodie</option>
</optgroup>
</select>
© Arie Molendijk.