HTML <media> elements keep playing after turning pages

[mickael-menu]

When turning an EPUB's pages with <media> elements playing, the playback is not interrupted. It keeps going until the page is destroyed which can take 2 additional page turns for FXL.

https://github.com/readium/r2-navigator-swift/blob/6654a5d266b121de9b1bd1f332cb5b860ce95f3b/r2-navigator-swift/EPUB/EPUBNavigatorViewController.swift#L60-L64

Two questions:

• Should we interrupt playback when navigating to another resource? (I think so)
• Should we interrupt playback in a single reflowable resource, when the element is out of screen? (I'm not so sure)

[mickael-menu]

A possible solution could be to send an event when a resource is not visible anymore and loop over all the media/audio/video elements to pause them (i.e. https://stackoverflow.com/questions/20362138/stop-all-html5-audio-video-with-javascript)

[mickael-menu]

On iOS 14.5+, WKWebView.pauseAllMediaPlayback() should be used.