j1-template 2024.3.23 → 2024.3.24

data/assets/theme/j1/modules/lightGallery/js/plugins/lg-video.js

@@ -216,7 +216,272 @@
         }
       });
 
-    } // END loadVtt
+    }; // END loadVtt
+
+
+    // jadams
+    // -------------------------------------------------------------------------
+    // vjsProcessExtendedButtonsAndPlugins
+    // Loads a given WEBVTT file (from data path) and process loaded
+    // data in callback cb (function)
+    // -------------------------------------------------------------------------
+    var vjsProcessExtendedButtonsAndPlugins = function (vjsObject, videojsPlayer, videoInfo) {
+        const vjsOptions = j1.modules.videojs.options;
+        var videoInfo, videoStart, videojsPlayer,
+            playbackRates, hotKeysPlugin, skipButtonsPlugin, zoomPlugin;
+
+        var videoData = {
+            tracks: false
+        };
+
+        var playbackRatesDefaults = vjsOptions.playbackRates.values;
+        var chapterTracksEnabled  = false;
+
+        var hotKeysPluginDefaults    = {
+            volumeStep:                 vjsOptions.plugins.hotKeys.volumeStep,
+            seekStep:                   vjsOptions.plugins.hotKeys.seekStep,
+            enableMute:                 vjsOptions.plugins.hotKeys.enableMute,
+            enableVolumeScroll:         vjsOptions.plugins.hotKeys.enableVolumeScroll,
+            enableHoverScroll:          vjsOptions.plugins.hotKeys.enableHoverScroll,
+            enableFullscreen:           vjsOptions.plugins.hotKeys.enableFullscreen,
+            enableNumbers:              vjsOptions.plugins.hotKeys.enableNumbers,
+            enableJogStyle:             vjsOptions.plugins.hotKeys.enableJogStyle,
+            alwaysCaptureHotkeys:       vjsOptions.plugins.hotKeys.alwaysCaptureHotkeys,
+            captureDocumentHotkeys:     vjsOptions.plugins.hotKeys.captureDocumentHotkeys,
+            enableModifiersForNumbers:  vjsOptions.plugins.hotKeys.enableModifiersForNumbers,
+            enableInactiveFocus:        vjsOptions.plugins.hotKeys.enableInactiveFocus,
+            skipInitialFocus:           vjsOptions.plugins.hotKeys.skipInitialFocus
+        };
+
+        var skipButtonsPluginDefaults  = {
+            backward:                     vjsOptions.plugins.skipButtons.backward,
+            forward:                      vjsOptions.plugins.skipButtons.forward,
+            backwardIndex:                0,
+            forwardIndex:                 1
+        };
+
+        var zoomPluginDefaults = {
+            moveX:                      vjsOptions.plugins.zoomButtons.moveX,
+            moveY:                      vjsOptions.plugins.zoomButtons.moveY,
+            rotate:                     vjsOptions.plugins.zoomButtons.rotate,
+            zoom:                       vjsOptions.plugins.zoomButtons.zoom
+        };
+
+        //  jadams, 2025-06-11: added customControlContainer
+        // ---------------------------------------------------------------------
+        var vjsPlayerControlBar = videojsPlayer.controlBar;
+
+        // create customControlContainer for progressControlSilder|time (display) elements
+        const customProgressContainer = vjsPlayerControlBar.addChild('Component', {
+            el: videojs.dom.createEl('div', {
+                className: 'vjs-theme-uno custom-progressbar-container'
+            })
+        });
+
+        // move progressControlSlider into customControlContainer
+        const progressControlSlider = vjsPlayerControlBar.progressControl;
+        if (progressControlSlider) {
+            customProgressContainer.el().appendChild(progressControlSlider.el());
+        }
+
+        // move currentTimeDisplay BEFORE the progressControlSilder
+        const currentTimeDisplay = vjsPlayerControlBar.currentTimeDisplay;
+        if (currentTimeDisplay) {
+            customProgressContainer.el().insertBefore(currentTimeDisplay.el(), progressControlSlider.el());
+        }
+
+        // move the durationDisplay AFTER the progressControlSilder
+        const durationDisplay = vjsPlayerControlBar.durationDisplay;
+        if (durationDisplay) {
+            customProgressContainer.el().appendChild(durationDisplay.el());
+        }
+
+        // configure VideoJS (extended) Plugins
+        // ---------------------------------------------------------------------
+        hotKeysPlugin     = (vjsObject.settings.videojsOptions.hotKeysPlugin !== undefined) ? vjsObject.settings.videojsOptions.hotKeysPlugin : hotKeysPluginDefaults;
+        skipButtonsPlugin = (vjsObject.settings.videojsOptions.controlBar.skipButtonsPlugin !== undefined) ? vjsObject.settings.videojsOptions.controlBar.skipButtonsPlugin : skipButtonsPluginDefaults;
+        zoomPlugin        = (vjsObject.settings.videojsOptions.controlBar.zoomPlugin !== undefined) ? vjsObject.settings.videojsOptions.controlBar.zoomPlugin : false;
+        playbackRates     = (vjsObject.settings.videojsOptions.controlBar.playbackRates !== undefined) ? vjsObject.settings.videojsOptions.controlBar.playbackRates : playbackRatesDefaults;
+
+        //  jadams, 2024-01-22: added video start position
+        // ---------------------------------------------------------------------
+        if (vjsObject.settings.videojsOptions.videoStart !== undefined) {
+            videoStart = vjsObject.settings.videojsOptions.videoStart[index];
+                videojsPlayer.on("play", function() {
+                var startFromSecond = new Date('1970-01-01T' + videoStart + 'Z').getTime() / 1000;
+                videojsPlayer.currentTime(startFromSecond);
+            }); // END on event play
+        } // END if videoStart
+
+        // add playbackRates, only available for VideoJS
+        // ---------------------------------------------------------------------
+        if (videojsPlayer.playbackRates !== undefined) {
+            videojsPlayer.playbackRates(playbackRates);
+        }
+
+        // add hotkeys Plugin, only available for VideoJS
+        // ---------------------------------------------------------------------
+        if (hotKeysPlugin !== undefined && hotKeysPlugin.enabled && videojsPlayer.hotKeys !== undefined) {
+
+            // merge objects
+            hotKeysPlugin.options = __assign(__assign({}, hotKeysPluginDefaults), hotKeysPlugin.options);
+
+            // prevent multiple plugin instances
+            var hotKeysActive = false;
+            if (videojsPlayer.activePlugins_ !== undefined && videojsPlayer.activePlugins_.hotKeys !== undefined) {
+                hotKeysActive = videojsPlayer.activePlugins_.hotKeys;
+            }
+
+            if (!hotKeysActive) {
+                videojsPlayer.hotKeys({
+                    volumeStep:                         hotKeysPlugin.options.volumeStep,
+                    seekStep:                           hotKeysPlugin.options.seekStep,
+                    enableMute:                         hotKeysPlugin.options.enableMute,
+                    enableFullscreen:                   hotKeysPlugin.options.enableFullscreen,
+                    enableNumbers:                      hotKeysPlugin.options.enableNumbers,
+                    enableVolumeScroll:                 hotKeysPlugin.options.enableVolumeScroll,
+                    enableHoverScroll:                  hotKeysPlugin.options.enableHoverScroll,
+                    alwaysCaptureHotkeys:               hotKeysPlugin.options.alwaysCaptureHotkeys,
+                    captureDocumentHotkeys:             hotKeysPlugin.options.captureDocumentHotkeys,
+                    documentHotkeysFocusElementFilter:  hotKeysPlugin.options.documentHotkeysFocusElementFilter,
+
+                    // Mimic VLC seek behavior (default to: 15)
+                    seekStep: function(e) {
+                        if (e.ctrlKey && e.altKey) {
+                            return 5*60;
+                        } else if (e.ctrlKey) {
+                            return 60;
+                        } else if (e.altKey) {
+                            return 10;
+                        } else {
+                            return 15;
+                        }
+                    }
+
+                });
+            } // END if hotKeysActive
+
+        } // END if hotKeysPlugin enabled
+
+        // add skipButtons Plugin, only available for VideoJS
+        // ---------------------------------------------------------------------
+        if (skipButtonsPlugin !== undefined && skipButtonsPlugin.enabled && videojsPlayer.skipButtons !== undefined) {
+            // merge objects
+            skipButtonsPlugin.options = __assign(__assign({}, skipButtonsPluginDefaults), skipButtonsPlugin.options);
+
+            // prevent multiple plugin instances
+            var skipButtonsActive = false;
+            if (videojsPlayer.activePlugins_ !== undefined && videojsPlayer.activePlugins_.skipButtons !== undefined) {
+                skipButtonsActive = videojsPlayer.activePlugins_.skipButtons;
+            }
+
+            if (!skipButtonsActive) {
+                videojsPlayer.skipButtons({
+                    backward:         skipButtonsPlugin.options.backward,
+                    forward:          skipButtonsPlugin.options.forward,
+                    backwardIndex:    skipButtonsPlugin.options.backwardIndex,
+                    forwardIndex:     skipButtonsPlugin.options.forwardIndex
+                });
+            }
+
+        } // END if skipButtons Plugin enabled
+
+        // add zoom Plugin (only available for VJS|local video/mp4)
+        // ---------------------------------------------------------------------
+        if (videoInfo.youtube) {
+            // zoom pluging NOT supported for YouTube
+            zoomPlugin.enabled = false;
+        }
+
+        if (zoomPlugin !== undefined && zoomPlugin.enabled && videojsPlayer.zoomButtons !== undefined) {
+            // merge objects
+            zoomPlugin.options = __assign(__assign({}, zoomPluginDefaults), zoomPlugin.options);
+
+            // prevent multiple plugin instances
+            var zoomButtonsActive = false;
+            if (videojsPlayer.activePlugins_ !== undefined && videojsPlayer.activePlugins_.zoomButtons !== undefined) {
+                zoomButtonsActive  = videojsPlayer.activePlugins_.zoomButtons;
+            }
+            
+            if (!zoomButtonsActive) {
+                videojsPlayer.zoomButtons({
+                    moveX:  zoomPlugin.options.moveX,
+                    moveY:  zoomPlugin.options.moveY,
+                    rotate: zoomPlugin.options.rotate,
+                    zoom:   zoomPlugin.options.zoom
+                });
+            }
+
+        } // END if zoom Plugin enabled
+
+        // chapter track processing, only available for VideoJS
+        // ---------------------------------------------------------------------
+        if (vjsObject.core.galleryItems[vjsObject.core.index].video !== undefined) {
+            videoData = JSON.parse(vjsObject.core.galleryItems[vjsObject.core.index].video);
+        }
+
+        // chapter tracks only available for VideoJS (local video/mp4)
+        // ---------------------------------------------------------------------
+        if (videoData.tracks && videoData.tracks.length > 0) {
+            for (var i=0; i<videoData.tracks.length; i++) {
+                if (videoData.tracks[i].kind == 'chapters') {
+                    trackSrc = videoData.tracks[i].src;
+                    chapterTracksEnabled = true;
+                }
+            }
+        } // END if videoData tracks
+
+        if (chapterTracksEnabled) {
+            var parser  = new WebVTTParser();
+            var markers = [];
+
+            function cb_load (data /* ,textStatus, jqXHR */ ) {
+                var tree = parser.parse(data, 'metadata');
+                var marker;
+
+                // add chapter tracks to markers array
+                for (var i=0; i<tree.cues.length; i++) {
+                    marker = { time: tree.cues[i].startTime, label: tree.cues[i].text };
+                    markers.push(marker);
+                }
+            }; // END function cb_load 
+
+            // load chapter tracks
+            // -----------------------------------------------------------------
+            loadVtt(trackSrc, cb_load);
+
+            // add chapter tracks on play
+            videojsPlayer.on("play", function() {
+                videojsPlayer.currentTime(videoStart);
+
+                var total    = videojsPlayer.duration();
+                var timeline = $(videojsPlayer.controlBar.progressControl.children_[0].el_);
+
+                // add chapter tracks on timeline (delayed)
+                setTimeout (function() {
+                    var markers_loaded = setInterval (function () {
+                        if (markers.length) {
+                            for (var i=0; i<markers.length; i++) {
+                                var left = (markers[i].time / total * 100) + '%';
+                                var time = markers[i].time;
+                                var el   = $('<div class="vjs-chapter-marker" style="left: ' +left+ '" data-time="' +time+ '"> <span>' +markers[i].label+ '</span></div>');
+
+                                el.click(function() {
+                                    videojsPlayer.currentTime($(this).data('time'));
+                                });
+
+                                timeline.append(el);
+                            }
+                            clearInterval(markers_loaded);
+                        }
+                    }, 10); // END markers_loaded
+                }, 1000 ); // END setTimeout
+
+            }); // END on "play"
+
+        } // END if chapterTracksEnabled
+
+    }; // END vjsProcessExtendedButtonsAndPlugins
 
     /**
      * Video module for lightGallery
@@ -304,7 +569,7 @@
             var _a = event.detail, index = _a.index, src = _a.src, html5Video = _a.html5Video, hasPoster = _a.hasPoster;
             if (!hasPoster) {
                 // All functions are called separately if poster exist in loadVideoOnPosterClick function
-                this.appendVideos(this.core.getSlideItem(index), {
+                this.appendVideo(this.core.getSlideItem(index), {
                     src: src,
                     addClass: 'lg-object',
                     index: index,
@@ -378,58 +643,56 @@
 
         // jadams
         Video.prototype.getVideoHtml = function (src, addClass, index, html5Video) {
-            var video = '';
-            var videoInfo = this.core.galleryItems[index]
-                .__slideVideoInfo || {};
-            var currentGalleryItem = this.core.galleryItems[index];
-            var videoTitle = currentGalleryItem.title || currentGalleryItem.alt;
-            videoTitle = videoTitle ? 'title="' + videoTitle + '"' : '';
-            var commonIframeProps = "allowtransparency=\"true\"\n            frameborder=\"0\"\n            scrolling=\"no\"\n            allowfullscreen\n            mozallowfullscreen\n            webkitallowfullscreen\n            oallowfullscreen\n            msallowfullscreen";
-            
+          var currentGalleryHtml, currentGalleryItem, videoInfo,
+              videoTitle, video, video_api, commonIframeProps;
+
+          videoInfo                  = this.core.galleryItems[index].__slideVideoInfo || {};
+          currentGalleryItem         = this.core.galleryItems[index];
+
+          if (currentGalleryItem.subHtml.includes('<h2>')) {
+            currentGalleryHtml       = currentGalleryItem.subHtml.split("</h2>");
+            videoTitle               = currentGalleryHtml[0].replace('<h2>','');  
+          } else if (currentGalleryItem.subHtml.includes('<h5>')) {
+            // for backward compatibility reasons
+            currentGalleryHtml       = currentGalleryItem.subHtml.split("</h5>");
+            videoTitle               = currentGalleryHtml[0].replace('<h5>','');            
+          } 
+
+          videoTitle                 = videoTitle ? 'title="' + videoTitle + '"' : '';
+          commonIframeProps          = "allowtransparency=\"true\"\n            frameborder=\"0\"\n            scrolling=\"no\"\n            allowfullscreen\n            mozallowfullscreen\n            webkitallowfullscreen\n            oallowfullscreen\n            msallowfullscreen";
+
           if (videoInfo.youtube) {
-            var videoId = 'lg-youtube' + index;
-            var youTubeParams = getYouTubeParams(videoInfo, this.settings.youTubePlayerParams);
+            var videoId              = 'lg-youtube' + index;
+            var youTubeParams        = getYouTubeParams(videoInfo, this.settings.youTubePlayerParams);
             var isYouTubeNoCookieURL = isYouTubeNoCookie(src);
-            var youtubeURL = isYouTubeNoCookieURL
-                ? '//www.youtube-nocookie.com/'
-                : '//www.youtube.com/';
-
-            // var video = `
-            //   <video
-            //     id="${videoId}"
-            //   	class="lg-video-object lg-youtube vjs-theme-uno video-js">
-            //     data-setup='{
-            //       "fluid" : true,
-            //       "techOrder": [
-            //     	"youtube", "html5"
-            //     ],
-            //     "sources": [{
-            //     	"type": "video/youtube",
-            //     	"src": "//youtube.com/watch?v=nV8UZJNBY6"
-            //     }],
-            //     "controlBar": {
-            //     	"pictureInPictureToggle": false,
-            //     	"volumePanel": {
-            //     	  "inline": false
-            //   	   }
-            //     }
-            //   }'>
-            //   	Your browser does not support HTML5 video
-            //   </video>
-            // `;
-
-            var video_new = `
+            var youtubeURL           = isYouTubeNoCookieURL ? '//youtube-nocookie.com/' : '//youtube.com/';
+            var ytVideoID            = videoInfo.youtube[1];
+
+            var video_iframe = `
               <iframe
                 id="${videoId}"
                 class="lg-video-object lg-youtube ${addClass}"
-                allow="autoplay"
-                title="${videoTitle}""
-                src="${youtubeURL}/embed${videoInfo.youtube[1]}${youTubeParams}"
+                src="${youtubeURL}/embed/${ytVideoID}${youTubeParams}"
                 ${commonIframeProps}>
               </iframe>
             `;
 
-            video = "<iframe allow=\"autoplay\" id=" + videoId + " class=\"lg-video-object lg-youtube " + addClass + "\" " + videoTitle + " src=\"" + youtubeURL + "embed/" + (videoInfo.youtube[1] + youTubeParams) + "\" " + commonIframeProps + "></iframe>";
+            var video_vjs = `
+              <video
+                id="${videoId}"
+                class="video-js lg-video-object lg-youtube vjs-theme-uno">
+                <source
+                  type="video/youtube",
+                  src="//youtube.com/watch?v=${ytVideoID}"
+                >
+
+                Your browser does not support HTML5 video.
+              </video>
+            `;
+
+            video_api = 'youtube';
+            video     = (video_api === 'iframe') ? video_iframe : video_vjs;
+            // END videoInfo youtube
           } else if (videoInfo.vimeo) {
             var videoId = 'lg-vimeo' + index;
             var playerParams = getVimeoURLParams(this.settings.vimeoPlayerParams, videoInfo);
@@ -497,26 +760,67 @@
          * @param {HTMLElement} el - slide element
          * @param {Object} videoParams - Video parameters, Contains src, class, index, htmlVideo
          */
