Hi there

 

I did this site recently as an offline site - it's now gone online and I can't get the video to play in IE7. Check this link as it's the only page containing video:

 

Clapping Video

 

code used to embed video:

 

<div id="videobox">
<object id="quicktimefile" data="nosoundclap.mov" width="318" height="254" type="video/quicktime">
<param name="src" value="nosoundclap.mov" />
<p class="alert">Please download the Quicktime plugin to view movie</p>
 </object>
</div>

 

I've checked the site in other PC browsers and it works fine - IE7 throws an eppy and declares that an acitve-x control needs to be run - you click ok to accept this and the video still doesn't show. Anybody got any ideas?

Just from the top of my head (and prob wrong!) have a peek at http://www.apple.com/quicktime/tutorials/embed.html or google for 'Quicktime IE7'

you need to use the <embed> tag instead of <object>.

I'll post the full code later for you if you can't find it before

you're a star - I'd really appreciate the code!

there you are actually

http://www.infinite-eye.com/distractions_quicktime.php

 

 

Hope this helps

Et voila!

 

<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" 
codebase="http://www.apple.com/qtactivex/qtplugin.cab" 
height="318" 
width="254">
<param name="src" value="nosoundclap.mov" />
<param name="autoplay" value="true">
<param name="controller" value="true">
<param name="loop" value="false">
<param name="type" value="video/quicktime" >
<p class="alert">Please download the Quicktime plugin to view movie</p>

<embed width="320" height="254" pluginspage="http://www.apple.com/quicktime/download/" src="nosoundclap.mov" type="video/quicktime" autoplay="true" controller="true" loop="false"> 
</object>

 

Hope this helps!

 

BTW, This site is absolutely STUNNING!!!! Another brilliant site, well done

Hey - thanks for taking the time to do that.

 

I didn't think you could use both the object and embed tag together as that's not valid XHTML? Maybe I'm wrong.

I just used your code and the page stopped validating - I don't think you can mix the object and embed tag anymore.

alright, sorry about the validation problem.

Just did a bit of research in my books and stuff and here you go!

 

<div id="video">
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="318" height="254">
<param name="src" value="nosoundclap.mov" /> 
<param name="controller" value="true" /> 
<param name="loop" value="false" />
<param name="autoplay" value="false" />

<!--[if !IE]>-->
<object type="video/quicktime" 
	data="nosoundclap.mov" 
	width="318" height="254">
	<param name="controller" value="true" />
	<param name="loop" value="false" />
	<param name="autoplay" value="false" />
	</object>
<!--<![endif]-->
</object>
</div>

 

This validates, strict xhtml and it works in our lovely modern browsers and IE

What this code does is pretty self explanatory, however if you want me to explain it in details, as always, give a shout

 

enjoy!

 

Oli

 

PS : the <object> HAS to be wrapped into something to validates so leave the <div> where it is

You BEAUTY! That works perfectly!

 

So do some explaining! Why does that work and what you had before didn't - I've not used the IE comments before - feeling less of an expert every time you post something...

Cool! I'm pleased it worked

 

Alright so, let's explain.

The embed was created because IE uses the object tag in a weird way (what a surprise) and needs a classid to identify what type of media you're trying to embed in your page.

For example if you have put flash in a page before (that is without swfobject or the like) you've probably noticed the ugly long number that appears at the beginning of your object tag:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="100%" height="100%">

 

this is what tell IE that you are using flash.

Other (modern & clever) browser however only need to be given a type attribute to understand what you are trying to embed in you page. So to add flash and make it work in both IE and the others, you use to have to use something like that(again this is without swfObject)

 

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="100%" height="100%">
<param name="movie" value="somemovie.swf" />

<embed src="somemovie.swf" width="100%" height="100%" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash"></embed></div>
</object>

 

The first part of the object tag is for IE, the embed part is for the good browsers

 

If you look at the code, in <object> you have "classid+ugly number" and in the <embed> you have "type+easy to read description" instead. Both serve the same purpose.

Another thing that is different is the way both tags (object & embed) refer to the movie:

In the object tag, we use <param name="movie" value="somemovie.swf" />

In the embed tag, we use src="somemovie.swf"

 

Alright, Still following? There's why and how what I gave you works.

First of all, embeded has gone in xhtml strict (finally) so we need to serve the same parametres it would have sent to the browser using <object>.

 

