Page MenuHomePhabricator

Support ogv.js in player
Closed, ResolvedPublic

Description

Author: mdale

Description:
Brion has built a javascript based solution for ogg video playback in browser without native support for ogg in the video tag.

The player should be integrated into TMH, and loaded on-demand for browsers that don't support any other open formats.

Javas cortado should be deprecated.

https://brionv.com/misc/ogv.js/demo/


Version: unspecified
Severity: normal
URL: https://github.com/brion/ogv.js/issues?milestone=2&state=open

Details

Reference
bz61823
Related Gerrit Patches:
mediawiki/extensions/TimedMediaHandler : masterogv.js media player for desktop Safari/IE/Edge (2 of 2)
mediawiki/extensions/TimedMediaHandler : masterogv.js media player for desktop Safari/IE (1 of 2)
mediawiki/extensions/TimedMediaHandler : masterWork in progress: ogv.js media player for Safari/IE (3 of 3)

Event Timeline

bzimport raised the priority of this task from to Needs Triage.Nov 22 2014, 3:05 AM
bzimport added a project: TimedMediaHandler.
bzimport set Reference to bz61823.
bzimport created this task.Feb 23 2014, 4:11 PM
brion added a comment.Feb 23 2014, 9:04 PM

List of upstream issues blocking production-readiness: https://github.com/brion/ogv.js/issues?milestone=2&state=open

Note that to fully deprecate Cortado we may want an all-Flash solution for old versions of IE and such. List of issues for that side of things here: https://github.com/brion/ogv.js/issues?milestone=5&state=open

brion added a comment.Mar 18 2014, 7:01 PM

I've got a Flash version working in modern browsers and IE 9; should be able to tweak the JS side until it works in IE 6/7/8.

The <video>/<audio>-alike API for the player needs more polish before I'm ready to try dropping ogv.js/ogv.swf into TMH, but it's coming along very well!

Note that the JavaScript version works without Flash for current Safari/Chrome/Firefox, but does require a small Flash shim for audio output on IE 10/11; it may be simplest to just use the all-Flash version whenever Web Audio API is not present, thus:

Native <video>/<audio> available and supports Ogg/WebM?

-> use native
* current Chrome, Firefox, Opera

Have typed arrays and Web Audio?

-> JavaScript ogv.js
* Safari 6.1/7 on Mac
* Safari on iOS 7

Have Flash?

-> use Flash ogv.swf + JS wrapper
* IE 6/7/8/9/10/11
* Safari <=6 on Mac
* other really old browsers

Else?

-> link out to download/directions

Note also that some of my test devices have trouble playing 360p videos:

  • 32-bit iOS devices (iPod Touch 5th gen, iPad 3)
  • Surface RT (Tegra 3-based tablet)
  • Dell Inspiron Duo (old Atom-based mini laptop/tablet)

These play audio and 160p videos acceptably.

Note that alternate iOS browsers have all the plumbing for playback but are too slow due to the JIT being disabled by Apple; may need to blacklist iOS non-Safari browsers.

Also still need to poke at iOS 6 to either get it working or blacklist it.

mdale wrote:

Amazing work. Lest we can do is bring in kaltura player v2 so we have clean way to integrate it :)

The kaltura player can support custom player selection logic, as well as associate player interfaces that load on-demand so we should be able to capture all this logic relatively clean.

I would probably put all this into its own mwEmbed module, include the custom player selection logic, and then load the "player interfaces" decoders on demand where needed.

brion added a comment.Mar 19 2014, 4:13 PM

I've added a Cortado mode to the player demo at https://brionv.com/misc/ogv.js/demo/ to more directly compare against the current Flash version for IE usage.

