I've been working on embedding mp3 files within a web page that don't load until the user clicks on them. So far that's worked great with all the browsers I've got (Safari 2.0, Explorer 5.2, Firefox 1.0, Opera 7.54, Netscape 7.2, all on MAC OS10.4.2)
When I put that same code within a hidden DIV using the same embedding as the first example it seems to work in Firefox 1.0 and Netscape 7.2.
In Safari 2.0 it works fine the first time but the second time I start the audio and click the link to stop & hide the audio, the audio continues and cannot be stopped.
Opera 7.54 seem to be even stranger with the "click to play" movies not showing up until I remove focus from Opera. Once I do that I see them and it works fine.
With Explorer 5.2 when I click to show the sample I just get a generic QT icon and it won't play anything which is odd since it worked fine in the first example.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="BBEdit 8.1">
<title>QuickTime embedding test</title>
<script language="JavaScript" type="text/javascript">
<!--
var lastID = 'examples'
function exampleContent(layerID)
{
var currentRef = document.getElementById(layerID).style
var lastRef = document.getElementById(lastID).style
currentRef.display = 'block';
lastRef.display = 'none';
lastID = layerID;
}
// End hiding script from old browsers -->
</script>
</head>
<body>
<h1>Quicktime movie that loads on mouse click</h1>
<embed
src = "http://www.otheroom.com/QTtest/mp3/QTplay.mov"
href = "Loaf-Mountains_mastered.mp3"
target = "myself"
controller = "false"
width = "160"
height = "16"
loop = "false"
autoplay = "true"
plugin = "quicktimeplugin"
type = "video/quicktime"
cache = "false"
pluginspage= "http://www.apple.com/quicktime/download/" >
</embed>
<p>This works fine on a Mac in Safari 2.0, Explorer 5.2, Firefox 1.0,
Opera 7.54, Netscape 7.2</p>
<hr>
<h1>Mouseclick movie within a hidden DIV layer</h1>
<div id="examples">
<p><b><a href="javascript:void(0)" onclick="exampleContent('edison')">Click here</a>
to Hide this text and show sample</b></p>
</div>
<div id="edison" style="display:none;">
<embed
enablejavascript = "true"
id = "ex1"
src = "http://www.otheroom.com/QTtest/mp3/QTplay.mov"
href = "Mix-Fluorescent.mp3"
target = "myself"
controller = "false"
width = "160"
height = "16"
loop = "false"
autoplay = "true"
plugin = "quicktimeplugin"
type = "video/quicktime"
cache = "false"
pluginspage= "http://www.apple.com/quicktime/download/" >
</embed>
<p><b><a href="javascript:exampleContent('examples');" onclick="javascript:document.ex1.Stop();">Click here</a> to stop audio, hide this text, and show the original text</b></p>
</div>
<p>This uses the same embedding as the first example and seems to work on a Mac in
Firefox 1.0, Netscape 7.2.<br>
<br>
In Safari 2.0 it works fine the first time but the second time I start the audio and
click the link to stop & hide the audio, the audio continues and cannot be stopped.<br>
<br>
Opera 7.54 seem to be even stranger with the "click to play" movies not showing up until
I remove focus from Opera. Once I do that I see them and it works fine.<br>
<br>
With Explorer 5.2 when I click to show the sample I just get a generic QT icon
and it won't play anything which is odd since it worked fine in the first example.</p>
<hr>
</body>
</html>
I do believe it's ALL div tags that pose this problem for the quicktime plugin. I've verified a similar sort of problem loading content into a div tag using IE 6, I'm not sure how firefox responds to it. in 6 you don't even see a quicktime icon, it just doesn't load anything.
Man, you know what I'd like to know? what's the best damned way to create a page capable of dynamic loading (that doesn't involve using frames). I'd like to have an html template and within it a few fields that can accept references to external documents, like for updates and such.
Reply With Quote
Bookmarks