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

**URL:** <https://discourse.nodered.org/t/i-can-inject-video-into-template-but-cant-do-it-with-a-button/35062>\
**Category:** Dashboard\
**Created:** [30 October 2020 08:25 UTC](https://discourse.nodered.org/t/i-can-inject-video-into-template-but-cant-do-it-with-a-button/35062 "2020-10-30T08:25:28Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![thepianocian](https://avatars.discourse-cdn.com/v4/letter/t/eb9ed0/32.png) [@thepianocian](https://discourse.nodered.org/u/thepianocian)\
**Post date:** [30 October 2020 08:25 UTC](https://discourse.nodered.org/t/i-can-inject-video-into-template-but-cant-do-it-with-a-button/35062/1 "2020-10-30T08:25:28Z")

</div>

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

```auto
<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.

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [30 October 2020 08:53 UTC](https://discourse.nodered.org/t/i-can-inject-video-into-template-but-cant-do-it-with-a-button/35062/2 "2020-10-30T08:53:22Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![thepianocian](https://avatars.discourse-cdn.com/v4/letter/t/eb9ed0/32.png) [@thepianocian](https://discourse.nodered.org/u/thepianocian)\
**Post date:** [30 October 2020 09:06 UTC](https://discourse.nodered.org/t/i-can-inject-video-into-template-but-cant-do-it-with-a-button/35062/3 "2020-10-30T09:06:33Z")

</div>

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"

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [30 October 2020 09:15 UTC](https://discourse.nodered.org/t/i-can-inject-video-into-template-but-cant-do-it-with-a-button/35062/4 "2020-10-30T09:15:48Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![thepianocian](https://avatars.discourse-cdn.com/v4/letter/t/eb9ed0/32.png) [@thepianocian](https://discourse.nodered.org/u/thepianocian)\
**Post date:** [30 October 2020 09:15 UTC](https://discourse.nodered.org/t/i-can-inject-video-into-template-but-cant-do-it-with-a-button/35062/5 "2020-10-30T09:15:48Z")

</div>

Oh my gosh....

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

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [13 November 2020 09:16 UTC](https://discourse.nodered.org/t/i-can-inject-video-into-template-but-cant-do-it-with-a-button/35062/6 "2020-11-13T09:16:02Z")

</div>

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