Mp4 or gif in Dashboard

Dashboard
1

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

2

Hey @Tobi,
Did you have a look already at announce-node-red-contrib-ui-media already?
Bart

1 Like
3

Tobi (@Tobi ),

I haven't used that node yet, but from the source code it seems that it already offers something alike:

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

4

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.

5

Hi Tobi,

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

  • Here 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:
    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.

Good luck !

6

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

7

Hey Tobi,
Seems I have already written something similar in the past.
OMG, completely forgotten :roll_eyes:
That might be a better starting point for you ...

8

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:


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

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