video component codecs

[realmooseman]

Hi All,
I am attempting to have a couple video files overlay with alpha channel for transparency. Can someone tell me what codecs are supported and/or if I can add more codecs. I am having troubles finding specific documentation on the video component. I must be looking in the wrong places.

THanks,

Jim.

[Jared Wiltshire]

Are you talking about on dashboards? What component are you referring to?

[realmooseman]

Hi,

Yes, in dashboard designer, I am adding components from the palette and one is the video component from the basic components tab.

I want to have a background video which moves all the time, and then have a second video placed on top with alpha channel so transparent background which I can start and stop at specific points depending on data values, but the background continues to move.

[Jared Wiltshire]

@realmooseman said in video component codecs:

Can someone tell me what codecs are supported

It varies depending on the browser, see
https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats

@realmooseman said in video component codecs:

I am having troubles finding specific documentation on the video component.

The "component" you are referring to is simply a HTML5 video element. See the excellent MDN documentation here
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video

@realmooseman said in video component codecs:

I want to have a background video which moves all the time, and then have a second video placed on top with alpha channel so transparent background which I can start and stop at specific points depending on data values, but the background continues to move.

You will probably want to create a custom component in a user module to achieve this.

[Jared Wiltshire]

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>