Error in IE
in [JavaScript]
|
From: torbs on 20 Oct 2005 10:51 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/sherlockholmes/main.php?plugin=quicktime&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=calBuffer; } 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.visibility = "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).item(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.fontSize="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>
From: cwdjrxyz@yahoo.com on 20 Oct 2005 12:13 torbs wrote: > 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/sherlockholmes/main.php?plugin=quicktime&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. Your page worked on the most recent Firefox browser. I use a modified IE6 browser know as the SBC/Yahoo DSL browser. On it the movie will not show at all. Rather you get the following error message when you try to play the movie: An error has occured in the script in this page Line 221 Char 3 Error 'null' is null or not an object Code 0 URL http://www.media.uio.no/sherlockholmes/main.php? I do not have time to investigate your very long code, but hopefully this error information will help you locate the problem. After the error message appears, the computer locks and fails to respond to anything. I finally escaped by pressing Ctrl,Alt, and Delete together several times, selecting to delete the program several times, and then selecting to stop a non-responding program. That finally shut down the browser and allowed the computer to be used again.
From: torbs on 20 Oct 2005 12:34 Thank you I got the same error with opera. It seems that opera and your browser have problems with XML for SCRIPT. The variable "domDoc" is considered empty by opera, although it should contain the xml. See the generalfunctions.js - loadLocalURL, callbackfunction and loadNextMovie. This do not explain why IE can run for several minutes and then crash.
From: VK on 20 Oct 2005 17:04 > In IE I can see up to clip 14, but then I get a fatal error > and IE shuts down. An interesting numeric correlation with <http://groups.google.com/group/comp.lang.javascript/browse_frm/thread/bfe29ce5f0f60579/e433d8c23241ac59?hl=en#e433d8c23241ac59> It may be a pure occasion or maybe IE indeed has some "hurt tolerance" set to max 13 ? :-) Overall you cannot crash IE so easy. A rude application shutdown usually indicates that your browser gave up control to some COM control and now it cannot neither take control back nor dismiss the control (Windows' blue screen state equivalent). In your case such controls are MSXML and QuickTime. You may check: 1) To make things easier :-) local files have readyState of success equal to 0 and not 4. So for debugging period you should always have: if ((myRequest.readyState == 4)||(myRequest.readyState == 0)) { // success } 2) To make things even more easier :-) XMLRequest doesn't honor file extentions (say .xml) but HTTP content header only. As you cannot set this header for local files, you really cannot use XMLRequest properly while on your local drive. The only option is to load XML data as plain text and parse it after. I see you already do it but check the whole routine once again. 3) JavaScript is barely usable for pinpoint synchronized media streams. There are too many issues that uncontollably add / extract milliseconds and whole seconds from your calculations. With IE you have much more power and control by using Time behaviors: <http://msdn.microsoft.com/library/default.asp?url=/workshop/author/behaviors/time.asp> Hoping it helps anyhow...
From: cwdjrxyz@yahoo.com on 21 Oct 2005 00:52
VK wrote: > 3) JavaScript is barely usable for pinpoint synchronized media streams. > There are too many issues that uncontollably add / extract milliseconds > and whole seconds from your calculations. With IE you have much more > power and control by using Time behaviors: > <http://msdn.microsoft.com/library/default.asp?url=/workshop/author/behaviors/time.asp> This time approach for IE apparently uses some watered down aspects of SMIL, and I believe some of this code works only on IE and close relatives. A much better approach is to use W3C SMIL 2. If I remember correctly, the QT player will use a few aspects of SMIL, but it is rather limited. However the most recent versions of the Real Player support nearly full W3C SMIL2. It does not matter which browser you use or if it supports XML, since the SMIL support is built into the Real player. The Real develper site has tons of information about using SMIL on the Real player. For example, if the Real player is installed on even the old Netscape 4.8 which does not support XML and many other things, the SMIL program works just fine because it is contained within the Real player. You can control a variety of audio, video, text, and other types of files at precise times. I am not for sure if the Real Player will stream a .mov file properly(it might), but it is easy enough to use a .rm video file, and Real has a free encoder for converting your video files to .rm files at a desired bit rate. I very much like using SMIL programs in the Real player for complicated media presentations. The main problem for use on the general web is that many do not have the Real player installed and likely will not bother to download it, especially if they are on dialup. However, when you can expect your viewers to have the Real player installed or you are using a local network, then using SMIL with the Real player is the best way to go, at least for me. |