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?