Page MenuHomePhabricator

Add ogv.js shim to enable Safari support for OGG and WEBP videos (in quickview)
Closed, ResolvedPublic

Description

Safari cannot currently play OGG or WEBP format videos in the Quickview panel. The file information and thumbnail loads, but the video.js player fails with the message "No compatible source was found for this media."

Screen Shot 2021-01-21 at 11.43.13 AM.png (2×3 px, 3 MB)

If the user clicks through to the relevant File page, however (where the older player is still used), the video is now playable.

Screen Shot 2021-01-21 at 11.44.41 AM.png (2×3 px, 3 MB)

According to @brion, the new player may need to engage the ogv.js shim to handle these formats, which may involve re-arranging some RL modules.

This problem likely impacts all versions of both Desktop and Mobile Safari.

Developer notes

ReferenceError: fixedTimeID is not defined 
https://logstash.wikimedia.org/app/dashboards#/doc/logstash-*/logstash-2021.05.05?id=UvzUPXkBA6MeBtBq6sz9

Event Timeline

Assuming this is about SDAW-MediaSearch, hence adding that project tag so other people who don't know or don't care about team tags can also find this task when searching via projects. Please set appropriate project tags when possible. Thanks!

I just tried this in Safari 14 (the current version); the problem exists there as well.

  • MPG videos actually play fine, they just don't have a preview. So I think that problem is just an example of T271388.
  • WebM and OGG videos have thumbnails, but the quickview player fails with a message about "No compatible source was found for this media". The embedded player on the original File pages (the older one) works fine.
egardner renamed this task from MediaSearch - Quickview video does not work in Safari 13&12 to Add ogv.js shim to enable Safari support for OGG and WEBP videos (in quickview).Jan 21 2021, 7:44 PM
egardner updated the task description. (Show Details)
egardner added a subscriber: brion.

@MarkTraceur, @dr0ptp4kt, and I chatted today about trying to unblock this task. I'm going to spend some time on a spike to see if I can apply the OGVJS shim to the "beta" VideoJs player that we are using in order to support OGG/WEBP playback in Desktop Safari in the same manner that we're currently doing for the legacy video player used on Commons File pages.

If possible, I'll submit the patch in TMH directly so that other consumers of the beta player benefit from the improved browser support. If that proves too complicated, I'll see if I can apply a fix *just* to Special:MediaSearch.

Either way, I may need to lean on @Jdforrester-WMF or @brion for some code review support.

I'll come back here with an update in the next week or so after I've had a little time to dig into this problem.

Ok, success! I'll upload a patch shortly. For posterity, the problem was that some extra configuration is needed to get the modules for videojs and ogvjs working together. The complete player initialization code looks like this:

mw.loader
	// The "videojs-ogvjs" module needs to be used
	.using( 'ext.tmh.videojs-ogvjs' )
	// Then you can conditionally load ogvjs if necessary
	.then( function () { return mw.OgvJsSupport.loadIfNeeded(); } )
	.then( function () {
		this.player = window.videojs(
			this.$refs.videoPlayer,
			$.extend( {}, this.options, {
				ogvjs: {
					// Finally, the OgvJsSupport module needs to point the client to the proper codecs, etc.
					base: mw.OgvJsSupport.basePath()
				}
			} ),
			function onPlayerReady() {}
		);

		this.player.on( 'play', this.onPlay );
	}.bind( this ) );

This enables OGG and WebM playback in Safari and other unsupported browsers. Thanks @brion for your help troubleshooting!

woohoo!

We can provide a simplified API for reusing this later, but now we have the secret keys unlocked. ;)

Change 685939 had a related patch set uploaded (by Eric Gardner; author: Eric Gardner):

[mediawiki/extensions/MediaSearch@master] Use ogvjs with videojs for cross-platform playback support

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

Change 685939 merged by jenkins-bot:

[mediawiki/extensions/MediaSearch@master] Use ogvjs with videojs for cross-platform playback support

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

This will need some testing in production (or Beta) once the new MediaSearch extension is enabled and publicly visible (may not happen for another week or two).

I think that Desktop Safari video playback will work fine going forward, but mobile safari and some android browsers may continue to have trouble because OGV.js relies on WASM modules to do some of the transcoding, and I'm not sure what the support of this technology looks like on mobile. Historically mobile video has been tricky to get working in our projects. Still, even desktop Safari support is better than what we had previously.

If mobile support is still not possible I'd recommend starting a new dedicated task just for that problem and closing this one, since some additional measures may be needed for mobile devices.

Current status on Beta commons:

Using this test search, I can confirm that Desktop Safari (v 14.0.3 on Big Sur) is able to successfully play both OGG and WEBM video formats.

Unfortunately attempting to play the same videos on Mobile Safari on iOS still fails. The problem here goes beyond MediaSearch however; the videos on the regular File pages also fail to play in the case of Mobile Safari. Really getting cross-platform mobile video playback working on our projects is going to take a more concerted effort (and is outside the scope of the MediaSearch project I think). However if a general fix for this problem is found, we should file a task here to make any necessary configuration changes, etc.

I believe that this particular task can be closed at this point.

Updated some docs on https://www.mediawiki.org/wiki/Extension:TimedMediaHandler/VideoJS_Player#Usage so that others can more easily integrate Video.js and Ogv.js the same way.

Etonkovidova claimed this task.

Current status on Beta commons:

Using this test search, I can confirm that Desktop Safari (v 14.0.3 on Big Sur) is able to successfully play both OGG and WEBM video formats.

Unfortunately attempting to play the same videos on Mobile Safari on iOS still fails. The problem here goes beyond MediaSearch however; the videos on the regular File pages also fail to play in the case of Mobile Safari. Really getting cross-platform mobile video playback working on our projects is going to take a more concerted effort (and is outside the scope of the MediaSearch project I think). However if a general fix for this problem is found, we should file a task here to make any necessary configuration changes, etc.

I believe that this particular task can be closed at this point.

Checked on commons wmf.5 with https://commons.wikimedia.org/w/index.php?search=desert&title=Special:NewMediaSearch&go=Go&type=video. All works as expected.

Mobile - Safari, iPhone 6s (iOS 13) - works too in production and in betalabs.

Ideally, it'd be great to check on android and other real mobile devices; I checked in browser emulators and all look fine too. Actually there were some tiny hiccups to start playing, but nothing significant enough to report. @egardner - can you re-check if videos are playing on your device?