Embedding QuickTime Movies for All

Best javascript editor debugger Ajax website
↑

Main Page

Embedding QuickTime Movies for All

Here's the problem: Internet Explorer (from version 5.5 up) uses the standard object element in way that is so non-standard, it makes all standards-loving browsers ignore it. Luckily the object element is designed to be nested. If the outer layer doesn't work in a particular browser, the browser is supposed to try the second layer. If the second layer doesn't work, the browser should try the third layer, and so on.

Figure 18.12. The `object` element is designed to be nested. If a browser doesn't support the outer element, it should look at the inner ones until it finds one it likes.

So we should be able to use the outer object for IE and an inner one for other browsers. But Internet Explorer gets this wrong too. Even if you serve it the object element that it likes, it will continue to try (and fail in an obvious and annoying way) with the nested object elements. The solution is to hide the nested elements from IE. I recommend using Internet Explorer's conditional comments for this step.

Figure 18.13. Internet Explorer shows the first movie and instead of ignoring the second `object` element, tries (and fails miserably) to display it as well. The result is that ghost movie at the bottom of the screen.

To embed QuickTime movies for all major browsers:

1.	First we'll follow the instructions for inserting QuickTime movies for Internet Explorer, as described on page 286.
2.	Just before the final `</object>` element, use Internet Explorer's conditional commenting to hide the rest of your code from IE for Windows so that it doesn't erroneously display two `object` elements, by typing `<!--[if !IE]>-->`.
3.	Next, follow the instructions for inserting QuickTime movies for standards-loving browsers (as described on page 288.).

4.	Type `<!--<![endif]-->` to stop hiding content from Internet Explorer. That's it! (Figure 18.14) Figure 18.14. I recommend using IE's conditional comments (adapted as shown here so that they validate) to hide the second `object` element from IE.

Tips

The typical method for serving Quick-Time movies (and any other multimedia file) to both IE and the rest of the world has usually involved the embed element, as described on page 302 with respect to Windows Media Player. You can still do that with QuickTime too, but it won't validate.
You can find more information about IE's conditional comments on Microsoft's site: http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp

Figure 18.15. Once we hide the second object from IE (left), no ghostly apparitions appear. Standards-loving browsers like Firefox on the right continue properly ignoring the first object and properly displaying the second object as usual.

[View full size image]
Microsoft's conditional comments actually don't validate (surprise) when used as they were originally designed. Thankfully, a guy named Lachlan Hunt figured out a way to write IE conditional comments in a way that makes them validate (as used in this technique).

Best javascript editor debugger Ajax website
→

Embedding QuickTime Movies for All

Figure 18.12. The `object` element is designed to be nested. If a browser doesn't support the outer element, it should look at the inner ones until it finds one it likes.

Figure 18.13. Internet Explorer shows the first movie and instead of ignoring the second `object` element, tries (and fails miserably) to display it as well. The result is that ghost movie at the bottom of the screen.

Figure 18.14. I recommend using IE's conditional comments (adapted as shown here so that they validate) to hide the second `object` element from IE.

Figure 18.15. Once we hide the second `object` from IE (left), no ghostly apparitions appear. Standards-loving browsers like Firefox on the right continue properly ignoring the first `object` and properly displaying the second `object` as usual.

Embedding QuickTime Movies for All

Figure 18.12. The object element is designed to be nested. If a browser doesn't support the outer element, it should look at the inner ones until it finds one it likes.

Figure 18.13. Internet Explorer shows the first movie and instead of ignoring the second object element, tries (and fails miserably) to display it as well. The result is that ghost movie at the bottom of the screen.

Figure 18.14. I recommend using IE's conditional comments (adapted as shown here so that they validate) to hide the second object element from IE.

Figure 18.15. Once we hide the second object from IE (left), no ghostly apparitions appear. Standards-loving browsers like Firefox on the right continue properly ignoring the first object and properly displaying the second object as usual.

Figure 18.12. The `object` element is designed to be nested. If a browser doesn't support the outer element, it should look at the inner ones until it finds one it likes.

Figure 18.13. Internet Explorer shows the first movie and instead of ignoring the second `object` element, tries (and fails miserably) to display it as well. The result is that ghost movie at the bottom of the screen.

Figure 18.14. I recommend using IE's conditional comments (adapted as shown here so that they validate) to hide the second `object` element from IE.

Figure 18.15. Once we hide the second `object` from IE (left), no ghostly apparitions appear. Standards-loving browsers like Firefox on the right continue properly ignoring the first `object` and properly displaying the second `object` as usual.