Video as Tab-Background

[Tobi]

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>

[Tobi]

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>

[dceejay]

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.

[Tobi]

ok, that´s too expensive

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

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

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

[Tobi]

@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?

[dceejay]

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.

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)

[Tobi]

@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

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?

[dceejay]

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.

[hugobox]

Here'a a template for a fullscreen video background with crossfading. It bypasses the Dashboard's layout by using position:fixed so it can be set to 1x1 cell size and remain fullscreen.

<style>
@keyframes fadein {
  0%   {opacity: 0}
  100% {opacity: 1}
}
@keyframes fadeout {
  0%   {opacity: 1}
  100% {opacity: 0}
}
.fadein {
  animation-name: fadein;
  animation-duration: 3s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  background-color: black;
}
.fadeout {
  animation-name: fadeout;
  animation-duration: 3s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  background-color: black;
}
</style>

<div style="background-color: black; width:100%; height:100%; position:fixed; top:0px; left:0px; z-index:0">
</div>

<div style="position:fixed; top:0px; width:100%; height:100%; left:0px; z-index:0">
     <video id="video1" width="100%" height="100%" loop autoplay muted></video>
</div>
<div style="position:fixed; top:0px; width:100%; height:100%; left:0px; z-index:0">
     <video id="video2" width="100%" height="100%" loop autoplay muted></video>
</div>

<script> 
    (function(scope) {
        let currentVideo = 1
        // Watch for messages being send to this template node
        scope.$watch('msg', function (msg) {      
            if (msg) {

                let video1 = document.getElementById('video1');
                let video2 = document.getElementById('video2');
                if (currentVideo == 1){
                    video1.src = msg.payload;
                    document.getElementById("video1").className = "fadein";
                    document.getElementById("video2").className = "fadeout";
                    var playPromise = video1.play();
                    currentVideo = 2;
                }else{
                    video2.src = msg.payload;
                    document.getElementById("video2").className = "fadein";
                    document.getElementById("video1").className = "fadeout";
                    var playPromise = video2.play();
                    currentVideo = 1;
                }
                if (playPromise !== undefined) {
                    playPromise.then(_ => {
                      // Automatic playback started!
                      // Show playing UI.
                    })
                    .catch(error => {
                      // Auto-play was prevented
                      // Show paused UI.
                    });
                }
            }       
         }); 
    })(scope); 
</script>

[EDST]

Hi Hugo, Is there a way to apply your code to the header so the video plays in the background of all tabs and not just a certain one? My HTML/CSS is not great enough to figure out how to structure it.

[hugobox]

Hi @EDST! Because of the way the dashboard works, I think the current way to do that would be to duplicate this template for as many tabs as you have.

[EDST]

Ah the downside to that is the video restarts every time you change tab. Would be nice to have it continuous throughout.

[deekshaha]

If I want to set an image as background of the whole page in a tab, Can you please tell where to post the code and where to save the image that I want as background?
I am using NODE RED in ibm cloud.