Now let's look at the code I gave you. First part, is for IE:

 <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="318" height="254">
<param name="src" value="nosoundclap.mov" />
<param name="controller" value="true" />
<param name="loop" value="false" />
<param name="autoplay" value="false" />
</object>

Note the ugly classid but for QT movies, the "scr" is ok.

 

Now here's the same thing for Standard compliant browsers:

<object type="video/quicktime"
	data="nosoundclap.mov"
	width="318" height="254">
	<param name="controller" value="true" />
	<param name="loop" value="false" />
	<param name="autoplay" value="false" />
	</object>

This time, instead of the classid, we use the type attribute.

 

Now, (and it's nearly the end) what we need is to have both in one <object> declaration, like so:

 <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="318" height="254">
<param name="src" value="nosoundclap.mov" />
<param name="controller" value="true" />
<param name="loop" value="false" />
<param name="autoplay" value="false" />

<object type="video/quicktime"
	data="nosoundclap.mov"
	width="318" height="254">
	<param name="controller" value="true" />
	<param name="loop" value="false" />
	<param name="autoplay" value="false" />
	</object>

</object>

What we do her is just nesting, the <object> for Standard compliant browsers within the IE one. If we were to leave this this way, our lovely browser(s) (firefox, safari...) could handle it but IE (again) can't. Sooooooooo the solution is in conditional commenting!

 

I'm not going to bore you by getting into details about conditional commenting here, If you want to know more about it, let me know and I'll write about it

 

So in your code, what's happening is this:

 

<IE object>
content
<!--[if !IE]>-->	<<<<conditional comment, this means, if not IE (the exclamation mark means not)
<firefox object>
</object>
<!--<![endif]-->   <<<<end conditional comment
</object>

 

So in plain english, IE sees the correct <object> first and because of the conditional comments, can't see the second one and displays the movie properly.

Firefox however, reads the first <object>, doesn't understand it so ignores it and goes to the second <object> and display our movie!!!

 

Et voila!

I hope this makes sense to you. I learned this technique ages ago but as I never had use for it, forgot about it until today! I read about it on the old figleaf I think.. can't find the article anymore unfortunately.

 

I hope I explained it well for you, if not tell me and I'll write this in French lol

 

Enjoy

 

Oli

I bow down to your amzing wisdom... Thanks for taking the time to explain it all to me!

 

Oh My God - I thought I was the only one up at this time of night!!! Time for bed methinks and it's nearly 3am!

lol, I just hope it makes sense to you

 

Nite nite now

How come you were up so late last night then? I was busy doing my Eskymo Newlsletter...

To cut a long story short, I have started snoring recently (I know... Charming) so I sleep on the sofa, and obviously, my macbook pro doesn't want me to sleep

I hope you have a comfy sofa!

I wish... my back hurts so much

sort out your snoring then! kicking could work!

LOL kicking is really bad when your sleeping with your girlfriend. However, mine tends to kick me instead; painful.

Oliver thanks for the nice explanation and the code. I was also making a website and that really helped me out a lot.

Eskymo, very nice design for the site. I really love the layout. If I may ask, can you help me create a layout for my portfolio. http://sazzadhossain.inf/portfolio/ it will mostly be on white background since you want me to change the current layout (plus white is needed when using the stylechanger script).

 

Btw on the "FIND OUT MORE" area/button, I think you should shorten the clickable area, it doesn't look right, plus the white light-transparency you added effects the PAST PRESENT ONLINE title area: towards the bottom right of that banner area.

If I may ask, can you help me create a layout for my portfolio. http://sazzadhossain.inf/portfolio/ it will mostly be on white background since you want me to change the current layout (plus white is needed when using the stylechanger script).

 

Your link doesn't work and it's not up to me what you do with your site as in "you want me to change the current layout". I offered you a few suggestions and said what I liked / didn't like. I'm not telling you to do anything.

 

Btw on the "FIND OUT MORE" area/button, I think you should shorten the clickable area, it doesn't look right, plus the white light-transparency you added effects the PAST PRESENT ONLINE title area: towards the bottom right of that banner area.

 

I know about this and there's no way of getting around it as I couldn't make the clickable area overlap the H1 area and I'd got so far with the design stage by the time I started coding that it was too late to re-arrange things. I don't think it's that noticeable - only to designers and colleagues - the general public never noticed it and if they did, they didn't comment on it and it has no impact on the usablility of the site.