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:
*
https://ogvjs-testing.wmflabs.org/
The TMH+ogv.js patch in progress:
*
https://gerrit.wikimedia.org/r/#/c/145756/
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