diff --git a/src/plugins/htmlVideoPlayer/plugin.js b/src/plugins/htmlVideoPlayer/plugin.js index 8902b9cf25..695829ca2b 100644 --- a/src/plugins/htmlVideoPlayer/plugin.js +++ b/src/plugins/htmlVideoPlayer/plugin.js @@ -245,6 +245,12 @@ function tryRemoveElement(elem) { * @type {any | null | undefined} */ #currentSecondaryTrackEvents; + /** + * Used to temporarily store the text track when + * force-clearing the `activeCue` for certain browsers + * @type {TextTrack | null | undefined} + */ + #currentTextTrack; /** * @type {string[] | undefined} */ @@ -624,8 +630,8 @@ function tryRemoveElement(elem) { * @private * These browsers will not clear the existing active cue when setting an offset * for native TextTracks. - * Any previous text tracks that are on the screen when the offset changes will - * remain next to the new tracks until they reach the new offset's instance of the track. + * Any previous text tracks that are on the screen when the offset changes will remain next + * to the new tracks until they reach the end time of the new offset's instance of the track. */ requiresHidingActiveCuesOnOffsetChange() { return !!browser.firefox; @@ -634,11 +640,30 @@ function tryRemoveElement(elem) { /** * @private */ - hideTextTrackActiveCues(currentTrack) { + hideTextTrackWithActiveCues(currentTrack) { if (currentTrack.activeCues) { - Array.from(currentTrack.activeCues).forEach((cue) => { - cue.text = ''; - }); + currentTrack.mode = 'hidden'; + } + } + + /** + * Forces the active cue to clear by disabling then re-enabling the track. + * The track mode is reverted inside of a 0ms timeout to free up the track + * and allow it to disable and clear the active cue. + * The track needs to be temporarily stored in order for us to access it + * inside the timeout. The stored value is reset after it is used. + * @private + */ + forceClearTextTrackActiveCues(currentTrack) { + if (currentTrack.activeCues) { + this.#currentTextTrack = currentTrack; + currentTrack.mode = 'disabled'; + setTimeout(() => { + if (this.#currentTextTrack) { + this.#currentTextTrack.mode = 'showing'; + this.#currentTextTrack = null; + } + }, 0); } } @@ -651,14 +676,21 @@ function tryRemoveElement(elem) { if (offsetValue === 0) { return; } - if (this.requiresHidingActiveCuesOnOffsetChange()) { - this.hideTextTrackActiveCues(currentTrack); + + const shouldClearActiveCues = this.requiresClearingActiveCuesOnOffsetChange(); + if (shouldClearActiveCues) { + this.hideTextTrackWithActiveCues(currentTrack); } + Array.from(currentTrack.cues) .forEach(function (cue) { cue.startTime -= offsetValue; cue.endTime -= offsetValue; }); + + if (shouldClearActiveCues) { + this.forceClearTextTrackActiveCues(currentTrack); + } } }