Video as Tab-Background


#1

Hi,

how can I set a video as background in the Dashboard?
for a background image, I use the following code, but this does not work for a video.

<style>
     body {
      background-image: url("/backgroundimage.png");
background-size: cover; 
}
<style>

#2

I also start and stop the video depending on the payload. this is the code to play and stop the video:

<script> 
    (function(scope) {
        var video = document.getElementById('video');
        video.src = "http://tecfa.unige.ch/guides/html/html5-video/videos/state-of-wikipedia-480x272.ogv";
                // Watch for messages being send to this template node
        scope.$watch('msg', function (msg) {      
            
            if (msg.payload=="1") {

                video.play();
            }
            else if(msg.payload=="0"){
                //var video = document.getElementById('video');
                //video.src = "http://tecfa.unige.ch/guides/html/html5-video/videos/state-of-wikipedia-480x272.ogv";
                video.pause();
            }
         }); 
    })(scope); 
</script>

#3

AFAIK - you can't do it with simple CSS.
You need to build it into the page - ege see - https://www.w3schools.com/howto/howto_css_fullscreen_video.asp
So to do that here you probably need to host your own web page (in Node-RED) then embed the dashboard in that.

Happy to be advised differently though.


#4

ok, that´s too expensive :frowning:

how do I manage to influence the size of the video?

With the following settings the video appears in the dashboard as folllows
Unbenannt



<div>
     <video id="video" width="100%" heigth="100%" style="width:800px, height:800px" preload="auto" autoplay="true" loop="loop"></video>
</div>

<script> 
    (function(scope) {
        var video = document.getElementById('video');
        video.src = "/test.mp4"
        //video.src = "http://tecfa.unige.ch/guides/html/html5-video/videos/state-of-wikipedia-480x272.ogv";
                // Watch for messages being send to this template node
        scope.$watch('msg', function (msg) {      
            
            if (msg.payload=="1") {

                video.play();
            }
            else if(msg.payload=="0"){
                //var video = document.getElementById('video');
                //video.src = "http://tecfa.unige.ch/guides/html/html5-video/videos/state-of-wikipedia-480x272.ogv";
                video.pause();
            }
         }); 
    })(scope); 
</script>
<!--
<style>
    #video {
        position:absolute;
        top: 10vh;
        right: 10vw;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        z-index: -1000;
        overflow: hidden;
    }
</style>
-->


#5

@dceejay

How do I get my widget to take on the full groups?

my group is 36 wide but I can´t close my widget wider than 27, because I can´t get on the extra rows. But only make the height bigger. Is there a trick?


#6

Not sure what you mean ? - it's just for setting the size so you can expand it as much as you have monitor space for... here is one I can create.

image

If you really only want the one group you could also increase the 1x1 cell size on the Dashboard - Site tab to make each cell larger (or smaller)


#7

@dceejay

I will try it with increase the 1x1 cell size.

But what I mean is that I can set the width of the group to 36 see picture below

But I can not set the width of the widgetto this width. Max. widget with ist 27 :frowning:

An other question.

I run Node-RED on a Raspberry Pi and open the Dashboard on the Pi in the Chromium Browser. But the video runs very jerky, is there a possibility, that the video runs better in Chromium?


#8

re height you can set he height as far as you can fit on your monitor.

re video - no idea. I'm not an expert on video playback on the Pi.