-        Video.prototype.appendVideos = function (el, videoParams) {
-            var _a;
-            var videoHtml = this.getVideoHtml(videoParams.src, videoParams.addClass, videoParams.index, videoParams.html5Video);
+        Video.prototype.appendVideo = function (el, videoParams) {
+            var vjsPlayer;
+            var _a             = {};
+            var videojsEnabled = false;
+            var videoHtml      = this.getVideoHtml(videoParams.src, videoParams.addClass, videoParams.index, videoParams.html5Video);
+
             el.find('.lg-video-cont').append(videoHtml);
             var $videoElement = el.find('.lg-video-object').first();
+
+            // check the HTML Element for the active player (failsafe)
+            // if NOT available, something went totally wrong
+            if (!$videoElement.get()) {
+                return;
+            }
+
             if (videoParams.html5Video) {
                 $videoElement.on('mousedown.lg.video', function (e) {
                     e.stopPropagation();
                 });
             }
-            if (this.settings.videojs && ((_a = this.core.galleryItems[videoParams.index].__slideVideoInfo) === null || _a === void 0 ? void 0 : _a.html5)) {
+
+            _a                 = this.core.galleryItems[videoParams.index].__slideVideoInfo;
+            _a.videojs         = { enabled: false };
+            videojsEnabled     = videoHtml.includes('iframe');
+            _a.videojs.enabled = (videojsEnabled) ? false : true;
+
+            // jadams, 2025-06-13: process html5
+            if (this.settings.videojs && (_a === null || _a === void 0 ? void 0 : _a.html5)) {
                 try {
-                    return videojs($videoElement.get(), this.settings.videojsOptions);
+                    if (_a.videojs.enabled) {
+                        vjsPlayer               = videojs($videoElement.get(), this.settings.videojsOptions);
+                        this.settings.vjsPlayer = vjsPlayer;
+                        _a.videojs.player       = vjsPlayer;
+
+                        return vjsPlayer;
+                    }
                 }
                 catch (e) {
                     // jadams:
                     console.warn('lightGallery: Make sure you have included //github.com/vimeo/player.js');
                 }
             }
-        };
+
+            // jadams, 2025-06-13: process youtube
+            if (this.settings.videojs && (_a  === null || _a === void 0 ? void 0 : _a.youtube)) {
+                try {
+                    if (_a.videojs.enabled) {
+                        vjsPlayer           = videojs($videoElement.get(), this.settings.videojsOptions);
+                        this.settings.vjsPlayer = vjsPlayer;
+                        _a.videojs.player       = vjsPlayer;
+
+                        return vjsPlayer;
+                    }
+                }
+                    catch (e) {
+                    // jadams:
+                    console.warn('lightGallery: Make sure you have included //github.com/vimeo/player.js');
+                }
+            }
+
+        }; // END appendVideo
 
         // jadams
         Video.prototype.gotoNextSlideOnVideoEnd = function (src, index) {
@@ -525,6 +829,13 @@
                 .getSlideItem(index)
                 .find('.lg-video-object')
                 .first();
+
+            // try to get HTML Element for the active player (failsafe)
+            // if NOT available, something went totally wrong
+            if (!$videoElement.get()) {
+                return;
+            }
+
             var videoInfo = this.core.galleryItems[index].__slideVideoInfo || {};
             if (this.settings.gotoNextSlideOnVideoEnd) {
                 if (videoInfo.html5) {
@@ -565,263 +876,53 @@
             }
         };
 
-        // jadams
+        // jadams: 2025-06-11: Add (extended) VideoJS control elements
+        // for HTML5 video over VJS (to be extended for e.g.YouTube)
+        // ---------------------------------------------------------------------
         Video.prototype.controlVideo = function (index, action) {
-            const vjsOptions = j1.modules.videojs.options;
-            var trackSrc,
-                $videoElement, videoInfo, videoStart, videoData, videoId,
-                videojsPlayer, playbackRates,
-                hotKeysPlugin, skipButtonsPlugin, zoomPlugin;
-
-            var playbackRatesDefaults = vjsOptions.playbackRates.values;
-            var chapterTracksEnabled  = false;
-
-            var hotKeysPluginDefaults    = {
-                volumeStep:                 vjsOptions.plugins.hotKeys.volumeStep,
-                seekStep:                   vjsOptions.plugins.hotKeys.seekStep,
-                enableMute:                 vjsOptions.plugins.hotKeys.enableMute,
-                enableVolumeScroll:         vjsOptions.plugins.hotKeys.enableVolumeScroll,
-                enableHoverScroll:          vjsOptions.plugins.hotKeys.enableHoverScroll,
-                enableFullscreen:           vjsOptions.plugins.hotKeys.enableFullscreen,
-                enableNumbers:              vjsOptions.plugins.hotKeys.enableNumbers,
-                enableJogStyle:             vjsOptions.plugins.hotKeys.enableJogStyle,
-                alwaysCaptureHotkeys:       vjsOptions.plugins.hotKeys.alwaysCaptureHotkeys,
-                captureDocumentHotkeys:     vjsOptions.plugins.hotKeys.captureDocumentHotkeys,
-                enableModifiersForNumbers:  vjsOptions.plugins.hotKeys.enableModifiersForNumbers,
-                enableInactiveFocus:        vjsOptions.plugins.hotKeys.enableInactiveFocus,
-                skipInitialFocus:           vjsOptions.plugins.hotKeys.skipInitialFocus
-            };
-
-            var skipButtonsPluginDefaults  = {
-                backward:                     vjsOptions.plugins.skipButtons.backward,
-                forward:                      vjsOptions.plugins.skipButtons.forward,
-                backwardIndex:                0,
-                forwardIndex:                 1
-            };
-
-            var zoomPluginDefaults = {
-                moveX:                      vjsOptions.plugins.zoomButtons.moveX,
-                moveY:                      vjsOptions.plugins.zoomButtons.moveY,
-                rotate:                     vjsOptions.plugins.zoomButtons.rotate,
-                zoom:                       vjsOptions.plugins.zoomButtons.zoom
-            };
-
-            videoInfo     = this.core.galleryItems[index].__slideVideoInfo || {};
+            var $videoElement, videoInfo, videoId;
+            var videojsPlayer = 'not_set';
+
+            // load the lgQuery element for the active player
             $videoElement = this.core
               .getSlideItem(index)
               .find('.lg-video-object')
               .first()
 
-            // chapter tracks only available for VJS
-            //
-            if (this.core.galleryItems[this.core.index].video !== undefined && videoInfo.html5) {
-                videoData = JSON.parse(this.core.galleryItems[this.core.index].video);
-
-                if (videoData.tracks !== undefined && videoData.tracks.length > 0) {
-                    for (var i=0; i<videoData.tracks.length; i++) {
-                        if (videoData.tracks[i].kind == 'chapters') {
-                            trackSrc = videoData.tracks[i].src;
-                            chapterTracksEnabled = true;
-                        }
-                    }
-                } // END if videoData.tracks
-
-                if ($videoElement.selector !== undefined) {
-                    videoId       = $videoElement.selector.id;
-                    videojsPlayer = videojs(videoId);
-                } else {
-                    videojsPlayer = 'unknown';
-                }
-
-                if (videojsPlayer !== 'unknown') {
-
-                    // added VJS Plugins hotKeys|skipButtons|zoom, playbackRates
-                    // -------------------------------------------------------------
-                    hotKeysPlugin     = this.settings.videojsOptions.controlBar.hotKeysPlugin;
-                    skipButtonsPlugin = this.settings.videojsOptions.controlBar.skipButtonsPlugin;
-                    zoomPlugin        = this.settings.videojsOptions.controlBar.zoomPlugin;
-                    playbackRates     = (this.settings.videojsOptions.controlBar.playbackRates !== undefined) ? this.settings.videojsOptions.controlBar.playbackRates : playbackRatesDefaults;
-
-                    //  jadams, 2024-01-22: added video start position
-                    // -------------------------------------------------------------
-                    if (this.settings.videojsOptions.videoStart !== undefined) {
-                        videoStart = this.settings.videojsOptions.videoStart[index];
-                         videojsPlayer.on("play", function() {
-                            var startFromSecond = new Date('1970-01-01T' + videoStart + 'Z').getTime() / 1000;
-                            videojsPlayer.currentTime(startFromSecond);
-                        }); // END on event play
-                    } // END if videoStart
-
-                    // add playbackRates (only available for VJS)
-                    if (videojsPlayer.playbackRates !== undefined) {
-                        videojsPlayer.playbackRates(playbackRates);
-                    }
-
-                    // add hotkeys Plugin (only available for VJS)
-                    if (hotKeysPlugin !== undefined && hotKeysPlugin.enabled && videojsPlayer.hotKeys !== undefined) {
-
-                        // merge objects
-                        hotKeysPlugin.options = __assign(__assign({}, hotKeysPluginDefaults), hotKeysPlugin.options);
-
-                        // prevent multiple plugin instances
-                        var hotKeysActive = false;
-                        if (videojsPlayer.activePlugins_ !== undefined && videojsPlayer.activePlugins_.hotKeys !== undefined) {
-                            hotKeysActive = videojsPlayer.activePlugins_.hotKeys;
-                        }
-
-                        if (!hotKeysActive) {
-                            videojsPlayer.hotKeys({
-                                volumeStep:                         hotKeysPlugin.options.volumeStep,
-                                seekStep:                           hotKeysPlugin.options.seekStep,
-                                enableMute:                         hotKeysPlugin.options.enableMute,
-                                enableFullscreen:                   hotKeysPlugin.options.enableFullscreen,
-                                enableNumbers:                      hotKeysPlugin.options.enableNumbers,
-                                enableVolumeScroll:                 hotKeysPlugin.options.enableVolumeScroll,
-                                enableHoverScroll:                  hotKeysPlugin.options.enableHoverScroll,
-                                alwaysCaptureHotkeys:               hotKeysPlugin.options.alwaysCaptureHotkeys,
-                                captureDocumentHotkeys:             hotKeysPlugin.options.captureDocumentHotkeys,
-                                documentHotkeysFocusElementFilter:  hotKeysPlugin.options.documentHotkeysFocusElementFilter,
-
-                                // Mimic VLC seek behavior (default to: 15)
-                                seekStep: function(e) {
-                                    if (e.ctrlKey && e.altKey) {
-                                        return 5*60;
-                                    } else if (e.ctrlKey) {
-                                        return 60;
-                                    } else if (e.altKey) {
-                                        return 10;
-                                    } else {
-                                        return 15;
-                                    }
-                                }
-
-                            });
-                        } // END if hotKeysActive
-
-                    } // END if hotKeysPlugin enabled
-
-                    // add skipButtons Plugin (only available for VJS)
-                    // -------------------------------------------------------------
-                    if (skipButtonsPlugin !== undefined && skipButtonsPlugin.enabled && videojsPlayer.skipButtons !== undefined) {
-                        // merge objects
-                        skipButtonsPlugin.options = __assign(__assign({}, skipButtonsPluginDefaults), skipButtonsPlugin.options);
-
-                        // prevent multiple plugin instances
-                        var skipButtonsActive = false;
-                        if (videojsPlayer.activePlugins_ !== undefined && videojsPlayer.activePlugins_.skipButtons !== undefined) {
-                            skipButtonsActive = videojsPlayer.activePlugins_.skipButtons;
-                        }
-
-                        if (!skipButtonsActive) {
-                            videojsPlayer.skipButtons({
-                                backward:         skipButtonsPlugin.options.backward,
-                                forward:          skipButtonsPlugin.options.forward,
-                                backwardIndex:    skipButtonsPlugin.options.backwardIndex,
-                                forwardIndex:     skipButtonsPlugin.options.forwardIndex
-                            });
-                        }
-
-                    } // END if skipButtons Plugin enabled
-
-                    // add zoom Plugin (only available for VJS)
-                    // -----------------------------------------------------------------
-                    if (zoomPlugin !== undefined && zoomPlugin.enabled && videojsPlayer.zoomButtons !== undefined) {
-                        // merge objects
-                        zoomPlugin.options = __assign(__assign({}, zoomPluginDefaults), zoomPlugin.options);
-
-                        // prevent multiple plugin instances
-                        var zoomButtonsActive = false;
-                        if (videojsPlayer.activePlugins_ !== undefined && videojsPlayer.activePlugins_.zoomButtons !== undefined) {
-                            zoomButtonsActive  = videojsPlayer.activePlugins_.zoomButtons;
-                        }
-                        
-                        if (!zoomButtonsActive) {
-                            videojsPlayer.zoomButtons({
-                                moveX:  zoomPlugin.options.moveX,
-                                moveY:  zoomPlugin.options.moveY,
-                                rotate: zoomPlugin.options.rotate,
-                                zoom:   zoomPlugin.options.zoom
-                            });
-                        }
-
-                    } // END if zoom Plugin enabled
-
-                    // chapter track processing (only available for VJS)
-                    // -----------------------------------------------------------------
-                    if (chapterTracksEnabled) {
-                        var parser  = new WebVTTParser();
-                        var markers = [];
-
-                        function cb_load (data /* ,textStatus, jqXHR */ ) {
-                            var tree = parser.parse(data, 'metadata');
-                            var marker;
-
-                            // add chapter tracks to markers array
-                            for (var i=0; i<tree.cues.length; i++) {
-                                marker = { time: tree.cues[i].startTime, label: tree.cues[i].text };
-                                markers.push(marker);
-                            }
-                        }; // END function cb_load 
-
-                        // load chapter tracks
-                        // -------------------------------------------------------------
-                        loadVtt(trackSrc, cb_load);
-
-                        // add chapter tracks on play
-                        videojsPlayer.on("play", function() {
-                            videojsPlayer.currentTime(videoStart);
-
-                            var total    = videojsPlayer.duration();
-                            var timeline = $(videojsPlayer.controlBar.progressControl.children_[0].el_);
-
-                            // add chapter tracks on timeline (delayed)
-                            setTimeout (function() {
-                                var markers_loaded = setInterval (function () {
-                                    if (markers.length) {
-                                        for (var i=0; i<markers.length; i++) {
-                                            var left = (markers[i].time / total * 100) + '%';
-                                            var time = markers[i].time;
-                                            var el   = $('<div class="vjs-chapter-marker" style="left: ' +left+ '" data-time="' +time+ '"> <span>' +markers[i].label+ '</span></div>');
+            // try to get HTML Element for the active player (failsafe)
+            // if NOT available, something went totally wrong
+            if (!$videoElement.get()) {
+                return;
+            }
 
-                                            el.click(function() {
-                                                videojsPlayer.currentTime($(this).data('time'));
-                                            });
+            // load the INFO object for the active player
+            videoInfo = this.core.galleryItems[index].__slideVideoInfo || {};
 
-                                            timeline.append(el);
-                                        }
-                                        clearInterval(markers_loaded);
-                                    }
-                                }, 10); // END markers_loaded
-                            }, 1000 ); // END setTimeout
+            // process video of type 'html5' for extended VJS settings
+            // -----------------------------------------------------------------
+            // if (this.core.galleryItems[this.core.index].video !== undefined && (videoInfo.html5 || videoInfo.youtube)) {
+            if (videoInfo.html5 || videoInfo.youtube) {
 
-                        }); // END on "play"
+                // if ($videoElement.selector.id !== undefined) {
+                //     videoId       = $videoElement.selector.id;
+                //     videojsPlayer = videojs(videoId);
+                // }
 
-                    } // END if chapterTracksEnabled
+                if ($videoElement.selector.player !== undefined) {
+                  videojsPlayer = $videoElement.selector.player;
+                }
 
+                if (videojsPlayer !== 'not_set') {
+                  vjsProcessExtendedButtonsAndPlugins(this, videojsPlayer, videoInfo);
                 } // END if videojsPlayer is defined
 
             } // END if videoInfo.html5
 
-            if (!$videoElement.get())
-                return;
-            if (videoInfo.youtube) {
-                try {
-                    $videoElement.get().contentWindow.postMessage("{\"event\":\"command\",\"func\":\"" + action + "Video\",\"args\":\"\"}", '*');
-                }
-                catch (e) {
-                    console.error("lightGallery:- " + e);
-                }
-            }
-            else if (videoInfo.vimeo) {
-                try {
-                    new Vimeo.Player($videoElement.get())[action]();
-                }
-                catch (e) {
-                    console.warn('lightGallery: Make sure you have included //github.com/vimeo/player.js');
-                }
-            }
-            else if (videoInfo.html5) {
+            // check responses of the (active) player loaded
+            // -----------------------------------------------------------------
+            if (videoInfo.html5) {
                 if (this.settings.videojs) {
+                    // VideoJS  API detected
                     try {
                         videojs($videoElement.get())[action]();
                     }
@@ -830,10 +931,35 @@
                     }
                 }
                 else {
+                    // iFrame API detected (??? supported ???)
                     $videoElement.get()[action]();
+                } // END html5
+            } else if (videoInfo.youtube) {
+                if (this.settings.videojs) {
+                    // VideoJS  API detected
+                    try {
+                        videojs($videoElement.get())[action]();
+                    }
+                    catch (e) {
+                        console.warn('lightGallery: Make sure you have included videojs');
+                    }
+                } else  {
+                    // iFrame API detected
+                    try {
+                        $videoElement.get().contentWindow.postMessage("{\"event\":\"command\",\"func\":\"" + action + "Video\",\"args\":\"\"}", '*');
+                    }
+                    catch (e) {
+                        console.error("lightGallery:- " + e);
+                    }
+                } // END youtube
+            } else if (videoInfo.vimeo) {
+                try {
+                    new Vimeo.Player($videoElement.get())[action]();
                 }
-            }
-            else if (videoInfo.wistia) {
+                catch (e) {
+                    console.warn('lightGallery: Make sure you have included //github.com/vimeo/player.js');
+                } // END vimeo
+            } else if (videoInfo.wistia) {
                 try {
                     window._wq = window._wq || [];
                     // @todo Find a way to destroy wistia player instance
@@ -846,8 +972,8 @@
                 }
                 catch (e) {
                     console.warn('lightGallery: Make sure you have included //fast.wistia.com/assets/external/E-v1.js');
-                }
-            }
+                } // END wistia
+            } // END if videoInfo
 
         }; // END controlVideo
 
@@ -865,7 +991,7 @@
                         _html =
                             typeof video === 'string' ? JSON.parse(video) : video;
                     }
-                    var videoJsPlayer_1 = this.appendVideos($el, {
+                    var videoJsPlayer_1 = this.appendVideo($el, {
                         src: _src,
                         addClass: '',
                         index: this.core.index,