Bug: .srt captions obscured by video controls bar

[MarkLyck]

Is there an existing issue for this?

• I have searched the existing issues

Which Mux Elements/Packages does this apply to? Select all that apply

mux-video

Which browsers are you using?

Chrome, Safari, Firefox

Which operating systems are you using?

macOS

Description

If you upload a video to mux with a .srt subtitle file, and use element from the @mux/mux-video package.

Then the captions do not move up to the visible area when the media controls bar becomes visible (e.g. when hovering over the video).

This leaves the captions obscured and not visible to the user. It is my understanding from reading this blog post, that this has been fixed for .vtt files, but a fix should be implemented for .srt files as well.

Reduced test case

No response

Steps to reproduce

1. Upload a video to mux
2. Add a .srt subtitle file
3. Play the video with element.
4. hover over the video to make media controls appear.
5. turn on captions (see that captions appear underneath the video controls bar)

Current Behavior

the captions are always positioned at the bottom of the video, even when the video controls bar appear over the captions

Expected Behavior

The captions should move up to the visible area when the video controls are visible.

Errors

No response

What version of the package are you using?

0.24.2

[luwes]

thanks for the feedback @MarkLyck.

this is unrelated to .srt vs .vtt I believe. the @mux/mux-video package doesn't provide any logic to move the subtitles automatically.

it's fairly easy to implement for Chrome and Safari but Firefox not so much.

see here for an example with media-chrome:

elements/packages/mux-player/src/themes/gerwig/gerwig.html

Lines 67 to 90 in 2fbb2c1

	/*
	* 0.433s is the transition duration for VTT Regions.
	* Borrowed here, so the captions don't move too fast.
	*/
	media-controller {
	--media-webkit-text-track-transform: translateY(0) scale(0.98);
	--media-webkit-text-track-transition: transform 0.433s ease-out 0.3s;
	}
	media-controller:is([mediapaused], :not([userinactive])) {
	--media-webkit-text-track-transform: translateY(-50px) scale(0.98);
	--media-webkit-text-track-transition: transform 0.15s ease;
	}
	/*
	* CSS specific to iOS devices.
	* See: https://stackoverflow.com/questions/30102792/css-media-query-to-target-only-ios-devices/60220757#60220757
	*/
	@supports (-webkit-touch-callout: none) {
	/* Disable subtitle adjusting for iOS Safari */
	media-controller[mediaisfullscreen] {
	--media-webkit-text-track-transform: unset;
	--media-webkit-text-track-transition: unset;
	}
	}

    /*
     * 0.433s is the transition duration for VTT Regions.
     * Borrowed here, so the captions don't move too fast.
     */
    media-controller {
      --media-webkit-text-track-transform: translateY(0) scale(0.98);
      --media-webkit-text-track-transition: transform 0.433s ease-out 0.3s;
    }
    media-controller:is([mediapaused], :not([userinactive])) {
      --media-webkit-text-track-transform: translateY(-50px) scale(0.98);
      --media-webkit-text-track-transition: transform 0.15s ease;
    }

    /*
     * CSS specific to iOS devices.
     * See: https://stackoverflow.com/questions/30102792/css-media-query-to-target-only-ios-devices/60220757#60220757
     */
    @supports (-webkit-touch-callout: none) {
      /* Disable subtitle adjusting for iOS Safari */
      media-controller[mediaisfullscreen] {
        --media-webkit-text-track-transform: unset;
        --media-webkit-text-track-transition: unset;
      }
    }