diff --git a/src/components/htmlMediaHelper.js b/src/components/htmlMediaHelper.js
index fa1b343caa..187b90f012 100644
--- a/src/components/htmlMediaHelper.js
+++ b/src/components/htmlMediaHelper.js
@@ -326,9 +326,6 @@ export function bindEventsToHlsPlayer(instance, hls, elem, onErrorFn, resolve, r
export function onEndedInternal(instance, elem, onErrorFn) {
elem.removeEventListener('error', onErrorFn);
- resetSrc(elem);
-
- destroyHlsPlayer(instance);
destroyFlvPlayer(instance);
destroyCastPlayer(instance);
diff --git a/src/controllers/playback/video/index.js b/src/controllers/playback/video/index.js
index fbe4c3cecb..3ac4c01159 100644
--- a/src/controllers/playback/video/index.js
+++ b/src/controllers/playback/video/index.js
@@ -551,7 +551,6 @@ export default function (view) {
}
function onPlaybackStopped(e, state) {
- currentRuntimeTicks = null;
resetUpNextDialog();
console.debug('nowplaying event: ' + e.type);
@@ -1969,4 +1968,3 @@ export default function (view) {
});
}
}
-
diff --git a/src/plugins/htmlVideoPlayer/plugin.js b/src/plugins/htmlVideoPlayer/plugin.js
index f26e89cc92..a4798b5259 100644
--- a/src/plugins/htmlVideoPlayer/plugin.js
+++ b/src/plugins/htmlVideoPlayer/plugin.js
@@ -885,6 +885,7 @@ export class HtmlVideoPlayer {
* @type {HTMLMediaElement}
*/
const elem = e.target;
+ document.querySelector('.posterOverlay').style.display = 'inline';
this.destroyCustomTrack(elem);
onEndedInternal(this, elem, this.onError);
};
@@ -915,6 +916,7 @@ export class HtmlVideoPlayer {
timeMs += ((currentPlayOptions.transcodingOffsetTicks || 0) / 10000);
this.updateSubtitleText(timeMs);
}
+ document.querySelector('.posterOverlay').style.display = 'none';
Events.trigger(this, 'timeupdate');
};
@@ -978,6 +980,7 @@ export class HtmlVideoPlayer {
if (!this.#started) {
this.#started = true;
elem.removeAttribute('controls');
+ document.querySelector('.posterOverlay').style.display = 'none';
loading.hide();
@@ -1596,8 +1599,11 @@ export class HtmlVideoPlayer {
html += '';
+ html += '
';
+
playerDlg.innerHTML = html;
const videoElement = playerDlg.querySelector('video');
+ const posterElement = playerDlg.querySelector('img');
videoElement.volume = getSavedVolume();
videoElement.addEventListener('timeupdate', this.onTimeUpdate);
@@ -1610,7 +1616,7 @@ export class HtmlVideoPlayer {
videoElement.addEventListener('dblclick', this.onDblClick);
videoElement.addEventListener('waiting', this.onWaiting);
if (options.backdropUrl) {
- videoElement.poster = options.backdropUrl;
+ posterElement.src = options.backdropUrl;
}
document.body.insertBefore(playerDlg, document.body.firstChild);
diff --git a/src/plugins/htmlVideoPlayer/style.scss b/src/plugins/htmlVideoPlayer/style.scss
index 0026146081..c4ef807c92 100644
--- a/src/plugins/htmlVideoPlayer/style.scss
+++ b/src/plugins/htmlVideoPlayer/style.scss
@@ -36,6 +36,16 @@ video[controls]::-webkit-media-controls {
height: 100%;
}
+.posterOverlay {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 100vw;
+ max-height: 100vh;
+ object-fit: contain;
+}
+
.htmlvideoplayer::cue {
background-color: transparent;
text-shadow: 0.14em 0.14em 0.14em rgba(0, 0, 0, 1);