Response title
This is preview!
Move this topic
[jQuery] QuickTime control bar disappearing after .remove() and .load()
in Using jQuery
•
16 years ago
http://www.andcuriouser.com/sandbox/jqueryqt/test.html
Contents of test.html:
<script src="thickbox/jquery-latest.pack.js" type="text/javascript"></
script>
<script type="text/javascript">
function swapMovie() {
$("#TB_movie").remove();
$("body").append("<div id='TB_movie'></div>");
$("#TB_movie").load("test-movie.html");
} // swapMovie()
</script>
<body>
<a onclick="swapMovie();">Swap the movie</a>
</body>
Contents of test-movie.html:
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab"
width="500" height="500">
<param name="src"
value="serve/sample.mov" />
<param name="controller" value="true" />
<param name="autoplay" value="false" />
<!--[if !IE]>-->
<object type="video/quicktime"
data="serve/sample.mov"
width="500" height="500">
<param name="autoplay" value="false" />
<param name="controller" value="true" />
</object>
<!--<![endif]-->
</object>
The bug:
In Firefox, everything works as expected: the QuickTime is removed,
and then replaced. In IE, however, when the QuickTime is replaced, it
appears sans control bar. This appears in both IE6 and IE7, and it
doesn't seem to matter whether you use the Embed or Object methods to
display the movie.
If anyone knows why this is happening, or knows of a workaround, I'd
greatly appreciate some insight.
Replies(16)
Aaron,
I've found that it is somewhat unreliable to add object elements using
innerHTML. For my media plugin I resorted to using DOM methods to add
media in IE. For an example, look at the "generate" method at the
bottom of this file: http://malsup.com/jquery/media/jquery.media.js
Mike
Leave a comment on malsup's reply
> I've found that it is somewhat unreliable to add object elements using
> innerHTML. For my media plugin I resorted to using DOM methods to add
> media in IE. For an example, look at the "generate" method at the
> bottom of this file: http://malsup.com/jquery/media/jquery.media.js
Thanks for your suggestion. I'm fairly new to jQuery, so I appreciate
some patience.
I assume that .html() and .append() are DOM functions, while .load()
uses innerHTML?
I tried to test things out this way (IE-only Object method):
<script src="thickbox/jquery-latest.pack.js" type="text/javascript"></
script>
<body>
<div>Above movie</div>
<div id='TB_movie'></div>
<div>Below movie</div>
<script type="text/javascript">
var o = "<object classid=\"clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B
\" codebase=\"http://www.apple.com/qtactivex/qtplugin.cab\" width=
\"200\" height=\"100\"><param name=\"src\" value=\"serve/sample.mov\" /
><param name=\"controller\" value=\"true\" /><param name=\"autoplay\"
value=\"false\" /></object>";
// $("#TB_movie").append(o);
$("#TB_movie").html(o);
</script>
</body>
... but if you check the results:
http://www.andcuriouser.com/sandbox/jqueryqt/test2.html
... they're anything but what I'd expect.
Not only do I not get the control bar, but I also get the QuickTime
stuck in the top-left corner of the screen, though space is still
reserved for it in the appropriate place.
Leave a comment on aaron.hildebrandt's reply
> I assume that .html() and .append() are DOM functions, while .load()
> uses innerHTML?
Sort of, but the dom manipulation methods all call "clean" which uses
innerHTML so you're not really escaping that limitation.
> ... but if you check the results:
> http://www.andcuriouser.com/sandbox/jqueryqt/test2.html
> ... they're anything but what I'd expect.
>
> Not only do I not get the control bar, but I also get the QuickTime
> stuck in the top-left corner of the screen, though space is still
> reserved for it in the appropriate place.
That problem that is fixed by using straight DOM code for creating the
object and param elements.
Mike
Leave a comment on malsup's reply
> That problem that is fixed by using straight DOM code for creating the
> object and param elements.
>
Well, this is the first time I've tried making elements using straight
DOM code in JS. This is what I coded:
<script type="text/javascript">
var body = document.getElementsByTagName("body")[0];
var movieBuild = document.createElement("object");
if($.browser.msie) {
movieBuild.setAttribute("classid", "clsid:02BF25D5-8C17-4B23-BC80-
D3488ABDDC6B");
movieBuild.setAttribute("codebase", "http://www.apple.com/qtactivex/
qtplugin.cab");
var paramSrc = document.createElement("param");
paramSrc.setAttribute("value", "serve/sample.mov");
movieBuild.appendChild(paramSrc);
} else {
movieBuild.setAttribute("type", "video/quicktime");
movieBuild.setAttribute("data", "serve/sample.mov");
} // if
movieBuild.setAttribute("width", "500");
movieBuild.setAttribute("height", "500");
var paramControl = document.createElement("param");
paramControl.setAttribute("controller", "true");
var paramAuto = document.createElement("param");
paramAuto.setAttribute("autoplay", "false");
body.appendChild(movieBuild);
// movieBuild.appendChild(paramControl);
// movieBuild.appendChild(paramAuto);
</script>
Once again, Firefox works as expected. In IE, though, I'm getting an
empty ActiveX control -- no errors. I've played around (and tried an
IE-only version) to no avail. Like I said, this is my first time doing
something like this, so I have no idea if what I'm doing is even
entirely rational.
Leave a comment on aaron.hildebrandt's reply
Hi Aaron,
Actually you don't need to go that low-level. Take a peak at the
"generate" method here:
http://malsup.com/jquery/media/jquery.media.js
Mike
Leave a comment on malsup's reply
> Actually you don't need to go that low-level. Take a peak at the
> "generate" method here:
>
> http://malsup.com/jquery/media/jquery.media.js
>
I'm sorry, I've gone over the JS a thousand times and I'm not making
any progress. My JS just isn't that strong.
Looking over the "generate" method, it looks like I should be able to
do something like this:
var movieBuild = document.createElement("<object type='video/
quicktime' width='500' height='500' date='serve/sample.mov'></
object>");
... and append children to that, and then append _that_ as a child to
the body to display the movie. But no matter what I do, I'm getting
drowned by error messages (for invalid characters, seemingly no matter
how I write the line). Can you, in fact, create an element this way?
Leave a comment on aaron.hildebrandt's reply
Yes, that method or creating the element should work just fine. Can
you post a sample page? Maybe there's just a minor typo or something
causing the problem.
Mike
Leave a comment on malsup's reply
> Yes, that method or creating the element should work just fine. Can
> you post a sample page? Maybe there's just a minor typo or something
> causing the problem.
>
Sure.
http://www.andcuriouser.com/sandbox/jqueryqt/test.html
The error:
Error: uncaught exception: [Exception... "String contains an invalid
character" code: "5" nsresult: "0x80530005
(NS_ERROR_DOM_INVALID_CHARACTER_ERR)" location: "http://
www.andcuriouser.com/sandbox/jqueryqt/test.html Line: 7"]
Thanks,
Aaron
Leave a comment on aaron.hildebrandt's reply
<pre class="sourcecode"><object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase=
<a href="http://www.apple.com/qtactivex/qtplugin.cab#version=6,0,2,0">http://www.apple.com/qtactivex/qtplugin.cab#version=6,0,2,0
</a>
width="320" height="256" align="middle">
<param name="src" value="sample.mov" />
<param name="autoplay" value="true" />
<embed src="sample.mov" autoplay="true" width="320"
height="256" align="middle" bgcolor="black"
pluginspage="<a href="http://www.apple.com/quicktime/download/">
http://www.apple.com/quicktime/download/</a>">
</embed>
</object</pre>
from <a href="http://developer.apple.com/internet/ieembedprep.html">http://developer.apple.com/internet/ieembedprep.html</a>
anything else won't work as well.
<div><span class="gmail_quote">On 6/6/07, <b class="gmail_sendername">Aaron Scott</b> <<a href="mailto:aaron.hildebrandt@gmail.com">aaron.hildebrandt@gmail.com</a>
> wrote:</span><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
> Yes, that method or creating the element should work just fine. Can
> you post a sample page? Maybe there's just a minor typo or something
> causing the problem.
>
Sure.
<a href="http://www.andcuriouser.com/sandbox/jqueryqt/test.html">http://www.andcuriouser.com/sandbox/jqueryqt/test.html
</a>
The error:
Error: uncaught exception: [Exception... "String contains an invalid
character" code: "5" nsresult: "0x80530005
(NS_ERROR_DOM_INVALID_CHARACTER_ERR)" location: "http://
<a href="http://www.andcuriouser.com/sandbox/jqueryqt/test.html">www.andcuriouser.com/sandbox/jqueryqt/test.html</a> Line: 7"]
Thanks,
Aaron
</blockquote></div>
<br clear="all">
--
Ⓙⓐⓚⓔ - יעקב ʝǡǩȩ ᎫᎪᏦᎬ
codebase=
<a href="http://www.apple.com/qtactivex/qtplugin.cab#version=6,0,2,0">http://www.apple.com/qtactivex/qtplugin.cab#version=6,0,2,0
</a>
width="320" height="256" align="middle">
<param name="src" value="sample.mov" />
<param name="autoplay" value="true" />
<embed src="sample.mov" autoplay="true" width="320"
height="256" align="middle" bgcolor="black"
pluginspage="<a href="http://www.apple.com/quicktime/download/">
http://www.apple.com/quicktime/download/</a>">
</embed>
</object</pre>
from <a href="http://developer.apple.com/internet/ieembedprep.html">http://developer.apple.com/internet/ieembedprep.html</a>
anything else won't work as well.
<div><span class="gmail_quote">On 6/6/07, <b class="gmail_sendername">Aaron Scott</b> <<a href="mailto:aaron.hildebrandt@gmail.com">aaron.hildebrandt@gmail.com</a>
> wrote:</span><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
> Yes, that method or creating the element should work just fine. Can
> you post a sample page? Maybe there's just a minor typo or something
> causing the problem.
>
Sure.
<a href="http://www.andcuriouser.com/sandbox/jqueryqt/test.html">http://www.andcuriouser.com/sandbox/jqueryqt/test.html
</a>
The error:
Error: uncaught exception: [Exception... "String contains an invalid
character" code: "5" nsresult: "0x80530005
(NS_ERROR_DOM_INVALID_CHARACTER_ERR)" location: "http://
<a href="http://www.andcuriouser.com/sandbox/jqueryqt/test.html">www.andcuriouser.com/sandbox/jqueryqt/test.html</a> Line: 7"]
Thanks,
Aaron
</blockquote></div>
<br clear="all">
--
Ⓙⓐⓚⓔ - יעקב ʝǡǩȩ ᎫᎪᏦᎬ
Leave a comment on jakecigar's reply
> anything else won't work as well.
Right now, my sample code is FF-only until I can get that up and
running (since FF is better for JS debugging). After that, I'll work
on IE (using the double-object method). Apple's method works, but it
doesn't validate. Compare it to this:
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab"
width="<?php echo $moviewidth; ?>" height="<?php echo $movieheight; ?
>">
<param name="src"
value="<?php echo $filename ?>" />
<param name="controller" value="true" />
<param name="autoplay" value="false" />
<!--[if !IE]>-->
<object type="video/quicktime"
data="<?php echo $filename ?>"
width="<?php echo $moviewidth; ?>" height="<?php echo
$movieheight; ?>">
<param name="autoplay" value="false" />
<param name="controller" value="true" />
</object>
<!--<![endif]-->
</object>
Anyway, this doesn't have any bearing on my JS problem.
Aaron
Leave a comment on aaron.hildebrandt's reply
I hit your page, and got the error you showed... I notice your object didn't look like my objects... so I went back to where I got my info...
I do some jQuery + qt video on my dog's site. <a href="http://jpassoc.com/junior/puppy-movies.html">
http://jpassoc.com/junior/puppy-movies.html</a>
validating is for html code, not for JavaScript... we can abuse the dom in the script and still pass validation.
<div><span class="gmail_quote">On 6/6/07, <b class="gmail_sendername">
Aaron Scott</b> <<a href="mailto:aaron.hildebrandt@gmail.com">aaron.hildebrandt@gmail.com</a>> wrote:</span><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
> anything else won't work as well.
Right now, my sample code is FF-only until I can get that up and
running (since FF is better for JS debugging). After that, I'll work
on IE (using the double-object method). Apple's method works, but it
doesn't validate. Compare it to this:
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="<a href="http://www.apple.com/qtactivex/qtplugin.cab">http://www.apple.com/qtactivex/qtplugin.cab
</a>"
width="<?php echo $moviewidth; ?>" height="<?php echo $movieheight; ?
>">
<param name="src"
value="<?php echo $filename ?>" />
<param name="controller" value="true" />
<param name="autoplay" value="false" />
<!--[if !IE]>-->
<object type="video/quicktime"
data="<?php echo $filename ?>"
width="<?php echo $moviewidth; ?>" height="<?php echo
$movieheight; ?>">
<param name="autoplay" value="false" />
<param name="controller" value="true" />
</object>
<!--<![endif]-->
</object>
Anyway, this doesn't have any bearing on my JS problem.
Aaron
</blockquote></div>
<br clear="all">
--
Ⓙⓐⓚⓔ - יעקב ʝǡǩȩ ᎫᎪᏦᎬ
I do some jQuery + qt video on my dog's site. <a href="http://jpassoc.com/junior/puppy-movies.html">
http://jpassoc.com/junior/puppy-movies.html</a>
validating is for html code, not for JavaScript... we can abuse the dom in the script and still pass validation.
<div><span class="gmail_quote">On 6/6/07, <b class="gmail_sendername">
Aaron Scott</b> <<a href="mailto:aaron.hildebrandt@gmail.com">aaron.hildebrandt@gmail.com</a>> wrote:</span><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
> anything else won't work as well.
Right now, my sample code is FF-only until I can get that up and
running (since FF is better for JS debugging). After that, I'll work
on IE (using the double-object method). Apple's method works, but it
doesn't validate. Compare it to this:
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="<a href="http://www.apple.com/qtactivex/qtplugin.cab">http://www.apple.com/qtactivex/qtplugin.cab
</a>"
width="<?php echo $moviewidth; ?>" height="<?php echo $movieheight; ?
>">
<param name="src"
value="<?php echo $filename ?>" />
<param name="controller" value="true" />
<param name="autoplay" value="false" />
<!--[if !IE]>-->
<object type="video/quicktime"
data="<?php echo $filename ?>"
width="<?php echo $moviewidth; ?>" height="<?php echo
$movieheight; ?>">
<param name="autoplay" value="false" />
<param name="controller" value="true" />
</object>
<!--<![endif]-->
</object>
Anyway, this doesn't have any bearing on my JS problem.
Aaron
</blockquote></div>
<br clear="all">
--
Ⓙⓐⓚⓔ - יעקב ʝǡǩȩ ᎫᎪᏦᎬ
Leave a comment on jakecigar's reply
> from http://developer.apple.com/internet/ieembedprep.html
>
> anything else won't work as well.
That's only true for static content. Dynamically, you can skip the
embed tag on IE and the object tag on everything else.
Aaron, I think your script errors are probably from the closing
'</object>' tag. You need to be careful including closing tags in
javascript. Always break them up like this: '</ob'+'ject'+'>' or the
parser will barf.
Your script is also IE only since there is not embed logic but I
presume that is because you are debugging IE.
Anyway, as an example of how to make this work here is a 'getMovie' function:
function getMovie(movie, w, h) {
var o, a=[];
var params = {
src: movie,
bgColor: '#ffffff',
autoplay: 'false'
};
if (jQuery.browser.msie) {
a.push('<object width="'+w+'" height="'+h+'"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"');
a.push('codebase="http://www.apple.com/qtactivex/qtplugin.cab"></ob'+'ject'+'>');
var o = document.createElement(a.join(''));
for (var key in params)
o.appendChild(document.createElement('<param
name="'+key+'" value="'+params[key]+'">'));
}
else {
a.push('<embed width="'+w+'" height="'+h+'" style="display:block" ');
a.push('pluginspage="http://www.apple.com/quicktime/download/" ');
for (var key in params)
a.push(key + '="'+params[key]+'" ');
a.push('></em'+'bed'+'>');
o = a.join('');
}
return o;
};
To avoid the "click to activate" message this function must be in an
external file, like:
<script src="get.movie.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('body').append(getMovie('myMovie.mov',500,500);
});
</script>
Mike
Leave a comment on malsup's reply
Sorry, here's an example to go with my ramblings:
http://www.andcuriouser.com/sandbox/jqueryqt/test.html
Aaron
Leave a comment on aaron.hildebrandt's reply
Cool, looks like you have it working. But you probably want to add a
"return false" to your click handler.
Mike
Leave a comment on malsup's reply
> Cool, looks like you have it working.
Well, here's a couple notes in conclusion.
My original problem was this: when embedding a QuickTime object in IE,
if you remove the DOM object that contains the QuickTime, then try to
make the exact same DOM object with a new QuickTime, the QuickTime
control bar fails to appear.
An attempt was made to avoid jQuery, and remove/add the QuickTime DOM
objects directly with JS, hoping that this would solve the problem.
Sadly, after two days of attacking the DOM, I found that the problem
still exists.
Thankfully, I found a workaround. It's a bad workaround, but it works,
it's reliable, and, well, it's the ONLY thing I've seen that's
working: I put the QuickTime in an iframe. Which makes me feel a
little dirty. But that iframe can be added and removed a thousand
times over, and IE properly kills the QuickTime when the iframe is
destroyed.
So, I'm willing to call this case closed. A little disappointing, but
closed.
Thanks for all your help, Mike. This is part of a project that's going
to see some widespread use, and I'll make sure you get some
troubleshooting credit.
Aaron
Leave a comment on aaron.hildebrandt's reply
Aaron,
I'm glad you found a workaround that you can live with. I'll grant
you that the QT ActiveX control is somewhat less than robust, but I
was never able to duplicate your problem. The annoying thing that
I've run into is that when you remove the QT object from the DOM in IE
the actual player stays on the browser and is visible. So you need to
do a hide/remove. Very odd. Anyway, I've not seen any problems
regarding the QT controls. In case you're still interested, this is
my test file:
<html><head>
<script src="../jquery-1.1.2.js" type="text/javascript"></script>
<script src="add.movie.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('a').click(function() {
this.id == 'get'
? $('body').append(getMovie('video/simpsons.mov', 500,350))
: $('object,embed').hide().remove();
return false;
});
});
</script>
</head>
<body>
<div><a href="" id="get" >Get Movie</a> <a href="">Delete Movie</a></div>
</body>
</html>
Cheers!
Mike
Leave a comment on malsup's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to aaron.hildebrandt's discussion
{"z2655295":[14737000000223981,14737000000223985,14737000000223989,14737000000223993,14737000000224003,14737000000224007,14737000000224011],"z1413310":[14737000000223979,14737000000223983,14737000000223987,14737000000223991,14737000000223995,14737000000223999,14737000000224005,14737000000224009],"z2950240":[14737000000223997,14737000000224001]}