Here's an example user module to get you started -
define(['angular', 'require'], function(angular, require) {
'use strict';
const userModule = angular.module('userModule', ['maUiApp']);
class VideoComponentController {
static get $inject() { return ['$element']; }
constructor($element) {
this.videoElement = $element[0].querySelector('video');
}
$onChanges(changes) {
if (changes.pointValue) {
this.pointValueChanged();
}
}
pointValueChanged() {
if (this.pointValue) {
this.videoElement.play();
} else {
this.videoElement.pause();
}
}
}
userModule.component('myVideoComponent', {
template: `<video style="height: 100%; width: 100%" muted loop>
<source src="/rest/v2/file-stores/default/Interactive SVG Graphics-sm.mp4" type="video/mp4">
</video>`,
controller: VideoComponentController,
bindings: {
pointValue: '<'
}
});
return userModule;
}); // define
Use it like this -
<div class="ma-designer-root" id="e9dba175-4f00-4a6d-9030-d83f4eb9d0a6" style="width: 1366px; height: 768px; position: relative;">
<my-video-component id="d02bb2e2-78fa-42ae-a287-58c777440a0c" style="position: absolute; left: 30px; top: 50px; width: 744px; height: 345px;" point-value="myPoint.value"></my-video-component>
<ma-get-point-value id="7c7525b6-5fe3-4dbf-a2bb-65790be100c0" style="position: absolute; left: 193px; top: 463px;" point-xid="voltage" point="myPoint"></ma-get-point-value>
</div>
