Pain embed QuickTime movie

[WhiteDragon]

Hello, I am trying to embed a quicktime movie on my page within a <div id> this is the code that was given to me as I could not figure it out at all.

<div id="flashbox">
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="320" height="240">
<param name="src" value="/test/box.mov" />
<param name="autoplay" value="true" />
<param name="controller" value="false" />
</object>
</div>

Now the problem is it works in IE6, but not in IE7, FF3, or Opera.

[Centauri]

Unfortunately, IE can only work with the classid number for quicktime which is not compatible with compliant browsers. The fix is to embed another object and hide it from IE with a conditional comment :<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="320" height="240">
<param name="controller" value="false">
<param name="autoplay" value="true">
<param name="src" value="/test/box.mov">
<!--[if !IE]>-->
<object type="video/quicktime" data="/test/box.mov" width="320" height="240">
<param name="controller" value="false">
<param name="autoplay" value="true">
Error text.
</object>
<!--<![endif]-->
</object>

[WhiteDragon]

Thank you so much for your help. Do you know how I can adjust the positioning of my quicktime movie on my page?

And also what would be the code for putting the controls like "stop and play" and on the quicktime file?

[Centauri]

Same as positioning anything else - just apply the appropriate margins to the <object> (you could give the object a class name or id to facilitate this).

Setting the "controller" parameter to "true" should enable the controls.

[WhiteDragon]

I turned on "controller true" the control didn't show up. Also in regards to the positioning I would just apply a style to the <object> tag ?

Also do you know why QuickTime crashes the browser and then you have to restart it for the QT movie to play ? In my case, I would load up my page (or any others for that matter) and it would crash my browser then when I restart the page up again it plays?

[WhiteDragon]

Darn I originally had the quicktime movie within a class then that class was within a id, now I just gotta put in a class again so I can position the quicktime movie.

[WhiteDragon]

Alright, my controller is not showing up, and it's working in FireFox, Opera but not in IE.

And I turned on "controller=true" for Quicktime.

[Centauri]

Would probably need to see a demo of this online to work out what is happening.

[WhiteDragon]

Alright http://www.walkfar.ca/test/main3.html

[Centauri]

I get a broken movie graphic, which would suggest the movie file is corrupt.

Also, if you want the movie in the middle of the box, make the box the same size as the movie and increase it to the desired with padding :#flashbox {
height: 240px;
width: 320px;
padding: 30px 55px;
background-color:transparent;
background-image:url(backgroundqt.png);
position: relative;
float: left;
left: 34px;
top:67px;
}

[Eye for Video]

I took a look in the cache for the movie and it works fine. I also downloaded just the movie from:
http://www.walkfar.ca/test/box.mov
still works fine.

<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="320" height="240">
<param name="src" value="http://www.walkfar.ca/test/box.mov" />
<param name="autoplay" value="false" />
<param name="controller" value="true" />
<param name="kioskmode" value="true" />
<!--[if !IE]>-->
<object type="video/quicktime" data="http://www.walkfar.ca/test/box.mov" width="320" height="240">
<param name="controller" value="true" />
<param name="autolay" value="false" />
Error text.
</object>
<!--<![endif]-->
</object>
This works with my FF but not IE (param name set to absolute). The problem seems to be with the code relating to the clsid. Not sure what to do about that.
If I may ask, why are you using .mov to display animation and not a more viewer friendly and ubiquitous format like Flash? I can understand wanting to learn how to do it, but to use a .mov to display your animation skills, as you state on your Web site, seems counter productive.
After just a quick look at the movie and the file size, it seems that the bitrate is about double that of a mid quality Flash. That is one of the main problems with .mov, the compression is not comparable to other formats, hence, you just don’t see it as much on the Web. And, while Quicktime is fairly popular, the correct pluggin still has to be on the end viewers machine for them to view the clip.
Centauri is a pretty sharp guy and if he’s having problems with it, maybe you should reconsider using .mov. If you don’t, well here’s wishing you the best of luck!
Eye for Video
www.cidigitalmedia.com

[Centauri]

Got it going now - I only had quicktime 5 on my machine and upgrading to version 7 worked (stupid format doesn't even tell you if you need to upgrade - at least flash does that) - movie works for me in FF and IE6, however the control still doesn't show. I have no idea about the Quicktime format, but it may have something to do with the way the movie was made. If you plug this movie (http://realdev1.realise.com/rossa/mov/tang.mov) into your code, it works fine with the controls.

[Eye for Video]

Thanks for illustrating my point about the Quicktime plug-in. If you don't have the right one, you just ain't gonna' see the clip. Currently 95%+ of all Web browsers have the Flash plug-in.. What are the stats for the latest version of Quicktime?
EfV

[WhiteDragon]

Oh I can see Centuari is a smart guy :) ! No need to tell me :)

You are right about the QuickTime file, I created it as a test in Adobe Flash and I suppose Flash created a ugly QT file, so I am going to use that movie from that link Centarui suggested. Although I currently do have QuickTime 7.4 installed and it does not play in IE7 but it played for you Centuari ?

[WhiteDragon]

Alright, I have the QuickTime movie file working in mostly all browsers. It was my QuickTime movie file that was causing the problem, the only slight problem I see is the "controls" are a bit cut off could this be due to the size of the movie file or some setting ?

Also if I wanted to reposition it could I create a class within the div and just position it using the class ? Sound good or no ? :)

[WhiteDragon]

If you want to test in IE7 yourself I invite you too, as I'm having just a bit of problems on IE7, seems to crash or stall.

[Eye for Video]

Control problem is that the <object …height="240"… while the …type="video/quicktime" height="250">.
Neither is quite large enough to hold the movie and the control. Height must be large enough for the movie (240) plus the controls. I tried height="255" and it looks pretty good.
Also the player seems to be outside the edges of the background image “backgroundqt.png”. Looks like this is due to the image having a transparent edge or drop shadow around it. It that the case? The <object> sits at 0,0 inside the <DIV id=flashbox>, yet seems to be outside that. Change the

#flashbox {…..BACKGROUND-COLOR: #00FF00}

and you’ll see that the <object> is in fact at 0,0. The image must have an edge, and since it’s set to

background-color:transparent;

that’s what makes it seem to be off the background image.
Just clean up the positioning in your css and you’ll be fine.
Oh, if you created the original movie in Adobe Flash, why would you not publish as a .swf? Quicktime is intended for playback of bitmap video while Flash is intended as a vector graphics development program. The simple cube you had in the original movie would require a photograph (bitmap) of it in each frame of the movement. So a 25 frame movie at 25 frames per second would have 25 photographs of that cube in different locations. You can imagine how large a bigger animation would be.
Flash would have one instance (or photograph if you will) of that cube, which it would display in 25 different locations. See the difference in potential file size?
Well, best wishes,
Eye for Video
www.cidigitalmedia.com

[WhiteDragon]

True about the flash file size Eye for Video :) I put the QT movie within a .class which is within the <div> so I can now just easily position the .class and it moves where I need it to be.