Facility Control

 View Only

  • 1.  Importing Videos for Display within a Tab

    Posted 11-03-2020 03:14

    I was wondering whether there was a way to display a video within a tab on Dashboard. For example, when I hover to tab 1, a video will commence. Moving on to the next tab, a new video will start. Is this possible in any way?



  • 2.  RE: Importing Videos for Display within a Tab

    Posted 11-03-2020 14:49

    DashBoard does not play videos natively.   It is not a media player.   

    You can use an NDI feed to display videos in a DashBoard panel that are being played by other equipment.   Those NDI feeds can come from software, like XPression, or they can come from other devices (like a BirdDog NDI converter).    You can download the NDI tools from NDI tools from NDI.tv.     If you want to do it all on one computer, you could setup software, like the VLC media player to stream the videos it's playing over NDI.

    Then you can drop an NDI panel element and point it to the NDI feed.

    You could setup your tabs so that when you switch tabs, it sends a command to the VLC player to change what video is playing.   You would need a different NDI panel element in each tab though.   Which means that you may end up with multiple NDI elements all streaming at the same time (with only one of them visible).   That would be very memory intensive.

    It would probably be better to use a string constrainted parameter that's a "toggle buttons" widget.   Put that on top of one NDI panel element.   When the parameter changes, you send a command to the VLC player to switch the video.   The NDI feed will simply now be showing the new video.

    Here is an example of such a parameter.   Although I have not hooked it up to a VLC player: 

    <abs contexttype="opengear" gridsize="20" id="_top" keepalive="false" style="">
    <meta>
    <params>
    <param access="1" constrainttype="STRING_CHOICE" maxlength="0" name="VideoToPlay" oid="VideoToPlay" type="STRING" value="Video 1" widget="radio-toggle">
    <constraint>Video 1</constraint>
    <constraint>Video 2</constraint>
    <constraint>Video 3</constraint>
    <constraint>Video 4</constraint>
    </param>
    </params>
    </meta>
    <param expand="true" height="80" left="80" oid="VideoToPlay" showlabel="false" top="40" width="660"/>
    <ndi height="380" left="80" style="bdr:thick;" top="140" width="660"/>
    </abs>

    The NDI feed is also not showing anything, because I did not specify a source for it.

     

    If you scroll down on this page: https://www.rossvideo.com/applications/house-of-worship/, you will find a video on using NDI, and one on controlling a VLC player.  

     


    #DashBoard


  • 3.  RE: Importing Videos for Display within a Tab

    Posted 11-03-2020 15:33

    There is one other way to play videos, through a browser panel element.   Here is an example:

     

    <abs contexttype="opengear" style="">
    <browser height="200" left="26" top="23" url="video.html" width="400"/>
    </abs>

     

    You'll also need the video.html file, which points to the video.   It looks like this:

    <html>
    <body style="margin:0px;padding:0px;background-color:#000000">
    <video autoplay="true" style="position:absolute;top:0px;left:0px;width:100%;height:100%">
    <source src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4?_=1" type="video/mp4"/>
    </video>
    </body>
    </html>

     

     

     

     

    My colleague also pointed me to this panel, which allows you to play youTube videos in a DashBoard.

     

    <abs contexttype="opengear" id="_top" keepalive="false">
    <meta>
    <params>
    <param access="1" constrainttype="INT_CHOICE" name="Playback" oid="Playback" precision="0" type="INT32" value="1" widget="toggle">
    <constraint key="0">Play</constraint>
    <constraint key="1">Play</constraint>
    </param>
    </params>
    </meta>
    <webget height="427" id="webget-player" left="136" top="89" width="666">
    <html>&lt;!DOCTYPE html&gt;
    &lt;html&gt;
    &lt;body&gt;
    &lt;!-- 1. The &lt;iframe&gt; (and video player) will replace this &lt;div&gt; tag. --&gt;
    &lt;div id="player"&gt;&lt;/div&gt;

    &lt;script&gt;
    // 2. This code loads the IFrame Player API code asynchronously.
    var tag = document.createElement('script');

    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    // 3. This function creates an &lt;iframe&gt; (and YouTube player)
    // after the API code downloads.
    var player;
    function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
    height: '390',
    width: '640',
    videoId: 'LeoKlM0iBr4'
    });
    }

    function playVideo()
    {
    player.playVideo();
    }

    function stopVideo()
    {
    player.stopVideo();
    }

    function pauseVideo()
    {
    player.pauseVideo();
    }
    &lt;/script&gt;
    &lt;/body&gt;
    &lt;/html&gt;</html>
    </webget>
    <param expand="true" height="68" left="135" oid="Playback" style="style:toggleButton;" top="519" width="667">
    <task tasktype="ogscript">if (this.getValue() == 1)
    {
    ogscript.getComponentsById('webget-player')[0].callNoWait('playVideo', null);
    }
    else
    {
    ogscript.getComponentsById('webget-player')[0].callNoWait('pauseVideo', null);
    }
    </task>
    </param>
    </abs>

     


    #DashBoard