feat: Add played ranges tracking to iframe based media elements

[ronalduQualabs]

This PR resolves 12 also resolves 205 adds tracking of played ranges to the iframe based media elements. Played time ranges are merged if they overlap, and seeking is properly taken into account, providing an accurate representation of which parts of the video have been played.

Add this ability to:

Youtube
Vimeo
Twitch
TikTok
Spotify Audio

[vercel]

@ronalduQualabs is attempting to deploy a commit to the Mux Team on Vercel.

A member of the Team first needs to authorize it.

[snyk-io]

✅ Snyk checks have passed. No issues have been found so far.

Status	Scanner	Critical	High	Medium	Low	Total (0)
✅	Open Source Security	0	0	0	0	0 issues
✅	Licenses	0	0	0	0	0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

[luwes]

This looks good. There is an indenting and line space issue.

I think it would be good to make this a mixin utility like @heff pointed out so it could be used for other iframe video elements.

Something like
https://justinfagnani.com/2015/12/21/real-mixins-with-javascript-classes/

let MyMixin = (superclass) => class extends superclass {
  foo() {
    console.log('foo from MyMixin');
  }
};

You might have to override the dispatchEvent method to execute code before the events are fired.
Don't use Vimeo's API in this mixin but use the HTMLVideoElement API so the util can be shared with the others.

[ronalduQualabs]

@luwes It's ok if we close this one then in another issue migrate this logic into a mixin ?

[spuppo-mux]

I think you should also add (onPlaybackStart, onSeeking, onSeeked, etc)