j1-template 2024.3.23 → 2024.3.25

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

@@ -27,7 +27,8 @@
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
     typeof define === 'function' && define.amd ? define(factory) :
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.lgVideo = factory());
-}(this, (function () { 'use strict';
+}(this, (function () {
+'use strict';
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -105,6 +106,11 @@
         autoplayStop: 'lgAutoplayStop',
     };
 
+
+    var isEmpty = function (obj) {
+        return Object.keys(obj).length === 0;
+    };
+
     var param = function (obj) {
         return Object.keys(obj)
             .map(function (k) {
@@ -216,7 +222,305 @@
         }
       });
 
-    } // 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 dependency_met_module_ready, videoInfo, videoStart, videojsPlayer,
+            playbackRates, hotKeysPlugin, skipButtonsPlugin, zoomPlugin,
+            trackSrc;
+
+        dependency_met_module_ready = setInterval (() => {            
+            var isModuleInitialised  = (j1.adapter.gallery.getState() === 'finished') ? true : false;
+            var isVideojsOptions     = (isEmpty(vjsObject.settings.videojsOptions)) ? false : true;
+
+            if (isModuleInitialised && isVideojsOptions) {
+                var videoData             = { tracks: false };
+                var playbackRatesDefaults = vjsOptions.playbackRates.values;
+
+                // disable chapterTracks by default
+                videojsPlayer.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
+                // -------------------------------------------------------------
+                if (!isEmpty(vjsObject.settings.videojsOptions)) {
+
+                    hotKeysPlugin     = vjsObject.settings.videojsOptions.hotKeysPlugin;
+                    skipButtonsPlugin = vjsObject.settings.videojsOptions.controlBar.skipButtonsPlugin;
+                    zoomPlugin        = vjsObject.settings.videojsOptions.controlBar.zoomPlugin;
+                    playbackRates     = vjsObject.settings.videojsOptions.controlBar.playbackRates;
+
+                    //  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
+                    // ---------------------------------------------------------
+                    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 tracks only available for VideoJS (local video/mp4)
+                    // ---------------------------------------------------------
+                    if (vjsObject.core.galleryItems[vjsObject.core.index].video !== undefined) {
+                        videoData = JSON.parse(vjsObject.core.galleryItems[vjsObject.core.index].video);
+                    }
+
+                    // load tracks
+                    // TODO: chapterTracksEnabled needs to be indivialized
+                    // per player
+                    // ---------------------------------------------------------
+                    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;
+                                videojsPlayer.chapterTracksEnabled = true;
+                            }
+                        }
+                    } // END load tracks
+
+                    // process (chapter) tracks if tracks available
+                    // ---------------------------------------------------------                    
+                    if (videojsPlayer.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 player is playing
+                        // -----------------------------------------------------
+                        videojsPlayer.on("play", function() {
+                            videojsPlayer.currentTime(videoStart);
+
+                            var total    = videojsPlayer.duration();
+                            var timeline = $(videojsPlayer.controlBar.progressControl.children_[0].el_);
+
+                            // remove old|previous markers
+                            timeline.find('.vjs-chapter-marker').remove();
+
+                            // add chapter tracks on timeline (delayed)
+                            setTimeout (function() {
+                                var markers_loaded = setInterval (function () {
+                                    if (markers.length) {
+                                        // make sure, that previous markers deleted
+                                        timeline.find('.vjs-chapter-marker').remove();
+
+                                        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
+                            }, 100 ); // END setTimeout
+
+                        });
+                    } else {
+                        // remove chapter tracks on playing
+                        // -----------------------------------------------------                     
+                        videojsPlayer.on("play", function() {
+                            videojsPlayer.chapterTracksEnabled = false;
+                            var timeline = $(videojsPlayer.controlBar.progressControl.children_[0].el_);
+
+                            // remove existing markers
+                            timeline.find('.vjs-chapter-marker').remove();
+
+                        });
+
+                    } // END remove chapter tracks
+
+                } // END if videojsOptions
+
+                clearInterval(dependency_met_module_ready);
+            } // END if isModuleInitialised
+
+       }, 10); // END dependency_met_page_ready
+
+    }; // END vjsProcessExtendedButtonsAndPlugins
 
     /**
      * Video module for lightGallery
@@ -304,7 +608,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 +682,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 +799,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 +868,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 +915,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 +970,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 +1011,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 +1030,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,