dashboard: some advanced template node stuff

83 views
Skip to first unread message

Michael Hallock

unread,
Feb 22, 2018, 6:13:31 PM2/22/18
to Node-RED
Ok, so not that advanced, but I'm obviously missing something. I'm trying to load a video.js video element into a template node and I'm hitting some walls.

The first one is that I need to include some extra JS / CSS files for video JS. So I have a template node that injects into <head> like this:

<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
<script src="https://unpkg.com/vide...@6.6.3/dist/video.js"></script>
<script src="https://unpkg.com/videojs-c...@5.12.2/dist/videojs-contrib-hls.js"></script>

Now because these are being placed in the head I would have expected these to load serially... but I keep getting the videojs-contrib-hls.js loading before video.js and such, and then errors occurring because video.js is undefined, etc.

In addition, I was attempting to get it to call some JS 

<div style="width: 500px; height: 281px; margin: 0 auto;">
    <video id="camera1Video" class="video-js vjs-default-skin" width="500" height="281" controls muted>
        <source src="{{msg.payload}}" type="application/x-mpegURL">
    </video>
    <script>
        (function(scope) {
            scope.$watch('msg.payload', function(data) {
                var camera1Video = videojs('camera1Video');
                camera1Video.src({
                    src: data,
                    type: 'application/x-mpegURL'
                });
                camera1Video.play();
            });
        })(scope);
    </script>
</div>

And I this seems to also be running before everything loads correctly too... 

Im not marking these as async, so I'm not sure why the script order isn't being maintained... ideas?

Bart Butenaers

unread,
Feb 24, 2018, 7:28:32 AM2/24/18
to Node-RED
Hi Michael,

I'm not an Angular expert, but I see on this link a section "Check external libraries are loaded".  
Don't know if it can be of any help to you, and not sure if that is a good 'workaround' to determine the order in which the scripts are loaded....

Is that perhaps some kind of functionality that could be added in the future to the Template node (in case 'Added to head section' is selected)???

Kind regards,
Bart Butenaers

Dave C-J

unread,
Feb 24, 2018, 9:09:34 AM2/24/18
to node...@googlegroups.com
Reply all
Reply to author
Forward
0 new messages