Add ability to skip backwards when at the end of video playback

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);
 

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) {
         });
     }
 }
-

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 += '</video>';
 
+                html += '<img class="posterOverlay" />';
+
                 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);

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);