Please Note This forum exists for community support for the Mango product family and the Radix IoT Platform. Although Radix IoT employees participate in this forum from time to time, there is no guarantee of a response to anything posted here, nor can Radix IoT, LLC guarantee the accuracy of any information expressed or conveyed. Specific project questions from customers with active support contracts are asked to send requests to support@radixiot.com.

Radix IoT Website Mango 3 Documentation Website Mango 4 Documentation Website

  • 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.


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


  • 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.


  • @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.


  • 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>