Video issues on iOS

[rgaudin]

As for our other scrapers, our video handling is mostly:

• Download from source: either file or Youtube
• Reencode to webM using FFmpeg
• Use <video /> tag with appropriate attributes
• Use video.js player
• Use ogv.js with videojs-ogvjs plugin
• Configure video.js to use native (html5) engine when present then fallback to ogvjs.

On most of our target platforms, webM is natively supported and there is no issue.

Apple has been reluctant to supporting webM, leading to this usage of the ogvjs fallback for Safari on macOS and all browsers on iOS.

With macOS 11 (Big Sur), Apple introduced webM support, meaning that this workaround is only usefull on iOS (and outdated macOS Safari) now.

The way ogv.js works is that it create a <canvas /> element on which it draws every frame of the video (frames being decoded using a webm decoder in WebAssembly).

As it is not using a <video /> tag, the system is not aware of the browser playing a video, thus leading to many integration issues like fullscreen, picture-in-picture or global media shortcuts.

faire-du-désinfectant-pour-les-mains is a good example as it features all the different video usages of wikiHow.

On wikiHow, here are the symptoms we see:

• Videos don't autoplay. Steps videos are muted, loop videos, that serve as high quality GIFs. We thus added controls on top of those so user can play them.¹
• Sometime a step or summary video will not play correctly and just freeze after first or few frames… For some videos, it happens randomly (refresh and it may work), for others, it's always failing and might be due to encoding or decoding or something in between 😅.
• Videos show a black box before hitting play of playback is only a black frame. This seems to happen when there are a number of videos on the page and the browser can't get a GL context². This should be mostly gone after 49ad3d3 by using a poster on related videos (which are at end of page) and by requesting browsers to preload videos.

Footnotes

1. might be able to force autoplay by using videoJS API instead of relying on attributes. See this post ↩

2. There are too many active WebGL contexts on this page, the oldest context will be lost.. See this post ↩

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be now be reviewed manually. Thank you for your contributions.