Including a javascript file verbatim

[Roel Vanhout]

Hi,

I'm writing a plugin that will let me enter <video> elements easily into my tiddlers. I want to use Video.js for this; this means that I need to include an extra stylesheet and a javascript file.

I have the basics working in that I have a plugin that registers a macro and includes the stylesheet. My question is on how to get the javascript included. What I've done is the following:

- Added a tiddler called $:/plugins/rvanhout/videoelement/video.js

- Pasted the contents of https://vjs.zencdn.net/7.7.6/video.js into that tiddler

- Set the type of the tiddler to "application/javascript"

- Set the field "module-type" to "library"

- Set the field "global-module" to "true"

Despite all this, the tiddle is included in my pages but in <div> and <pre> tags; I also cannot see it in the Firefox debugger as a .js that was loaded, whereas the other .js file in my plugin (the one that registers the macro) is visible there. So I'd expect this video.js to also show up there?

What am I doing wrong? What is the proper way to reference complete external javascript libraries from an internal tiddle (i.e., I don't want to load it from the CDN)? Thanks.

regards,

Roel

[Joshua Fontany]

I think for that style of js plugin, you need an "initializer" module. See the last part of this link:

https://tiddlywiki.com/dev/#Adding%20Babel%20Polyfill%20to%20TiddlyWiki:%5B%5BAdding%20Babel%20Polyfill%20to%20TiddlyWiki%5D%5D

I have not used a "global-module" though.

Best,

Joshua Fontany

[Roel Vanhout]

Thanks for that - it turns out though that when I try to initialize video.js from there, there is some issue with the context of the module imports (I don't really understand) which was discussed on this list a few years ago in the context of the TwTube plugin. So I ended up importing by setting the $:/tags/RawMarkup tag on the tiddler with the code, and that works for initializing the javascript.

However now I have the next problem - when I set up a <video> element from a macro, that element isn't processed by the video.js library because that library traverses the DOM when the page is ready, but therefore doesn't process tiddlers and tiddler context that are/is inserted dynamically. So now my question is - is there a way to set up a callback somehow to be notified every time a tiddler is rendered? So that I can traverse the freshly rendered content myself, and apply the video.js initialization? I've found mentions of the th-navigating hook, but I can't find any examples of how to use it - even even whether it would be suitable for my specific use case. Thanks.

regards

Roel

 

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/563dbd44-5b13-4e43-b686-a89f31dee1d9%40googlegroups.com.