Hi I am creating a page for stretchfilm. In this page you can chose
between a short medium and long version of the film at any point in the
film.
It is in norwegian, but just press play.
URL:
http://www.media.uio.no/sherlockholm...&hastighet=lav
In IE I can see up to clip 14, but then I get a fatal error and IE
shuts down. I can not figure out what's wrong, but I assume it is an
inddinte loop or something.
I use the XML for SCRIPT to read the xml-document with info of the
film.
the XML looks like this
«?xml version="1.0" encoding="UTF-8" standalone="yes" ?»
«sherlock»
«meta streamUrl="rtsp://lillestroem.uio.no:554/div/imk/strekktekst/"
refUrlLav="320/" refUrlHoy="800/" soundUrl="./" /»
«M1»
«movie level="1" refFile="L1M1" need="none" length="none"
addSoundSrc="none" /»
«movie level="2" refFile="L2M1" need="none" length="none"
addSoundSrc="none" /»
«/M1»
«M2»
«movie level="1" refFile="L1M2" need="none" length="none"
addSoundSrc="none" /»
«movie level="2" refFile="L2M2" need="none" length="none"
addSoundSrc="none" /»
«/M2»
«M3»
«movie level="1" refFile="L1M3" need="none" length="none"
addSoundSrc="none" /»
«movie level="2" refFile="L2M3" need="none" length="none"
addSoundSrc="none" /»
«movie level="3" refFile="L3M3" need="none" length="none"
addSoundSrc="none" /»
«/M3»
etc...
My code:
main.php
___________________________________
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sherlock Holmes - Det Sorte Båndet</title>
<script type="text/javascript" src="./scripts/xmlw3cdom.js"></script>
<script type="text/javascript" src="./scripts/xmlsax.js"></script>
<script type="text/javascript" src="./scripts/xmlIO.js"></script>
<script type="text/javascript" src="./scripts/xmlEscape.js"></script>
<script type="text/javascript"
src="./scripts/generalfunctions.js"></script>
<script type="text/javascript" src="./scripts/slider.js"></script>
<?php
if ($_GET['plugin']) {
echo " <script type='text/javascript' src='./scripts/" .
$_GET['plugin'] . ".js'></script>";
} else {
header("Location:
http://www.media.uio.no/sherlockholmes/index.php");
}
if ($_GET['hastighet']=='lav') {
echo "<script type='text/javascript'> var
hastighet=\"lav\";</script>";
}
if ($_GET['hastighet']=='hoy') {
echo " <script type='text/javascript'> var
hastighet=\"hoy\";</script>";
}
?>
<script type="text/javascript">
function changebuffer (upordown, amount) {
if (upordown=="up") {
calBuffer = calBuffer +amount;
}
if ((upordown=="down") && (calBuffer > 0)) {
calBuffer = calBuffer -amount;
}
document.controllerform.buffervalue.value=calBuffe r;
}
function changelag (upordown, amount) {
if (upordown=="up") {
startLag = startLag +amount;
}
if ((upordown=="down") && (calBuffer > 0)) {
startLag = startLag -amount;
}
document.controllerform.lagvalue.value=startLag ;
}
</script>
<style type="text/css" media="screen">
@import url( style/style.css );
</style>
</head>
<body onLoad="loadLocalXML()">
<?php
if ($_GET["plugin"]) {
include "./includefiles/" . $_GET['plugin']. ".php.inc";
}
?>
<div id="container">
<div id="contents">
<div id="header">
<div id="navigation">
<a href="#" name="level1" id="level1"
onClick="changeLevel('1');">Level 1</a> | <a href="#" id="level2"
name="level2" onClick="changeLevel('2');">Level 2</a> | <a href="#"
id="level3" name="level3" onClick="changeLevel('3');">Level 3</a>
</div>
</div>
<div id="img">
<img id="frontbilde" name="frontbilde"
src="./bilder/holmesogwatson.jpg" alt="img" />
<p>
<a href=""># Stop</a> | <a href="javascript:firstStart()">Play
#</a>
</p>
</div>
<div id="footer">
<p>- Strekktekst av Tor Brekke Skjøtskift -</a></p>
</div>
<div id="stretchbox">
<img src="./bilder/stretchy-text.gif">
</div>
</div>
<div id="kontroll">
<form id="controllerform" name="controllerform">
<table>
<tr><td colspan='3'><p1>Kalibrering av film</p></td></tr>
<tr><td colspan='3'><p2>Buffer (millisekund)</p2></td></tr>
<tr><td>
<input type="button" value="+100" onMouseDown =
"changebuffer('up',100);" /><br>
<input type="button" value="+ 10" onMouseDown =
"changebuffer('up',10);" /></td>
<td><input type="text" size="4 name = "buffervalue" id=
"buffervalue" /></td>
<td><input type="button" value="-100" onMouseDown =
"changebuffer('down',100);" /><br>
<input type="button" value="- 10" onMouseDown =
"changebuffer('down',10);" /></td></tr>
<tr><td colspan='3'><hr></td>
<tr><td colspan='3'><p2>Pre roll(millisekund)</p2></td></tr>
<tr><td>
<input type="button" value="+100" onMouseDown =
"changelag('up',100);" /><br>
<input type="button" value="+ 10" onMouseDown =
"changelag('up',10);" /></td>
<td><input type="text" size="5 name = "lagvalue" id= "lagvalue"
/></td>
<td><input type="button" value="-100" onMouseDown =
"changelag('down',100);" /><br>
<input type="button" value="- 10" onMouseDown =
"changelag('down',10);" /></td></tr>
</form>
</div>
</div>
<form id="logform" name="logform">
<input type="text" id="textlog" name="log" />
</form>
<script type="text/javascript">
changeLevel('init');
</script>
</body>
</html>
generalfunctions.js
__________________________________________________ _
/*Test for objects*/
var layerobject=false;
var allobject=false;
var dom = false;
if (document.getElementById) {
var dom = true;
} else if (document.all) {
allobject=true;
} else if (document.layers) {
layerobject=true;
}
//(document.layers) ? layerobject=true : layerobject=false;
//(document.all) ? allobject=true : allobject=false;
//(document.getElementById) ? dom = true : dom = false;
var movieNum = 1;
var movieLevel = "3";
var moviePlayedList ="TheListOfMovies";
var movieTotalLevels = 3;
var activePlayer = "movie1";
var domDoc = "";
var filpath;
var calBuffer = 1000;
var startLag = 980;
var IntervalID;
var Interval2ID ;
var movieLoaded = "false";
function changeVisibility(id,action) {
switch (action) {
case "show":
if (layerobject) {
document.layers[''+id+''].visibility = "show";
document.layers[''+id+''].zIndex="2";
} else if (allobject) {
document.all[''+id+''].style.visibility = "visible";
document.all[''+id+''].style.zIndex="2";
} else if (dom) {
document.getElementById(''+id+'').style.visibility = "visible";
document.getElementById(''+id+'').style.zIndex="2" ;
}
break;
case "hide":
if (layerobject) {
document.layers[''+id+''].visibility = "hide";
document.layers[''+id+''].zIndex="1";
} else if (allobject) {
document.all[''+id+''].style.visibility = "hidden";
document.all[''+id+''].style.zIndex="1";
} else if (dom) {
document.getElementById(''+id+'').style.visibility = "hidden";
document.getElementById(''+id+'').style.zIndex="1" ;
}
break;
default:return;
}
return;
}
function changePosition(id,x,y) {
if (layerobject) {
document.layers[''+id+''].left = x;
document.layers[''+id+''].top = y;
}
else if (allobject) {
document.all[''+id+''].style.left = x;
document.all[''+id+''].style.top = y;
}
else if (dom) {
document.getElementById(''+id+'').style.left = x+"px";
document.getElementById(''+id+'').style.top = y+"px";
}
return;
}
function movieEnd() {
movieLoaded=false;
movieNum=movieNum+1;
loadNextMovie()
Interval2ID = window.setInterval("loadingComplete()",150);
return;
}
function loadingComplete () {
if (movieLoaded=="true") {
var movieNow=moviePos();
if (movieNow==0) {
return;
}
window.clearInterval(Interval2ID);
var movieEnd=movieLength();
if ((movieEnd-movieNow-startLag) <= 0 ) {
startLag = (movieEnd-movieNow);
}
if ((movieEnd-movieNow-calBuffer) <= 0 ) {
calBuffer = (movieEnd-movieNow);
}
timeUntilSwitch =
setTimeout("playMovie()",(movieEnd-movieNow-calBuffer));
movieLoaded="false";
}
return;
}
function playMovie() {
if (activePlayer == "movie1") {
PlayIt(document.movie2);
//muteIt(document.movie2);
activePlayer='movie2';
//playSound();
} else if (activePlayer == "movie2") {
PlayIt(document.movie1);
//muteIt(document.movie1);
activePlayer='movie1';
//playSound();
}
setTimeout("switchMovie()", startLag)
return;
}
function firstStart() {
PlayIt(document.movie2);
activePlayer='movie2';
//playSound();
if (layerobject) {
document.layers['movie1'].visibility = "show";
document.layers['movie2'].visibility = "show";
document.layers['frontbilde'].visibility = "hide";
} else if (allobject) {
document.all['movie1'].style.visibility = "visible";
document.all['movie2'].style.visibility = "visible";
document.all['frontbilde'].style.visibility = "hidden";
} else if (dom) {
document.getElementById('movie1').style.visibility = "visible";
document.getElementById('movie2').style.visibility = "visible";
document.getElementById('frontbilde').style.visibi lity = "hidden";
}
changeVisibility('movie2','show');
changeVisibility('movie1','hide');
//muteIt(document.movie2);
movieEnd()
return;
}
function switchMovie() {
if (activePlayer == 'movie1') {
//unMuteIt(document.movie1);
changeVisibility('movie1','show');
//muteIt(document.movie1);
changeVisibility('movie2','hide');
}
if (activePlayer == 'movie2') {
//unMuteIt(document.movie1);
changeVisibility('movie2','show');
//muteIt(document.movie1);
changeVisibility('movie1','hide');
}
movieEnd()
return;
}
function loadLocalXML() {
/*
the XMLIO API handles all of the data retrieval.
all we need to do is tell it which file to load and what
function to call when it is finished
*/
xmlIOLoadLocalData("./sherlockholmes.xml.html", "callbackFunction");
return;
} //end function loadLocalXML
function callbackFunction(strXML) {
var parser = new DOMImplementation();
domDoc = parser.loadXML(strXML);
if (hastighet=="hoy") {
filpath="http://www.media.uio.no/sherlockholmes/" +
domDoc.getDocumentElement().getElementsByTagName(" meta").item(0).getAttribute("refUrlHoy");
}
if (hastighet=="lav") {
filpath="http://www.media.uio.no/sherlockholmes/" +
domDoc.getDocumentElement().getElementsByTagName(" meta").item(0).getAttribute("refUrlLav");
}
loadNextMovie();
return;
}
function loadNextMovie() {
if (domDoc) {
var tempMovieLevel= movieLevel;
var moviebasetag = domDoc.getDocumentElement();
var moviemovietag =
moviebasetag.getElementsByTagName("M"+movieNum).it em(0)
movieList= moviemovietag.getElementsByTagName("movie");
var correctMovie = "false";
var i = 1;
if (movieList.getLength() < movieLevel) {
movieNum=movieNum+1;
loadNextMovie();
} else {
while ((correctMovie == "false") && (tempMovieLevel <=
movieTotalLevels)) {
var movieTag = movieList.item(tempMovieLevel-1);
var movieNeed = movieTag.getAttribute("need");
if ((moviePlayedList.indexOf(movieNeed) != -1) || (movieNeed ==
"")) {
var refFile = movieTag.getAttribute("refFile");
var correctMovie = "true";
loadMovie(refFile);
document.logform.textlog.value=refFile;
break;
}
tempMovieLevel = tempMovieLevel+1;
}
}
} else {
alert("error");
setTimeout("loadLocalXML()",10);
return;
};
return;
} // end function
function changeLevel(newlevel) {
if (layerobject) {
document.layers['level'+movieLevel].fontSize = "11px";
} else if (allobject) {
document.all['level'+movieLevel].style.fontSize = "11px";
} else if (dom) {
document.getElementById('level'+movieLevel).style. fontSize ="11px";
}
if (newlevel=='init') {
newlevel=movieLevel;
} else {
var movieEnd= movieLength();
var movieNow = moviePos();
if ((movieEnd-movieNow) > calBuffer) {
loadNextMovie();
}
}
movieLevel = newlevel;
if (layerobject) {
document.layers['level'+newlevel].fontSize = "16px";
} else if (allobject) {
document.all['level'+newlevel].style.fontSize = "16px";
} else if (dom) {
document.getElementById('level'+newlevel).style.fo ntSize="16px";
}
}
_______________________
quicktime.js
function loadMovie(refFile) {
if (activePlayer == "movie1") {
document.movie2.SetURL(filpath+refFile+".mov");
//window.onerror = altRun;
//document.movie2.Play();
//document.movie2.Stop();
}
if (activePlayer == "movie2") {
document.movie1.SetURL(filpath+refFile+".mov");
//window.onerror = altRun();
//document.movie1.Play();
//document.movie1.Stop();
}
//}
//function altRun() {
IntervalID = window.setInterval("StopWhenRunning()",100);
return;
}
function StopWhenRunning () {
if (activePlayer=="movie1") {
if (document.movie2.GetPluginStatus() == "Complete") {
document.movie2.Play();
window.clearInterval(IntervalID);
document.movie2.Stop();
movieLoaded="true";
return;
}
}
if (activePlayer=="movie2") {
if (document.movie1.GetPluginStatus() == "Complete") {
document.movie1.Play();
window.clearInterval(IntervalID);
document.movie1.Stop();
movieLoaded="true";
return;
}
}
}
function movieLength() {
if ((document.movie1.GetPluginStatus() == "Complete") &&
(activePlayer=="movie1")) {
var
movieEnd=((document.movie1.GetDuration())/(document.movie1.GetTimeScale())*1000);
return movieEnd;
} else if ((document.movie2.GetPluginStatus() == "Complete") &&
(activePlayer=="movie2")) {
var
movieEnd=((document.movie2.GetDuration())/(document.movie2.GetTimeScale())*1000);
return movieEnd;
} else {
return;
}
}
function moviePos() {
if ((document.movie1.GetPluginStatus() == "Complete") &&
(activePlayer=="movie1")) {
var
movieNow=((document.movie1.GetTime())/(document.movie1.GetTimeScale())*1000);
return movieNow;
} else if ((document.movie2.GetPluginStatus() == "Complete") &&
(activePlayer=="movie2")) {
var
movieNow=((document.movie2.GetTime())/(document.movie2.GetTimeScale())*1000);
return movieNow;
} else {
return;
}
}
/* define function that calls QuickTime's "Play" method */
function PlayIt(anObj)
{
anObj.Play();
//if (activePlayer == "movie1") document.movie1.Play();
//if (activePlayer == "movie2") document.movie2.Play();
return;
}
/* define function that calls QuickTime's "Stop" method */
function StopIt(anObj)
{
anObj.Stop();
//if (activePlayer == "movie1") document.movie1.Stop();
//if (activePlayer == "movie2") document.movie2.Stop();
return;
}
function muteIt(anObj) {
//anObj.SetMute(true);
return;
}
function unMuteIt(anObj) {
//anObj.GetMute();
return;
}
style.css
_________________________
..clear
{
clear: both;
padding-bottom: 1px; /* for Gecko-based browsers */
margin-bottom: -1px; /* for Gecko-based browsers */
}
..hide, .divider
{
display: none;
}
..inside
{
/* glitch in IE caused by vertical padding in this class, so 0 padding
is
* set here and those blocks that need the vertical padding must be
* applied to the parent element. the purpose of this class is to
provide
* horizontal padding without using hacks to get around IE's broken
box
* model. so it's okay to apply vertical padding to the parent
element,
* just not horizontal padding.
*/
padding: 0 1em;
}
body {
font-family:verdana, arial, sans-serif;
font-size:11px;
text-align:center;
margin: 0 3%;
min-width: 35em; /* IE doens't understand this property. I use ems
rather
than pixels so that the layout shouldn't break even
when the browser's default size is set very large */
background-color: #fff;
color: #000;
font-size: 100.1%;
}
h1 {
font:26px arial, verdana, sans-serif;
color:#264362;
line-height:30px;
}
h2 {
font:20px arial, verdana, sans-serif;
color:#264362;
line-height:30px;
margin:0;
padding:0;
}
#container {
margin-left:auto;
margin-right:auto;
text-align:center;
width:900px;
padding:10px 0 5px 0;
}
#contents {
text-align:left;
border: solid 1px #500;
border-width: 1px;
margin: 0 10px 0 40px; /* set side margins here 'cause IE doesn't like
it set
on the body element */
width: 700px;
background-color: #E4E2CF;
color: #c00;
padding:10px 0 5px 0;
}
#header {
width:700px;
height:110px;
background:url(../bilder/logo.jpg) top left no-repeat;
text-align:right;
padding:0 0 0 0;
border-bottom:1px solid #D5DBDE;
}
#navigation {
padding:95px 5px 5px 5px;
}
#navigation a, #navigation a:link, #navigation a:visited, #navigation
a:active {
font:bold 11px verdana, arial, sans-serif;
color:#000;
text-decoration:none;
}
#stretchbox {
position:absolute;
top:50px;
left:612px;
z-index:1;
}
#navigation a:hover {
font:bold 11px verdana, arial, sans-serif;
color:#496169;
text-decoration:underline;
}
#kontroll {
position:absolute;
left:775px;
top:150px;
width:200;
height:auto;
background:#F5F5F5;
text-align:center;
border:1px solid #D5DBDE;
padding:2px 2px 2px 2px;
color:black;
}
#kontroll p {
font-size:10pt;
font-weight:bold;
}
#kontroll p2 {
font-size:9pt;
}
#img {
text-align:center;
padding:0px 0 0px 0;
z-index:1;
}
#img p {
text-align:right;
padding:0 5px 0 0;
}
#frontBilde {
visibility:hidden;
}
#movie1 {
position:absolute;
top:175px;
left:225px;
}
#movie2 {
position:absolute;
top:175px;
left:225px;
}
body>#movie1 {position: fixed}
body>#movie2 {position: fixed}
#footer {
height:30px;
background:#F5F5F5;
text-align:right;
border-top:1px solid #D5DBDE;
clear:all;
visibility:visible;
}
#footer p{
font:9px verdana, arial, sans-serif;
color:#555;
padding:2px 2px 0 0;
}
#footer a, #footer a:link, #footer a:visited, #footer a:active, #footer
a:hover {
font:9px verdana, arial, sans-serif;
color:#000;
text-decoration:underline;
}
quicktime.php.inc
_____________________________
<OBJECT
classid='clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B'
codebase='http://www.apple.com/qtactivex/qtplugin.cab'
width='400' height='300'
id='movie1'>
<PARAM name='src'
value='http://www.media.uio.no/sherlockholmes/bilder/holmesogwatson2.jpg'>
<param name='autoplay' value='false'>
<param name='CONTROLLER' value='false'>
<param name='bgcolor' value='#E4E2CF'>
<param name='SAVEEMBEDTAGS' value='true'>
<EMBED HEIGHT='300' WIDTH='400'
SRC='http://www.media.uio.no/sherlockholmes/bilder/holmesogwatson2.jpg'
AUTOPLAY='false'
TYPE='video/quicktime'
PLUGINSPAGE='www.apple.com/quicktime/download'
SAVEEMBEDTAGS='true'
bgcolor='#E4E2CF'
EnableJavaScript='true' CONTROLLER='false'
NAME='movie1'></EMBED>
</OBJECT>
<OBJECT
classid='clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B'
codebase='http://www.apple.com/qtactivex/qtplugin.cab'
width='400' height='300'
id='movie2'>
<PARAM name='src'
value='http://www.media.uio.no/sherlockholmes/bilder/holmesogwatson2.jpg'>
<param name='autoplay' value='false'>
<param name='CONTROLLER' value='false'>
<param name='bgcolor' value='#E4E2CF'>
<param name='SAVEEMBEDTAGS' value='true'>
<EMBED HEIGHT='300' WIDTH='400'
SRC='http://www.media.uio.no/sherlockholmes/bilder/holmesogwatson2.jpg'
AUTOPLAY='false'
TYPE='video/quicktime'
PLUGINSPAGE='www.apple.com/quicktime/download'
bgcolor='#E4E2CF'
EnableJavaScript='true' CONTROLLER='false'
SAVEEMBEDTAGS='true'
NAME='movie2'></EMBED>
</OBJECT>
