Showing posts with label ie6. Show all posts
Showing posts with label ie6. Show all posts
15 June 2010
OGV/OGG and the HTML5 player in Firefox
I tried playing an OGV video on Firefox using the new HTML5 video tag; the video played fine in the latest versions of Opera, Chrome, and Safari. But Firefox 3.6.3 would only show a big "X" -- no errors, nothing.
Some research revealed the answer: The video is being served as application/octet-stream. The other browsers can detect the type from the extension; Firefox, following good standards, is checking the mime type. The same issue existed on my localhost, with IIS running.
Solution is to add the OGV/OGG mime type to the server; different servers have different ways of doing this. For IIS, it's pretty simple. Follow the linked article, and simply replace the "Extension" with .ogg and the "MIME type" with application/ogg and restart IIS. Additional information on Firefox and mime type configuration can be found here. I recommend the OGG file extension and application/ogg mime type because they're included on Apache servers by default -- so no need to update configuration files and restart your production server.
But there's more to it. The type attribute on the source has to be shorter (this is a known Firefox bug). In addition, the OGG file has to be encoded correctly for it to work in all the browsers supporting the HTML5 video tag. The best encoding tool I've found thus far is FireFogg. It created the OGV that works like a charm on all the appropriate browsers (I just renamed the extension to OGG).
One last gotcha: IE doesn't like the source tag not being closed and will throw JavaScript errors; the other browsers don't care. So simply add a closing tag to the source tag and IE is happy. Now, why use a video tag in IE, when IE doesn't support that yet? Simple: The html5media library automatically replaces the video tag in unsupported browsers, such as IE, with the Flowplayer Flash player.
The final result is this; note the closing source tags; also, the MP4 source has to come first for it to work correctly on the iPhone/iPad:
Some research revealed the answer: The video is being served as application/octet-stream. The other browsers can detect the type from the extension; Firefox, following good standards, is checking the mime type. The same issue existed on my localhost, with IIS running.
Solution is to add the OGV/OGG mime type to the server; different servers have different ways of doing this. For IIS, it's pretty simple. Follow the linked article, and simply replace the "Extension" with .ogg and the "MIME type" with application/ogg and restart IIS. Additional information on Firefox and mime type configuration can be found here. I recommend the OGG file extension and application/ogg mime type because they're included on Apache servers by default -- so no need to update configuration files and restart your production server.
But there's more to it. The type attribute on the source has to be shorter (this is a known Firefox bug). In addition, the OGG file has to be encoded correctly for it to work in all the browsers supporting the HTML5 video tag. The best encoding tool I've found thus far is FireFogg. It created the OGV that works like a charm on all the appropriate browsers (I just renamed the extension to OGG).
One last gotcha: IE doesn't like the source tag not being closed and will throw JavaScript errors; the other browsers don't care. So simply add a closing tag to the source tag and IE is happy. Now, why use a video tag in IE, when IE doesn't support that yet? Simple: The html5media library automatically replaces the video tag in unsupported browsers, such as IE, with the Flowplayer Flash player.
The final result is this; note the closing source tags; also, the MP4 source has to come first for it to work correctly on the iPhone/iPad:
<video id="vid" width="372" height="209" poster="global/vid/historydetectives-poster.jpg" controls preload>
<source src="global/vid/historydetectives.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'></source>
<source src="global/vid/historydetectives.ogg" type='application/ogg'> </source>
</video>
14 May 2010
03 May 2010
Run IE6, 7, and 8 on the same PC
If you need to test your apps on multiple versions of IE, you've run into the problem where Windows will only allow one IE version to be installed on the box. There are ways to get around this limitation, such as using Virtual PC, etc.
But I'd like to run IE native on the OS. In the past, the great MultipleIEs from TredoSoft did the trick: You had IE7 already installed, and the tool added all the previous versions you needed. Now with IE8, it's a little trickier.
After installing IE8 and the great Multiple-IE app from TredoSoft, follow the instructions they provide to add a standalone IE7 to your box. I used the IE7 Standalone exe, which automatically downloads IE7 and does all the work for you.
The first time I started the standalone IE7, it didn't seem to work correctly. After shutting it down and restarting, it worked like a charm.
But I'd like to run IE native on the OS. In the past, the great MultipleIEs from TredoSoft did the trick: You had IE7 already installed, and the tool added all the previous versions you needed. Now with IE8, it's a little trickier.
After installing IE8 and the great Multiple-IE app from TredoSoft, follow the instructions they provide to add a standalone IE7 to your box. I used the IE7 Standalone exe, which automatically downloads IE7 and does all the work for you.
The first time I started the standalone IE7, it didn't seem to work correctly. After shutting it down and restarting, it worked like a charm.
14 April 2010
CSS rules for IE6 and lower
This is a neat and useful shorthand for writing CSS that IE 6 and lower will use; higher versions of IE and other browsers will ignore this:
Note the underscore character. The first margin-top rule is used by all browsers, including IE6; the second one is used only by IE6 (and lower), overriding the first. I think you can use this same trick for all CSS rules.
margin-top:50px;
_margin-top:20px;
Note the underscore character. The first margin-top rule is used by all browsers, including IE6; the second one is used only by IE6 (and lower), overriding the first. I think you can use this same trick for all CSS rules.
31 March 2010
Transparent PNG for IE6
IE6 is a bear when it comes to transparent PNG images. In a perfect world, we'd build an app and not worry about the older browsers -- ensuring that the functionality is there, though the layout and graphics might not work right. However, with anywhere from 10 - 20% of users still browsing with IE6 as of this writing, we'd like to have pages look reasonably well for that browser as well.
The AnythingSlider library, by the incomparable Chris Coyier, uses transparent PNGs for the back/forward buttons. They look beautiful and blend so well into the component. If you view the control in IE6, however, you'll immediately see the non-transparent backgrounds of the PNG images.
Not to worry: Angus Turnbull has written the IE PNG Alpha Fix, which is a CSS HTC behavior. Once you download the code and placed it on your site, you can use an IE conditional statement like this to fix the problem in IE6:
Ensure you have the correct URL to where you've placed the HTC file on your site. This particular CSS rule says that the behavior should be applied to all IMG and DIV tags, as well as any anchor tag with the style class "arrow" (used by the AnythingSlider to display the back/forward PNGs).
The AnythingSlider library, by the incomparable Chris Coyier, uses transparent PNGs for the back/forward buttons. They look beautiful and blend so well into the component. If you view the control in IE6, however, you'll immediately see the non-transparent backgrounds of the PNG images.
Not to worry: Angus Turnbull has written the IE PNG Alpha Fix, which is a CSS HTC behavior. Once you download the code and placed it on your site, you can use an IE conditional statement like this to fix the problem in IE6:
<!--[if lte IE 6]>
<style type="text/css" media="screen">
img, div, a.arrow { behavior: url("iepngfix.htc") }
</style>
<![endif]-->
Ensure you have the correct URL to where you've placed the HTC file on your site. This particular CSS rule says that the behavior should be applied to all IMG and DIV tags, as well as any anchor tag with the style class "arrow" (used by the AnythingSlider to display the back/forward PNGs).
Subscribe to:
Posts (Atom)