Fancybox and Silverlight

221 views
Skip to first unread message

dr_Hate

unread,
May 19, 2009, 8:40:14 AM5/19/09
to fancybox
I'm using fancybox for displaying video files. For wmv files or wms
live streams i'm using 'JW WMV Player Built with Silverlight 1.1'
which works like a charm.

When calling the player in fancybox, everything is ok in standard
compliant browsers (ff,opera,safari,chrome), but IE (versions 8,7,6)
don't display the player. When player is not called with fancybox
everything works.

Has anyone had similar problems, experiences, solutions?

Thanks

JFK

unread,
May 21, 2009, 5:45:06 PM5/21/09
to fancybox
do you have a sample page/link where I can see your code?
I just found a workaround for IE with the html object tag used to
display flash movies

dr_Hate

unread,
Jun 4, 2009, 5:05:56 AM6/4/09
to fancybox
You can see the example here: http://www.stajduhar.org/fancybox/

As I said, works in FF/Oepra/Safari/Chrome, but not in IE 8/7/6

Thanks!

zytzagoo

unread,
Jun 4, 2009, 5:53:05 PM6/4/09
to fancybox
http://zytzagoo.net/mi3.tests/dr_hate_fancybox/

Fixed :)

Problem arises because of the way content is copied over to the
fancybox div.
You're linking an existing element on the page, and fancybox copies
the
element's contents using jQuery's html() in that case.

jQuery's html() doesn't transfer over the <object>'s children <param>
elements,
so that has to be done "manually".

Patch and bug report here:
http://code.google.com/p/fancybox/issues/detail?id=17

JFK

unread,
Jun 4, 2009, 10:23:07 PM6/4/09
to fancybox
I found out that the <object> tag with the 'data' attribute won't work
in IE if opening the video with fancybox
example:
<object class="flashvideo" type="application/x-shockwave-flash"
data="http://www.youtube-nocookie.com/v/GfiuwH9l96g">

if removing the 'data' attribute, the video will play (within
fancybox) in IE but not in the rest of the standard browsers
so the workaround is targeting IE:

<!-- for all browsers -->
<!--[if !IE]>-->
<object class="flashvideo" type="application/x-shockwave-flash"
data="http://www.youtube-nocookie.com/v/GfiuwH9l96g">
<!--<![endif]-->

<!-- for IE only, all versions -->
<!--[if IE]><!-->
<object class="flashvideo" type="application/x-shockwave-flash" >
<!--<![endif]-->

see the thread for further information:
http://groups.google.com/group/fancybox/browse_thread/thread/e3c68c35b64ab34/4c696edca3c81cdc

OK, with silverlight the problem is pretty similar because an <object>
tag is created by the silverlight js file (use firebug to analyze it):
so for your first video you get
<object height="355" width="425" data="data:application/x-
silverlight," type="application/x-silverlight">

this data="data:app..... " causes the conflict with IE and fancybox
so
the hack to apply here is:
1. edit the silverlight.js file
2. look for/around the line 308 and find:
htmlBuilder.push('<object type=\"application/x-silverlight\"
data="data:application/x-silverlight,"');

3. and remove the 'data' attribute and value and leave just:
htmlBuilder.push('<object type=\"application/x-silverlight\"');
(just be careful you don't delete more than this)

4. then save the file (I saved it as silverlight-ie.js to make it
different)
5. and call it from your <head> section
<script type="text/javascript" src="silverlight-ie.js"></script>

and voila! ... problem solved, you have it working in IE (well, just
tested IE7 but I don't see why not in IE6 and IE8)

the curious detail here is that in this case firefox doesn't seem to
care if the 'data' attribute is present or not, it just keep working;
maybe is because the nature of silverlight but I can't say

I also tested it with Opera(9.64), Safari(Windows Beta 4) and Chrome
and works like a charm

see it yourself and feel free to explore the source and files
http://jquery.diaz-cornen.com/fancybox/silverlight_04jun09.html

zytzagoo

unread,
Jun 5, 2009, 5:47:29 AM6/5/09
to fancybox
On Jun 5, 4:23 am, JFK <jfk.d...@gmail.com> wrote:
> and voila! ... problem solved, you have it working in IE (well, just
> tested IE7 but I don't see why not in IE6 and IE8)
>
> the curious detail here is that in this case firefox doesn't seem to
> care if the 'data' attribute is present or not, it just keep working;
> maybe is because the nature of silverlight but I can't say
>
> I also tested it with Opera(9.64), Safari(Windows Beta 4) and Chrome
> and works like a charm
>
> see it yourself and feel free to explore the source and fileshttp://jquery.diaz-cornen.com/fancybox/silverlight_04jun09.html

I've tested the url above in IE6 and IE7 under different VM setups,
and both
keep constantly prompting me to install Silverlight and refuse to play
the video.

http://zytzagoo.net/mi3.tests/dr_hate_fancybox/ works in both IE6 and
IE7.

(I've left a console.log call in there by mistake yesterday, but have
since removed it)

There's an Invalid Pointer error upon closing the fancybox though,
which breaks
opening other video examples (unless you reload the page) -- I'll look
into it when
I get the chance.

Not sure if it's "data related" or not, but I'm positive both IE6 and
7 need the child <param>
elements, and cannot play the videos without them. And jQuery's html()
method
doesn't pick them up in IE.

zytzagoo

unread,
Jun 5, 2009, 6:11:28 AM6/5/09
to fancybox
On Jun 5, 11:47 am, zytzagoo <zytza...@gmail.com> wrote:
> There's an Invalid Pointer error upon closing the fancybox though,
> which breaks
> opening other video examples (unless you reload the page) -- I'll look
> into it when
> I get the chance.

The pointer error is related to trying to manipulate (read from, in
this case) a
silverlight object that's not visible on the page.

One can replace the code in wmvplayer.js to supress the error message
by using a try/catch in the timeChanged() method:

http://www.longtailvideo.com/support/forum/Bug-Reports/17426/-Bad-NPObject-as-private-data-

wmvplayer.js around line 755:

timeChanged: function() {
try {
var pos = Math.round(this.video.Position.Seconds*10)/10;
this.view.onTime(pos,this.configuration['duration']);
} catch (err) {}
}
Reply all
Reply to author
Forward
0 new messages