configurable seek offset

[seekingtheoptimal]

Hi, I see the DEFAULT_SEEK_OFFSET is a const set to 30, it would be quite easy to make this configurable with an attribute on the seek controls: media-seek-forward-button.js
I also see the note about

"currently don't support changing the seek value, so only need to set this once on initialization."

but this seems a low hanging fruit to pick. The only "problem" I see is the default icon where the current SVG contains the number 30, but this could also be fairly easily reworked to render it as text. If this is interesting for others also, I would gladly help implementing it.

[Progression]

I would definitely be interested in seeing the seek offset being configurable but also wonder if there is scope to extend it to being based on frames and/or seconds? Being able to seek 1 frame forward or backward would be great but I understand a more complicated issue with the way browser handle video.

[cjpillsbury]

@Progression

I would definitely be interested in seeing the seek offset being configurable but also wonder if there is scope to extend it to being based on frames and/or seconds?

Unfortunately frame-accurate seeking is a Hard Problem ™️, particularly in browsers. The best we could likely do in a reasonable implementation is use a frame rate + a frame count to get "fairly close" to a frame-level seek.

FYI Your ask isn't outlandish and has come up in discussions with standards folks and the teams responsible for media playback in various browsers, but there's currently not a reliable way to do this across browsers. Firefox has implemented an experimental method to seek specifically to the next frame if you are using it for dev purposes only: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seekToNextFrame

[heff]

Yeah, the only reason I didn't build it in by default was the apparent trickiness of creating an SVG + text button icon that could scale and be styled like other buttons. I think we encountered some of that with the captions "CC", so might be in a better place to handle that. Would definitely welcome a stab at it!

@Progression what's the specific use case? If you can consistently give the button the framerate of the video (e.g. 30fps), we can create an imperfect solution, that might be good enough.

[gkatsev]

For the seek icons, a potential solution is to have two SVGs: the default SVG with the offset, and an SVG with only an arrow and no offset. Then, if the default is used, the SVG with the text is used, otherwise, it uses the SVG without the offset.

[Progression]

I have hard a quick read around the subject of frame accurate seeking in browsers and it definitely seems far from trivial.

@heff My specific use case is that I am a sports coach and do a lot of video analyse of my clients and when reviewing it myself, or with my clients ,we always end up going through sections of the footage a frame at a time to find just the moment that matters. I'm now building an online coaching platform and want to be able to do this in the browser. So a "good enough" solution should work fine in this situation, it's not critical it's an actual frame that would be the same in a desktop video player or editor.

I'd love to submitting a PR myself but javascript isn't my strongest skill! But will to help in anyway I can.

[heff]

For the seek icons, a potential solution is to have two SVGs: the default SVG with the offset, and an SVG with only an arrow and no offset. Then, if the default is used, the SVG with the text is used, otherwise, it uses the SVG without the offset.

That's a decent idea. Looks like we could use a <text> inside the SVG and hope system fonts line up. That feels risky but maybe Arial is consistent enough.

I'm now building an online coaching platform and want to be able to do this in the browser.

Very cool! Yeah, I could see imperfection being ok there, compared to a video editing UI.

So for example, you can go to media-chrome.org, open the javascript console, and enter these lines of code.

let v = document.querySelector('video')
let forward = () => { v.currentTime += (1 / 30 ) }

Then enter forward() over and over. No worries if that's clear. I mostly just documenting it.

[cjpillsbury]

@seekingtheoptimal just in case you were planning on starting this effort, got a PR that should make it in soon #150