I can inject video into template, but can't do it with a button

Dashboard
1

I'm very new to node-red and I've been trying to create a button that when pressed, it will play a video file in the UI. I was able to successfully use an inject for changing the msg.payload, but I can't seem to do this with a button or a change. Does anyone have any clue how to get this to work with a button?

This is the template I'm using

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

Edit: some more information: I ran a debut on the msg.payload and the button and the inject are completely identical:

10/30/2020, 1:41:16 AMnode: 2154c6de.9af61a
msg.payload : string[14]
"\bluetimer.mp4"

10/30/2020, 1:41:09 AMnode: e7224521.3adec8
msg.payload : string[14]
"\bluetimer.mp4"

I have no idea what I'm doing wrong, been trying to figure out why the button won't work all day today but the inject works fine.

2

Put a debug node on the output of the template node and compare the results using both the buttons and the inject

3

I get the exact same results debugging the template output

This is from the button:
10/30/2020, 2:04:51 AMnode: e7224521.3adec8
msg.payload : string[14]
"\bluetimer.mp4"

This is from the inject:
10/30/2020, 2:05:04 AMnode: e7224521.3adec8
msg.payload : string[14]
"\bluetimer.mp4"

4

Can you export the flow and attach it to a reply?

5

Oh my gosh....

I found out how to do it. I had to delete the socketid, event, and topic.

1 Like
6

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.