Comments on: HOWTO: HTML5 Video that works (almost) everywhere

By: Robert Reinhardt

Robert Reinhardt — Tue, 14 Aug 2012 19:22:48 +0000

I wouldn’t recommend only using H.264 Baseline across all deployments. H.264 Main profile should be targeted to tablets/desktops, and H.264 Baseline should be targeted to smartphones. The tag’s type attribute can use an extended value that includes the video codec used in the MP4 file, which is used by the playback device to determine its capabilities for rendering it.

By: Dan

Dan — Thu, 15 Dec 2011 19:29:49 +0000

Thanks for this OTTO! With regard to older browsers .. we’d just be placing in the full embed & object method within the opening and closing tags of the video shortcode correct?

By: Otto

Otto — Fri, 09 Dec 2011 20:08:19 +0000

Works fine in Firefox, because of the OGV support.

IE8 doesn’t do HTML 5 video. Upgrade to IE9.

By: Coder

Coder — Fri, 09 Dec 2011 19:39:25 +0000

This code can’t work in IE 8 & firefox.

By: Otto

Otto — Tue, 16 Aug 2011 16:18:55 +0000

Relative URLs are actually more evil, and you should always use absolute URLs. Two main reasons:

1. Absolute URLs are easier to change with a global search and replace. Relative URLs are difficult to alter later and make the regular expressions needed to do so much more difficult to create.

2. Your content is not only displayed on the website. It may also be displayed in feeds, or it may be aggregated. Absolute URLs will maintain the connections between the content and the things linked to from there. Relative URLs will not, since now they’re relative to… what, exactly? Relative URLs make an inherent assumption that they live in a specific place, but your content doesn’t need to live in only one place.

Use absolute URLs. Always.

By: Bughunter

Bughunter — Tue, 16 Aug 2011 12:37:39 +0000

Thank you very much for this post, BUT: full URLS are absolutely EVIL! Relocating a site with full URLs in post code is a real PITA, so please do not release this kind of timebomb into the public without warning people aboit what having full URLs in post content really means! Please always use relative URLs or use some defines from wp-config, but never, never, never ever use full URLS! THANKS!

By: Bill

Bill — Wed, 22 Jun 2011 21:30:55 +0000

Really? In my experience WebM is usually only slightly larger than Ogg at the same bitrate and noticeably sharper with less artifacting. I use FFmpeg (and also FFmpeg2Theora) to transcode videos. It looks like Miro uses the same thing, so I’m not sure why you’re getting different results. Maybe Miro is using older versions of FFmpeg and FFmpeg2Theora that are missing some enhancements to the encoders? Maybe it was just the quality of the source material?

In any case, I guess it doesn’t really matter since you’re getting the same (actually slightly better) browser support using Ogg instead of WebM.

By: Otto

Otto — Wed, 22 Jun 2011 18:31:43 +0000

Probably some parts of the post are old, yes. I tend to write ideas for posts down as drafts, then fill them out later when I have a reason to post them. So I have a fair amount of partially written posts lying around, and every once in a while I dust one off, fix it up, and post it.

I did try WebM when doing this, but noticed that the filesize was significantly bigger than the ogv was. Around double. Since the quality wasn’t any better, I stuck with the ogv instead..

By: Bill

Bill — Wed, 22 Jun 2011 17:40:49 +0000

"Future versions of Firefox will support the WebM format instead (Chrome supports it now), so when Firefox 4 comes out, use that format." Is this an old post? Firefox 4 was released back in March and Firefox 5 was just released yesterday. These browsers support WebM right now: Firefox 4+ Chrome 6+ Opera 10.60+ IE 9 with the WebM for IE9 codec plugin installed Safari 3.1+ for Mac with the Perian QuickTime Component v1.2.2+ installed Of course, to ensure the video works in IE 9 and Safari 3.1+ on all platforms (Windows, Mac, iPhone), you should use H.264 (Baseline Profile) video with AAC (low-complexity) audio in an mp4 container (like you described in the article). You can use Theora/Vorbis in an OGG (ogv) container to support older versions of Firefox (3.5+), Chrome (5+) and Opera (10.50+) if necessary. However, WebM is arguably higher quality than OGG, so it's probably best to stick with that.

By: Otto

Otto — Mon, 20 Jun 2011 17:10:26 +0000

No need for crazy useragent checking. The way the video tag works is that if the video format isn’t supported, the other content inside the tag is displayed instead. So just by adding the flash stuff (or whatever) after those three sources you can specify the HTML to be shown instead in IE8 and such (IE7 is insecure, I wouldn’t use it and I’d tell site visitors to upgrade).

To do it with the shortcode, just include the content inside the shortcode. [video ...](extra content)[/video] will work just fine.