feat: Add played ranges tracking to iframe based media elements #199
Conversation
|
@ronalduQualabs is attempting to deploy a commit to the Mux Team on Vercel. A member of the Team first needs to authorize it. |
✅ Snyk checks have passed. No issues have been found so far.
💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse. |
|
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 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. |
|
@luwes It's ok if we close this one then in another issue migrate this logic into a mixin ? |
luwes
changed the title
ronalduQualabs
changed the title
| addPlayedRange(start: number, end: number): void; | ||
| readonly played: TimeRanges; |
There was a problem hiding this comment.
I think you should also add (onPlaybackStart, onSeeking, onSeeked, etc)
luwes
left a comment
luwes
left a comment
There was a problem hiding this comment.
I would start with only supporting Vimeo and YT.
It shouldn't require that many changes to the media elements themselves.
See this comment:
You might have to override the dispatchEvent method to execute code before the events are fired.
Try not to call any specialized methods from the mixin in the child class.
| this.api.on('pause', () => { | ||
| this.#paused = true; | ||
| this.dispatchEvent(new Event('pause')); | ||
| this.#paused = true; |
| this.api.on('ended', () => { | ||
| this.#paused = true; | ||
| this.dispatchEvent(new Event('ended')); | ||
| this.#paused = true; |
|
|
||
| this.api.on('timeupdate', ({ seconds }) => { | ||
| this.#currentTime = seconds; | ||
| const currentTime = Math.round(seconds * 100) / 100; |
| if (!playFired) { | ||
| playFired = true; | ||
| this.dispatchEvent(new Event('play')); | ||
| this.dispatchEvent(new Event('play')); |
3 participants
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