i have an html page displaying an image. it is supposed to delay, change to the video, then after the video plays, change back to the image. this is the javascript i am using:
<script type="text/javascript">
function playVideo(){
var str='**html of the video object**';
document.open();
document.write(str);
document.close();
}
function backToImage(){
var str='**html of the image**';
document.open();
document.write(str);
document.close();
}
setTimeout("playVideo()",1000);
setTimeout("backToImage()",3000);
</script>
this javascript works in Chrome and Safari. It mostly works in IE (the second timeout does not work, but i just discovered this). It does not work at all in Firefox. There is no delay, the video simply begins playing and i never see the image; before or after.
any thoughts on this would be great.
edit: so it seems that document.write is to blame. changing title to reflect this.
in case my original question was not clear, what i am looking for is to replace the image with the video, and then replace the video with the image. this is all loading in an iframe, so i need to use document.write (or something like it) to actually change the html.
i have an html page displaying an image. it is supposed to delay, change to the video, then after the video plays, change back to the image. this is the javascript i am using:
<script type="text/javascript">
function playVideo(){
var str='**html of the video object**';
document.open();
document.write(str);
document.close();
}
function backToImage(){
var str='**html of the image**';
document.open();
document.write(str);
document.close();
}
setTimeout("playVideo()",1000);
setTimeout("backToImage()",3000);
</script>
this javascript works in Chrome and Safari. It mostly works in IE (the second timeout does not work, but i just discovered this). It does not work at all in Firefox. There is no delay, the video simply begins playing and i never see the image; before or after.
any thoughts on this would be great.
edit: so it seems that document.write is to blame. changing title to reflect this.
in case my original question was not clear, what i am looking for is to replace the image with the video, and then replace the video with the image. this is all loading in an iframe, so i need to use document.write (or something like it) to actually change the html.
Share Improve this question edited Dec 8, 2010 at 23:36 psolms asked Dec 8, 2010 at 23:11 psolmspsolms 971 silver badge8 bronze badges 2- @slomojo: Strings of the function calls will work fine as long as the functions are defined globally, which they appear to be. – user113716 Commented Dec 8, 2010 at 23:22
- Ah, I see it was the document write that screwed things up. – ocodo Commented Dec 8, 2010 at 23:27
2 Answers
Reset to default 5Using document.write after the page has already loaded is a little weird. That should only really be used for generating a page as it loads. Try something like this instead:
<html>
<head>
<script type="text/javascript">
function playVideo(){
var str='**html of the video object**';
document.getElementById('video-placeholder').innerHTML = str;
}
function backToImage(){
var str='**html of the image**';
document.getElementById('image-placeholder').innerHTML = str;
}
setTimeout(playVideo, 1000);
setTimeout(backToImage, 3000);
</script>
</head>
<body>
<div id="video-placeholder"></div>
<div id="image-placeholder"></div>
</body>
</html>
The most likely issue, is the opening/writing and closing of a document pletely clears it, clearing the current timeouts, in the process, as well.
As pointed in Document Object Model HTML
open
Open a document stream for writing. If a document exists in the target, this method clears it.
This is how firefox implemented the clear part (a plete clearing)