MP4 object: 10.8 webkit browsers "Missing Plug-in", other browsers display video via QuickTime

My organization's web site uses object tags to display MP4 video files. Here's an example:

<object width="494" height="388" codebase="http://www.apple.com/qtactivex/qtplugin.cab" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B">
<param value="http://server.site.org/path/filename.mp4" name="src" /> <param value="false" name="autoplay" />
<embed width="494" height="388" autoplay="false" pluginspage="http://www.apple.com/quicktime/download" type="video/mp4" src="http://server.site.org/path/filename.mp4" />
</object>

The videos display correctly in: Mac Firefox, Windows Firefox, Windows IE, Windows Chrome, Android browser, iOS Safari, Mac 10.6 Chrome and Mac 10.6 Safari. Other html tag options (iframe, video, etc) failed to offer as much compatibility.

The videos do not play in Mac 10.8 Safari and Mac 10.8 Chrome. (I think 10.7 works). Instead, Safari shows a blank white space with "Missing Plug-in", and Chrome shows a broken plugin icon and message bar.

The Macs in question do not have DivX or Perian (discussions.apple.com said those add-ons can cause similar problems).

What has changed in OS X (or QuickTime, or WebKit) to cause this? How do I work around this regression, without breaking functionality in other browsers?

Solution 1:

On modern browsers your best bet is to use the HTML 5 video tag.

<video width="494" height="388" controls autoplay>
 <source src="http://server.site.org/path/filename.mp4" type="video/mp4">
 Your browser does not support the video tag.
</video>

You can put your fallback code where it says "Your browser does not support the video tag.".