Where Cortado fails:

  • With latest Java 7, even the signed version of the applet from theora.org won't run unless you add a security exception in your Java configuration -- it's missing permission information in the manifest that the latest plugin demands. This should be fixable upstream.
  • Java applet plugin is _horribly_ broken with regard to z-indexing in IE; you can't float other elements above it, such as say custom dynamic controls. This could make it ugly for integration into MultimediaViewer, and definitely breaks my demo page. The Flash plugin works more nicely with the browser as long as you set the right parameters.
  • Java applet startup is much slower than Flash startup, and shows an annoying Java logo.
  • Cortado's video output is scaled nearest-neighbor and looks pretty bad when scaled up. Flash and JS provide nice smooth scaling.

Where Cortado still wins:

  • cortado.jar is less than half the size of ogv.swf (186KiB vs 454 KiB). May or may not be able to prune some more of the C library code out...
  • With latest Java 7, Cortado runs at modestly lower CPU usage than the Flash version on both 32-bit and 64-bit Windows 8.1. (eg ~18% vs ~22% usage on one machine). May be able to make further improvements to Flash speed, but I'm willing to take the slight hit for the fact that it "just works".
  • Cortado can seek; haven't yet rigged that up in JS or Flash. A nice to have but not a killer feature when the current player is so hard to use at all.
  • Cortado has some sort of built-in subtitle support; need to check how all that integrates and if it needs to be added to the Flash side. (If we don't use that in TMH's Cortado integration then can ignore this for now...)
Tgr added a comment.Mar 19 2014, 5:49 PM

