Today I took a stab at combining ogv.js JavaScript-based media playback with MobileFrontend by adding a loader shim to TimedMediaHandler on the 'mobile' target (the rest of TimedMediaHandler's desktop support code is not loaded, so the UI is mobile-specific but very bare-bones).

Demo page can now play back audio and video in iOS 7's Safari in mobile mode as well as desktop mode:

The mobile loader code checks for any <audio> or <video> elements and asks them if they canPlayType() on any of their available sources, so it only loads if non-native playback is actually required. (So for instance it disengages on Android Chrome which can play Ogg Vorbis audio and WebM video, or in theory in Safari if you have locally enabled MP4/H.264 files.)

It needs more work to check for browser compatibility, sufficient JavaScript engine speed, etc, but I find it encouraging that it works so far. :)

Some thoughts and questions:

* Currently ogv.js gets loaded if any audio/video elements are present that require it to play, even if they don't get played. I can delay the loading to when 'play' is clicked fairly easily.

* [[Media:]] or other direct file links, often used for pronunciation markers in Wikipedia articles, are not picked up by this system. Need to extend things a bit to detect clicks on such links and display a player instead of just downloading the file. Same problem occurs in Safari and IE on desktop mode.

* Should we show the video in an overlay like the mobile media viewer for images, instead of playing inline? This is a good place to add additional controls to reach file info details, as with images. If so should I try to extend the same overlay code in MF or create a near-lookalike that lives in TMH?

* If so, that should probably be used for *all* mobile browsers, using the native playback when available instead of loading ogv.js...

* Should we have a manual resolution switcher, as on desktop? (Controlling source selection via code could also fix a problem with Android being unable to play Ogg Theora videos, to force it to WebM which does work natively.)

* On iOS, should the source selector offer to launch higher-res and WebM videos in the external VLC app? 360p is about the limit of good performance in ogv.js on current A7-based iOS devices, and slower models max out at 160p if they can even handle that.

-- brion