I tried many different ways but I can't make this VueJS doc example to work within the uibuilder vue setup (after adding videojs and vue-video-player libraries): Vue and Video.js I tried with both a VideoPlayer.vue file, and import VideoPlayer from "@/components/VideoPlayer.vue"; or some stuff in M…

The flow on its own wouldn't help because it doesn't include the source code for the index.(html|js) nor the .vue file. Here is a working example with the player loaded directly with no video. And an inject that sends the video url then starts the playback when the video has loaded - all standard c…

You haven't used my index.html code. You haven't actually loaded the VideoJS library. Two lines are needed in index.html In the <head> section, you need <link type="text/css" rel="stylesheet" href="https://vjs.zencdn.net/7.10.2/video-js.css" /> Towards the end of the <body> section, you need <s…

Actually, I did use your index.html code [image] I have no idea why it's not working for me

OK, meanwhile, I tried with local versions using your details page: http-vue-loader 1.4.2 ../uibuilder/vendor/http-vue-loader ../uibuilder/vendor/http-vue-loader/./src/httpVueLoader.js /data/node_modules/http-vue-loader video.js 7.10.2 ../uibuilder/vendor/video.js ../uibuilder/vendor/video.…

[image] j2l: <script src="../uibuilder/vendor/video.js/./dist/video.cjs.js"></script> As it says on the details page, that page can only show you what the module author has put into the module's package.json. It is showing you that in order to give you some clues, you cannot simply take it a…

I get why I had the previous error but not locally: NoScript in Firefox was blocking unpkg. After switching back to remote libraries and allowing everything, I still get an error: [Vue warn]: Failed to resolve async component: function() { return new Component(name).load(url) .then(funct…

[image] j2l: mounted() { //this.player = videojs(this.$refs.videoPlayer, this.options, function onPlayerReady() { // console.log('onPlayerReady', this); }) In your video-player.vue file .. i believe that last closing parentheses is not needed

Make sure you don't have any other extensions blocking things. Take out the <video-player :options="videoOptions"/> and <script src="../uibuilder/vendor/http-vue-loader/./src/httpVueLoader.js"></script> lines in index.html From index.js, t take out the components section and the data.videoOptions …

Thank you @UnborN , actually it turned my eyes to something else I changed because of the previous videojs issue: I commented the this.player Should be as @TotallyInformation wrote before: mounted() { this.player = videojs(this.$refs.videoPlayer, this.options, function onPlayer…

No more errors! Do you also have 2 players? [image] I wonder because sometimes Firefox on Linux has some issues with codecs, maybe that's the cause. In the source, there are 2 players: [image]

Node-RED

Node-RED Forum

Vue VideoJS in UIBuilder

Dashboard

j2l 8 February 2021 08:52 28

Thank you very much @UnborN !
As I said, I'm learning Vue using uibuilder
You spotted on the mechanic that is still blurry for me.

Topic		Replies	Views
VueJS component not loading General uibuilder	17	1083	23 April 2022
Uibuilder import data from local js file and export to it General uibuilder	12	371	24 June 2023
Uibuilder uibuilder.iife.js errors General uibuilder	11	286	27 April 2023
Audio does not work in uibuilder General uibuilder	8	276	21 January 2023
uibuilder.onChange msgs General	28	2908	23 August 2019

Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.

Vue VideoJS in UIBuilder

Related topics