(In reply to Brion Vibber from comment #4)

  • Java applet plugin is _horribly_ broken with regard to z-indexing in IE;

you can't float other elements above it, such as say custom dynamic
controls. This could make it ugly for integration into MultimediaViewer, and
definitely breaks my demo page. The Flash plugin works more nicely with the
browser as long as you set the right parameters.

IIRC that can usually be solved by putting an invisible iframe on top of the plugin area. IE6 handles plugins and OS UI elements (like <select>) outside of the stacking order, but iframes are handled in some weird way that is both in and out of the stacking order so they can overlap plugins and they can be overlapped by normal elements with a higher z-index. (As long as you are careful to follow IE6's own interpretation of how z-indexing should work, which is horribly broken in an entirely different way.)

Change 145756 had a related patch set uploaded by Brion VIBBER:
Work in progress: early testing of integration with ogv.js media player

https://gerrit.wikimedia.org/r/145756

brion added a comment.Jul 14 2014, 2:42 AM

I have a live sample wiki running with the patch on labs: http://ogvjs-testing.wmflabs.org/

Still some more work to do, but the basics are working. :D

brion added a comment.Jul 18 2014, 6:46 AM

Added support for iOS Safari and IE 9 in latest patch set. (IE 9 uses the Flash build of the decoder.)

Note TMH's JS doesn't load in MobileFrontend yet -- currently iOS playback is only in desktop view.

Some more remaining known issues outlined in the commit message on the patch set.

Change 165477 had a related patch set uploaded by Brion VIBBER:
Work in progress: ogv.js media player for Safari/IE (1 of 3)

https://gerrit.wikimedia.org/r/165477

Change 165478 had a related patch set uploaded by Brion VIBBER:
Work in progress: ogv.js media player for Safari/IE (2 of 3)

https://gerrit.wikimedia.org/r/165478

Change 165479 had a related patch set uploaded by Brion VIBBER:
Work in progress: ogv.js media player for Safari/IE (3 of 3)

https://gerrit.wikimedia.org/r/165479

Change 145756 abandoned by Brion VIBBER:
Work in progress: early testing of integration with ogv.js media player

Reason:
Split out into three changesets for easier review (and needs fixing for bitrot on mobile):

https://gerrit.wikimedia.org/r/145756

Gilles triaged this task as Medium priority.Nov 24 2014, 1:24 PM
Gilles added a subscriber: Gilles.
In T63823#675787, @Tgr wrote:

IIRC that can usually be solved by putting an invisible iframe on top of the plugin area. IE6 handles plugins and OS UI elements (like <select>) outside of the stacking order, but iframes are handled in some weird way that is both in and out of the stacking order so they can overlap plugins and they can be overlapped by normal elements with a higher z-index. (As long as you are careful to follow IE6's own interpretation of how z-indexing should work, which is horribly broken in an entirely different way.)

We don't support IE 6 or 7 for JavaScript features anymore. See https://lists.wikimedia.org/pipermail/wikitech-ambassadors/2014-August/000872.html and https://lists.wikimedia.org/pipermail/wikitech-ambassadors/2014-September/000926.html .

brion claimed this task.Jan 30 2015, 11:38 PM

Self-assigning until/unless someone in Multimedia team is ready to merge the patches. :) They need to be brought up to date and fixed again on MobileFrontend, I'll poke at it over the weekend.

Change 165477 had a related patch set uploaded (by Brion VIBBER):
Work in progress: ogv.js media player for Safari/IE (1 of 3)

https://gerrit.wikimedia.org/r/165477

Patch-For-Review

Change 165478 had a related patch set uploaded (by Brion VIBBER):
Work in progress: ogv.js media player for Safari/IE (2 of 3)

https://gerrit.wikimedia.org/r/165478

Patch-For-Review

Change 165479 had a related patch set uploaded (by Brion VIBBER):
Work in progress: ogv.js media player for Safari/IE (3 of 3)

https://gerrit.wikimedia.org/r/165479

Patch-For-Review

brion added a comment.Feb 5 2015, 12:49 PM

In latest patch versions I've dropped the all-Flash version of the player (was only used for IE 9) as it's gotten behind in features and there are things I can't easily fix in it.

Change 165479 abandoned by Brion VIBBER:
Work in progress: ogv.js media player for Safari/IE (3 of 3)

Reason:
This has bitrotted, needs to be reworked.

https://gerrit.wikimedia.org/r/165479

brion added a comment.Feb 5 2015, 12:59 PM

Ok I've dropped the mobile part for now as that needs to be reworked. Let me know if any issues remain with the desktop portion and let's try to merge that first!

Change 165477 merged by jenkins-bot:
ogv.js media player for desktop Safari/IE (1 of 2)

https://gerrit.wikimedia.org/r/165477

TheDJ moved this task from To sort to Doing on the TimedMediaHandler board.Mar 21 2015, 8:26 PM

Is this task the solution to the missing/invisible ogg (audio) file when I read https://en.wikipedia.org/w/index.php?title=Perry_DeAngelis&oldid=660113505#Skeptics.27_Guide_to_the_Universe_podcast in Safari? The caption is present, but there's no file there. I can see the file in Firefox.

Paladox set Security to None.May 19 2015, 5:07 PM
brion added a comment.Jun 11 2015, 4:41 AM

Is this task the solution to the missing/invisible ogg (audio) file when I read https://en.wikipedia.org/w/index.php?title=Perry_DeAngelis&oldid=660113505#Skeptics.27_Guide_to_the_Universe_podcast in Safari? The caption is present, but there's no file there. I can see the file in Firefox.

Should be yes; patch on T101716 will also help with older devices that have trouble with the JS shim.

Change 165478 merged by jenkins-bot:
ogv.js media player for desktop Safari/IE/Edge (2 of 2)

https://gerrit.wikimedia.org/r/165478

Restricted Application added subscribers: Matanya, Aklapper. · View Herald TranscriptAug 3 2015, 7:48 PM

Adding user-notice tag, as this is something worth noting. :) I do recommend a 'soft launch' before big flashy blog news, but tech news should be just fine.

greg added a subscriber: greg.Aug 4 2015, 6:19 PM
brion closed this task as Resolved.Aug 10 2015, 1:40 AM

Well let's resolve this eh. :D

Is the testing you did for Safari 7.x sufficient enough to cover Safari 8.x?

brion added a comment.Aug 12 2015, 6:45 PM

Is the testing you did for Safari 7.x sufficient enough to cover Safari 8.x?

I've tested the most on Safari 8.0.x (current release is 8.0.7 on Mac OS X 10.10.4).

TheDJ moved this task from Doing to Done on the TimedMediaHandler board.Oct 20 2015, 11:52 AM