# Mp4 or gif in Dashboard

**URL:** <https://discourse.nodered.org/t/mp4-or-gif-in-dashboard/8277>\
**Category:** Dashboard\
**Created:** [22 February 2019 16:28 UTC](https://discourse.nodered.org/t/mp4-or-gif-in-dashboard/8277 "2019-02-22T16:28:42Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Tobi](https://avatars.discourse-cdn.com/v4/letter/t/b9e5f3/32.png) [@Tobi](https://discourse.nodered.org/u/Tobi)\
**Post date:** [22 February 2019 16:28 UTC](https://discourse.nodered.org/t/mp4-or-gif-in-dashboard/8277/1 "2019-02-22T16:28:42Z")

</div>

Hi everybody,

I want to play an mp4 file in the dashboard.  
I realized that with the ui-template and the

`<viedeo>`-Tag.  
Now I want to stop the video depending on the payload and continue.

Something like that:

if(payload=="start") --\> video is started  
if(payload=="stop") --\> video is stopped  
if(payload=="continue") --\> video is continued

Can somebody help me with the reassignment?

Tobi

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [22 February 2019 18:42 UTC](https://discourse.nodered.org/t/mp4-or-gif-in-dashboard/8277/2 "2019-02-22T18:42:43Z")

</div>

Hey @Tobi,  
Did you have a look already at [announce-node-red-contrib-ui-media](https://discourse.nodered.org/t/announce-node-red-contrib-ui-media/7669?u=bartbutenaers) already?  
Bart

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [22 February 2019 21:10 UTC](https://discourse.nodered.org/t/mp4-or-gif-in-dashboard/8277/3 "2019-02-22T21:10:13Z")

</div>

Tobi (@Tobi ),

I haven't used that node yet, but from the [source code](https://github.com/netsmarttech/node-red-contrib-ui-media/blob/master/ui_media.html#L740) it seems that it already offers something alike:

```auto
Is possible to play or pause a video by msg.play...

```

And if it doesn't support it yet, it would be nice if you could ask the author to implement it. That way other users can benefit from your adventure ...

---

<div class="post-metadata">

**Author:** ![Tobi](https://avatars.discourse-cdn.com/v4/letter/t/b9e5f3/32.png) [@Tobi](https://discourse.nodered.org/u/Tobi)\
**Post date:** [23 February 2019 08:47 UTC](https://discourse.nodered.org/t/mp4-or-gif-in-dashboard/8277/4 "2019-02-23T08:47:57Z")

</div>

Hey Barth,

I will try it with ui-media node.  
I want the video as background over the full screen and therefore it is very easy with the ui-template node. But my HTML and CSS skills are not good enough to stop and continue the video with the payload.

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [23 February 2019 09:27 UTC](https://discourse.nodered.org/t/mp4-or-gif-in-dashboard/8277/5 "2019-02-23T09:27:59Z")

</div>

Hi Tobi,

The sun is shining too much, to sit the whole day behind my computer 😉  
But here a few links to get you started:

- [Here](https://flows.nodered.org/flow/2f1aaf0635f9bf23207152682323240a) is explained how to watch an incoming message in your template. You could also watch the entire message if you are not only interested in the payload, but e.g. in a msg.play field or whatever:

```auto
scope.$watch('msg', function(msg) {
         // Here you can read e.g. your msg.payload
});

```

- As soon as a message arrives in that code snippet, you need to get there a reference to your 'video' element (i.e. to the video tag). Then you can pause/resume/... that video. You can find javascript examples for that all over the internet. E.g. [here](https://edutechwiki.unige.ch/en/HTML5_video_and_JavaScript).

Good luck !

---

<div class="post-metadata">

**Author:** ![Tobi](https://avatars.discourse-cdn.com/v4/letter/t/b9e5f3/32.png) [@Tobi](https://discourse.nodered.org/u/Tobi)\
**Post date:** [23 February 2019 16:57 UTC](https://discourse.nodered.org/t/mp4-or-gif-in-dashboard/8277/6 "2019-02-23T16:57:35Z")

</div>

I tried this code but the video didn´t start

`[{"id":"a97addea.1535f","type":"ui_template","z":"9c3b0dac.fd08d","group":"40aee7a2.a6f0f8","name":"","order":1,"width":"6","height":"12","format":"<!-- Video -->\n<video id=\"myVideo\">\n <source src=\"http://tecfa.unige.ch/guides/html/html5-video/videos/state-of-wikipedia-480x272.ogv\">\n <source src=\"http://tecfa.unige.ch/guides/html/html5-video/videos/state-of-wikipedia-480x272.mp4\">\n <source src=\"http://tecfa.unige.ch/guides/html/html5-video/videos/state-of-wikipedia-480x272.webm\">\n</video>\n<hr>\n<!-- Boutons -->\n<button id=\"playBtn\">Play</button> <button id=\"pauseBtn\">Pause</button> <button id=\"stopBtn\">Stop</button>\n\n<style>\nvar myVideo = document.getElementById(\"myVideo\");\nvar playBtn = document.getElementById(\"playBtn\");\nvar pauseBtn = document.getElementById(\"pauseBtn\");\nvar stopBtn = document.getElementById(\"stopBtn\");\n\n\nplayBtn.onclick = function () {\n myVideo.play();\n}\n\n\npauseBtn.onclick = function () {\n myVideo.pause();\n}\n \nstopBtn.onclick = function () {\n myVideo.pause();\n myVideo.currentTime = 0;\n}\n\n</style>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":136.10000610351562,"y":449.20000648498535,"wires":[[]]},{"id":"40aee7a2.a6f0f8","type":"ui_group","z":"","name":"Default","tab":"7df4c50f.4f54dc","disp":true,"width":"6","collapse":false},{"id":"7df4c50f.4f54dc","type":"ui_tab","z":"","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]`

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [23 February 2019 19:55 UTC](https://discourse.nodered.org/t/mp4-or-gif-in-dashboard/8277/7 "2019-02-23T19:55:55Z")

</div>

> [@BartButenaers](#):
>
> scope.$watch('msg', function(msg) { // Here you can read e.g. your msg.payload });

Hey Tobi,  
Seems I have already written something [similar](https://discourse.nodered.org/t/view-video-file-in-ui/) in the past.  
OMG, completely forgotten 🙄  
That might be a better starting point for you ...

---

<div class="post-metadata">

**Author:** ![Tobi](https://avatars.discourse-cdn.com/v4/letter/t/b9e5f3/32.png) [@Tobi](https://discourse.nodered.org/u/Tobi)\
**Post date:** [1 March 2019 14:19 UTC](https://discourse.nodered.org/t/mp4-or-gif-in-dashboard/8277/8 "2019-03-01T14:19:55Z")

</div>

hey @BartButenaers

I am now able to start and stop the video depending on the payload. Now I want to set it as background video - is there a way?

for an image as background pic i use this code:

```auto

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

```

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [1 March 2019 15:23 UTC](https://discourse.nodered.org/t/mp4-or-gif-in-dashboard/8277/9 "2019-03-01T15:23:38Z")

</div>

Hey Tobi,  
I'm only using CSS from time to time, so unfortunately I won't be able to help you with this.  
Sorry ...  
Bart