Allow Media Formatter *Audio/Video to use external/stylize able HTML driven Control UI #534
Description
What?
Related to #452 but with more features
Fact: Browser styled HTML Video/Audio players vary a lot and are hard to read and very hard to override via CSS.
We want to allow users to provide their own HTML driven Controls for Media. The idea is to provide a basic example, and simple configuration settings at the formatter level, maybe even a IIIF Manifest parser option in case multiple Audio/Video media and subtitles need to be displayed in a single ADO landing page.
I will auto-connect via vanilla JS/cross browser matching HTML class elements to functionality. e.g .sbf-media-control .stopButton if found will trigger stop, but if not found there is no stop...
Etc. The idea is to cover all the most important key elements of Media UI interaction.
This also includes Wavesurfer JS, which was suggested by a community user (used by Soundcloud)
Settings I have planned are
- Allow external HTML based Media Controls (with link to the example in the DOCS). Note if the user checks it, but provides none, we will default to the browser controls because accessibility is key
- Custom DOM selector to be used to "find" the control in the HTML page. If none provided
.sbf-media-controlwill be used as selector - Render the Control over the Audio/Video
- Render the Control under the Audio/Video
- Don't move. Leave where it is rendered initially (e.g where the twig template is being displayed)
- Enabled Wavesurfer