Merge a9bc68df29 into 7d84185d0e

src/components/htmlMediaHelper.js

@@ -336,9 +336,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);
 

src/controllers/playback/video/index.js

@@ -554,7 +554,6 @@ export default function (view) {
     }
 
     function onPlaybackStopped(e, state) {
-        currentRuntimeTicks = null;
         resetUpNextDialog();
         console.debug('nowplaying event: ' + e.type);
 
@@ -2070,4 +2069,3 @@ export default function (view) {
         });
     }
 }
-

src/plugins/htmlVideoPlayer/plugin.js

@@ -897,6 +897,7 @@ export class HtmlVideoPlayer {
              * @type {HTMLMediaElement}
              */
         const elem = e.target;
+        document.querySelector('.posterOverlay').style.display = 'inline';
         this.destroyCustomTrack(elem);
         onEndedInternal(this, elem, this.onError);
     };
@@ -927,6 +928,7 @@ export class HtmlVideoPlayer {
             timeMs += ((currentPlayOptions.transcodingOffsetTicks || 0) / 10000);
             this.updateSubtitleText(timeMs);
         }
+        document.querySelector('.posterOverlay').style.display = 'none';
 
         Events.trigger(this, 'timeupdate');
     };
@@ -990,6 +992,7 @@ export class HtmlVideoPlayer {
         if (!this.#started) {
             this.#started = true;
             elem.removeAttribute('controls');
+            document.querySelector('.posterOverlay').style.display = 'none';
 
             loading.hide();
 
@@ -1674,8 +1677,11 @@ export class HtmlVideoPlayer {
 
                 html += '</video>';
 
+                html += '<img class="posterOverlay" />';
+
                 playerDlg.innerHTML = html;
                 const videoElement = playerDlg.querySelector('video');
+                const posterElement = playerDlg.querySelector('img');
 
                 // TODO: Move volume control to PlaybackManager. Player should just be a wrapper that translates commands into API calls.
                 if (!appHost.supports('physicalvolumecontrol')) {
@@ -1692,7 +1698,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);

src/plugins/htmlVideoPlayer/style.scss

@@ -32,6 +32,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);