The plugin loads successfully but the thumbnail is not displayed

[japan228866]

My production environment: Nuxt3 (Vue), videojs 7.21.5, videojs-sprite-thumbnails 1.0.0.

I recently switched my SPA application to an SSR application. Since Nuxt3 does not support "require," I wrote a component in the plugins directory to import this plugin. The plugin loads successfully, but the thumbnails are not being displayed.

I've been struggling with this issue for two days. Can you help me identify what the problem might be?

Note: It was working fine with the "require" import in the SPA application. But ssr application not working.

thank you.

EDIT :

When I switch to a higher version（@1.1.1） I get the following error:

VIDEOJS: ERROR: TypeError: Cannot read properties of undefined (reading 'off')
at SpriteThumbnails. (videojs-sprite-thumbnails.js:156:18)
at Be.o.dispatcher.o.dispatcher (video.min.js:12:13653)
at je (video.min.js:12:14437)
at e.trigger (video.min.js:20:184444)
at SpriteThumbnails.setState (video.min.js:12:19867)
at init (videojs-sprite-thumbnails.js:133:14)
at spriteThumbs (videojs-sprite-thumbnails.js:176:5)
at o. (videojs-sprite-thumbnails.js:232:9)
at video.min.js:12:30486

/plugins/vjs.js

export default async function(context) {
//if (process.client) {
const loadScript = (src) => {
return new Promise((resolve, reject) => {
const script = document.createElement("script");
script.src = src;
script.addEventListener("load", resolve);
script.addEventListener("error", reject);
document.body.appendChild(script);
});
};

try {
await loadScript(
"https://cdn.jsdelivr.net/npm/video.js@7.21.5/dist/video.min.js"
);
await loadScript(
"https://cdn.jsdelivr.net/npm/videojs-plus@1.6.9/dist/videojs-plus.umd.min.js"
);
await loadScript(
"https://cdn.jsdelivr.net/npm/videojs-sprite-thumbnails@1.0.0/dist/videojs-sprite-thumbnails.js"
);

await loadScript(
  "https://cdn.jsdelivr.net/npm/videojs-seek-buttons@3.0.1/dist/videojs-seek-buttons.min.js"
);

} catch (error) {
console.error("Failed to load script:", error);
}
}

component page.vue

var myPlayer = videojs('myvideo') myPlayer.spriteThumbnails({ interval: 3, url: http://demo.com/path/preview_120.jpg', downlink: 0, width: 120, height: 68, }).log.level('debug');

[phloxic]

Does it work when you omit videojs-plus?

[japan228866]

Does it work when you omit videojs-plus?

Thank you for responding over the weekend.

Yes, it works when videojs-plus is removed.

However, in previous SPA applications, they were compatible with each other without any issues, so I'm puzzled as to why there would be compatibility problems when directly referenced in SSR.

[phloxic]

I have no experience with videojs-plus, so I may be missing something. But when I simply load Video.js and videojs-plus via script tag (not the thumbnail plugin), the controlbar is broken. It is missing some elements, notably the progress bar (progressControl), so indeed here progress is undefined, and the plugin fails to initialize.

Did you try your setup without videojs-plus? Did you use the same version of videojs-plus in your working setup?

[japan228866]

I have no experience with videojs-plus, so I may be missing something. But when I simply load Video.js and videojs-plus via script tag (not the thumbnail plugin), the controlbar is broken. It is missing some elements, notably the progress bar (progressControl), so indeed here progress is undefined, and the plugin fails to initialize.

Did you try your setup without videojs-plus? Did you use the same version of videojs-plus in your working setup?

Thank you for your response on a working day; I apologize for taking up your time.

Yes, it is the same version of videojs-plus, and videojs-plus can be used without any additional setup. When I modify it to videojs__default["default"].getComponent('ControlBar'), it can be retrieved. However, an error occurs during player.on('loadstart', init):

video.min.js:12 Uncaught TypeError: Invalid value used as weak map key
at WeakMap.set ()
at Function.Be [as on] (video.min.js:12:13322)
at spriteThumbs (1557.js:175:18)
at o. (1557.js:237:9)
at o. (video.min.js:12:27486)
at Array.forEach ()
at o. (video.min.js:12:27464)
at video.min.js:12:30486

I have been diligently working to address this issue in my spare time. I greatly appreciate your responsiveness during the workweek. If there can't be resolve , i will looking for alternatives to videojs-plus.

[phloxic]

Ah, I see, one has to load the video-plus style sheet instead of video-js.css. Indeed a control bar is present and working. However:

videojs.getPlayer('player').controlBar.children_
Array(3) [ {…}, {…}, {…} ]
​0: Object { isDisposed_: false, id_: "player_component_82", name_: "ControlSeparator", … }
​1: Object { isDisposed_: false, id_: "player_component_87", name_: "ControlSeparator", … }
​2: Object { isDisposed_: false, id_: "player_component_111", name_: "ControlSeparator", … }
​length: 3
​<prototype>: Array []

If you inspect the ControlSeparators further, you'll find that they contain the actual customized controls. Not exactly intuitive ;-) Therefore the thumbnail plugin cannot work in conjunction with videojs-plus because it expects the default tree of components. Not sure how you got this to work in the first place.

I can look into whether loosening the constraints could work. But that may make similar scenarios even harder to debug.

[japan228866]

Ah, I see, one has to load the video-plus style sheet instead of video-js.css. Indeed a control bar is present and working. However:

videojs.getPlayer('player').controlBar.children_
Array(3) [ {…}, {…}, {…} ]
​0: Object { isDisposed_: false, id_: "player_component_82", name_: "ControlSeparator", … }
​1: Object { isDisposed_: false, id_: "player_component_87", name_: "ControlSeparator", … }
​2: Object { isDisposed_: false, id_: "player_component_111", name_: "ControlSeparator", … }
​length: 3
​<prototype>: Array []

If you inspect the ControlSeparators further, you'll find that they contain the actual customized controls. Not exactly intuitive ;-) Therefore the thumbnail plugin cannot work in conjunction with videojs-plus because it expects the default tree of components. Not sure how you got this to work in the first place.

I can look into whether loosening the constraints could work. But that may make similar scenarios even harder to debug.

It appears that videojs-plus is currently not being actively maintained and does not support videojs version 8. Therefore, I believe modifying the plugin is unnecessary. I have now implemented most of the videojs-plus functionality using a custom skin and additional components, and it is working perfectly.

Once again, thank you, sir. The plugin you have created is excellent, Well done.

[phloxic]

If you inspect the ControlSeparators further, you'll find that they contain the actual customized controls. Not exactly intuitive ;-) Therefore the thumbnail plugin cannot work in conjunction with videojs-plus because it expects the default tree of components. Not sure how you got this to work in the first place.
I can look into whether loosening the constraints could work. But that may make similar scenarios even harder to debug.

I don't think I will drop the constraint of the default tree structure being present. At least for now I consider using existing components as part of the concept of the plugin.

It appears that videojs-plus is currently not being actively maintained and does not support videojs version 8. Therefore, I believe modifying the plugin is unnecessary. I have now implemented most of the videojs-plus functionality using a custom skin and additional components, and it is working perfectly.

Great. I'm gonna try to improve the plugin behaviour if the required components are not found. See #58.

Closing this.