# Ui control not work when showing video

**URL:** <https://discourse.nodered.org/t/ui-control-not-work-when-showing-video/49315>\
**Category:** Dashboard\
**Created:** [4 August 2021 10:52 UTC](https://discourse.nodered.org/t/ui-control-not-work-when-showing-video/49315 "2021-08-04T10:52:12Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![funhall](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/funhall/32/36062_2.png) [@funhall](https://discourse.nodered.org/u/funhall)\
**Post date:** [4 August 2021 10:52 UTC](https://discourse.nodered.org/t/ui-control-not-work-when-showing-video/49315/1 "2021-08-04T10:52:12Z")

</div>

Everytime a start this video it only show first time on the screen on the HDMI output. After first time it only shows when i open a new dasbord.  
I hope there is a solution for this. Ask if you need more information.  
Tanks in advance  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/4/f4402476ff61e761245a000955bf2ab150eec4c8.png)

I have made a little video to show the problem

> **[Dashboard issue](https://screencast-o-matic.com/watch/crjfXuVjfi7)**

```auto
[{"id":"34ebe5b1.ffe0ca","type":"inject","z":"5b3651b.92335b","g":"6a6e7817.a23de8","name":"Show first stream","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"https://storage.cloud.google.com/worst_nightmare/video.mp4","payloadType":"str","x":2580,"y":1720,"wires":[["ba32ad90.09ccd"]]},{"id":"ba32ad90.09ccd","type":"ui_template","z":"5b3651b.92335b","g":"6a6e7817.a23de8","group":"1add6f18.191f41","name":"Vid_screen","order":1,"width":21,"height":18,"format":"<div>\n <video id=\"video\" width=\"100%\" heigth=\"100%\"></video>\n</div>\n\n<script> \n (function(scope) {\n // Watch for messages being send to this template node\n scope.$watch('msg', function (msg) { \n if (msg) {\n\n var video = document.getElementById('video');\n video.src = msg.payload;\n video.play();\n } \n }); \n })(scope); \n</script>\n\n\n\n","storeOutMessages":false,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":2810,"y":1660,"wires":[["cb91dcd4.f7b0f"]]},{"id":"1add6f18.191f41","type":"ui_group","name":"Start video","tab":"bff636ce.5bde08","order":3,"disp":false,"width":"26","collapse":false},{"id":"bff636ce.5bde08","type":"ui_tab","name":"Escaperoom Viborg - Your Worst Nightmare","icon":"dashboard","order":2,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)\
**Post date:** [4 August 2021 19:19 UTC](https://discourse.nodered.org/t/ui-control-not-work-when-showing-video/49315/2 "2021-08-04T19:19:02Z")

</div>

Your video link (in the `inject` node) didn't work for me (_nothing happens in dashboard, Forbidden Error 403 when testing with browser_).

But with [another one](http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4) I tried, everything works just fine.

Right clicking on video brings up controls and I can play, pause, scroll through the movie, leave the tab and return starts the movie again, etc.

---

<div class="post-metadata">

**Author:** ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)\
**Post date:** [4 August 2021 20:00 UTC](https://discourse.nodered.org/t/ui-control-not-work-when-showing-video/49315/3 "2021-08-04T20:00:29Z")

</div>

So far no issues that I have found... but I went a bit further and have multi videos running. Fun, if hard on the ears listening to all four audio tracks 😛

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/f/6f79dc10dc871a452f593770af23a1325855a124.jpeg)

```auto
[{"id":"ef43236e7e19eab5","type":"tab","label":"Flow 2","disabled":false,"info":""},{"id":"34ebe5b1.ffe0ca","type":"inject","z":"ef43236e7e19eab5","name":"Start Streams","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payloadType":"date","x":410,"y":320,"wires":[["2caf0d1f0b97a4b1","f3974aa91ca73ccc","7b44ef2ce3352db2","7c1a4134b2d3a215"]]},{"id":"ba32ad90.09ccd","type":"ui_template","z":"ef43236e7e19eab5","group":"0f543f3af487dbc2","name":"Vid_screen_1","order":1,"width":8,"height":4,"format":"<div>\n <video id=\"video1\" width=\"100%\" heigth=\"100%\"></video>\n</div>\n\n<script> \n (function(scope) {\n // Watch for messages being send to this template node\n scope.$watch('msg', function (msg) { \n if (msg) {\n\n var video1 = document.getElementById('video1');\n video1.src = msg.payload;\n video1.play();\n } \n }); \n })(scope); \n</script>\n\n\n\n","storeOutMessages":false,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":800,"y":260,"wires":[[]]},{"id":"402b76f2780df30e","type":"ui_template","z":"ef43236e7e19eab5","group":"1add6f18.191f41","name":"Vid_screen_2","order":1,"width":8,"height":4,"format":"<div>\n <video id=\"video2\" width=\"100%\" heigth=\"100%\"></video>\n</div>\n\n<script> \n (function(scope) {\n // Watch for messages being send to this template node\n scope.$watch('msg', function (msg) { \n if (msg) {\n\n var video2 = document.getElementById('video2');\n video2.src = msg.payload;\n video2.play();\n } \n }); \n })(scope); \n</script>\n\n\n\n","storeOutMessages":false,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":800,"y":300,"wires":[[]]},{"id":"f3974aa91ca73ccc","type":"function","z":"ef43236e7e19eab5","name":"","func":"msg.payload = \"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/SubaruOutbackOnStreetAndDirt.mp4\"\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":620,"y":300,"wires":[["402b76f2780df30e"]]},{"id":"2caf0d1f0b97a4b1","type":"function","z":"ef43236e7e19eab5","name":"","func":"msg.payload = \"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4\"\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":620,"y":260,"wires":[["ba32ad90.09ccd"]]},{"id":"fbe4857646afebc2","type":"ui_template","z":"ef43236e7e19eab5","group":"0436fb6b71c7e33a","name":"Vid_screen_3","order":1,"width":8,"height":4,"format":"<div>\n <video id=\"video3\" width=\"100%\" heigth=\"100%\"></video>\n</div>\n\n<script> \n (function(scope) {\n // Watch for messages being send to this template node\n scope.$watch('msg', function (msg) { \n if (msg) {\n\n var video3 = document.getElementById('video3');\n video3.src = msg.payload;\n video3.play();\n } \n }); \n })(scope); \n</script>\n\n\n\n","storeOutMessages":false,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":800,"y":340,"wires":[[]]},{"id":"7b44ef2ce3352db2","type":"function","z":"ef43236e7e19eab5","name":"","func":"msg.payload = \"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4\"\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":620,"y":340,"wires":[["fbe4857646afebc2"]]},{"id":"1d682a1020aeb471","type":"ui_template","z":"ef43236e7e19eab5","group":"58ab9f631d25d819","name":"Vid_screen_3","order":1,"width":8,"height":4,"format":"<div>\n <video id=\"video4\" width=\"100%\" heigth=\"100%\"></video>\n</div>\n\n<script> \n (function(scope) {\n // Watch for messages being send to this template node\n scope.$watch('msg', function (msg) { \n if (msg) {\n\n var video4 = document.getElementById('video4');\n video4.src = msg.payload;\n video4.play();\n } \n }); \n })(scope); \n</script>\n\n\n\n","storeOutMessages":false,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":800,"y":380,"wires":[[]]},{"id":"7c1a4134b2d3a215","type":"function","z":"ef43236e7e19eab5","name":"","func":"msg.payload = \"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4\"\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":620,"y":380,"wires":[["1d682a1020aeb471"]]},{"id":"0f543f3af487dbc2","type":"ui_group","name":"1st Video","tab":"bff636ce.5bde08","order":2,"disp":true,"width":8,"collapse":false},{"id":"1add6f18.191f41","type":"ui_group","name":"2nd Video","tab":"bff636ce.5bde08","order":3,"disp":true,"width":8,"collapse":false},{"id":"0436fb6b71c7e33a","type":"ui_group","name":"3rd Video","tab":"bff636ce.5bde08","order":3,"disp":true,"width":8,"collapse":false},{"id":"58ab9f631d25d819","type":"ui_group","name":"4th Video","tab":"bff636ce.5bde08","order":4,"disp":true,"width":8,"collapse":false},{"id":"bff636ce.5bde08","type":"ui_tab","name":"Movie link","icon":"dashboard","order":2,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![funhall](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/funhall/32/36062_2.png) [@funhall](https://discourse.nodered.org/u/funhall)\
**Post date:** [4 August 2021 21:17 UTC](https://discourse.nodered.org/t/ui-control-not-work-when-showing-video/49315/4 "2021-08-04T21:17:05Z")

</div>

Are you using rpi and hdmi to a screen??

---

<div class="post-metadata">

**Author:** ![funhall](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/funhall/32/36062_2.png) [@funhall](https://discourse.nodered.org/u/funhall)\
**Post date:** [4 August 2021 21:20 UTC](https://discourse.nodered.org/t/ui-control-not-work-when-showing-video/49315/5 "2021-08-04T21:20:01Z")

</div>

Because the video is on My google cloud. Maybe that’s why I’d don’t work.  
Are you usin rip with tv scene on hdmi??

---

<div class="post-metadata">

**Author:** ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)\
**Post date:** [4 August 2021 21:24 UTC](https://discourse.nodered.org/t/ui-control-not-work-when-showing-video/49315/6 "2021-08-04T21:24:04Z")

</div>

I was just testing your exported flow on my dashboard (on my PC) but my Node-Red is running on my RPi3, but not connected to any HDMI. I use VNC.

Connecting my RPi3 to a screen would not make any difference as the nodes are feeding the dashboard (unless I run the dashboard also on the RPi's browser, but then that may just overload the poor thing 😛 )

---

<div class="post-metadata">

**Author:** ![funhall](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/funhall/32/36062_2.png) [@funhall](https://discourse.nodered.org/u/funhall)\
**Post date:** [4 August 2021 21:45 UTC](https://discourse.nodered.org/t/ui-control-not-work-when-showing-video/49315/7 "2021-08-04T21:45:27Z")

</div>

Have you seen the video.  
Are you seeing it in browser like I am on the video?

---

<div class="post-metadata">

**Author:** ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)\
**Post date:** [4 August 2021 21:55 UTC](https://discourse.nodered.org/t/ui-control-not-work-when-showing-video/49315/8 "2021-08-04T21:55:31Z")

</div>

OK, I went through your video clip yet again... not the best way of describing the issue 🤔 but I now see you seem to be trying to display the same clip from the same source node to multiple "dashboard users".

I was able to do that, at least with my posted example... using separate browser windows, seperate PCs and even the RPi browser, just a bit slowly there.

However, I did find it better to have a separate node for the URL and include an inject or "start" button for the dashboard for "individual user" control of starting the videos in their browsers.

```auto
[{"id":"ba32ad90.09ccd","type":"ui_template","z":"ef43236e7e19eab5","group":"0f543f3af487dbc2","name":"Vid_screen_1","order":1,"width":8,"height":4,"format":"<div>\n <video id=\"video1\" width=\"100%\" heigth=\"100%\"></video>\n</div>\n\n<script> \n (function(scope) {\n // Watch for messages being send to this template node\n scope.$watch('msg', function (msg) { \n if (msg) {\n\n var video1 = document.getElementById('video1');\n video1.src = msg.payload;\n video1.play();\n } \n }); \n })(scope); \n</script>\n\n\n\n","storeOutMessages":false,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":700,"y":260,"wires":[[]]},{"id":"402b76f2780df30e","type":"ui_template","z":"ef43236e7e19eab5","group":"1add6f18.191f41","name":"Vid_screen_2","order":1,"width":8,"height":4,"format":"<div>\n <video id=\"video2\" width=\"100%\" heigth=\"100%\"></video>\n</div>\n\n<script> \n (function(scope) {\n // Watch for messages being send to this template node\n scope.$watch('msg', function (msg) { \n if (msg) {\n\n var video2 = document.getElementById('video2');\n video2.src = msg.payload;\n video2.play();\n } \n }); \n })(scope); \n</script>\n\n\n\n","storeOutMessages":false,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":700,"y":300,"wires":[[]]},{"id":"f3974aa91ca73ccc","type":"function","z":"ef43236e7e19eab5","name":"","func":"msg.payload = \"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/SubaruOutbackOnStreetAndDirt.mp4\"\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":520,"y":300,"wires":[["402b76f2780df30e"]]},{"id":"2caf0d1f0b97a4b1","type":"function","z":"ef43236e7e19eab5","name":"","func":"msg.payload = \"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4\"\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":520,"y":260,"wires":[["ba32ad90.09ccd"]]},{"id":"fbe4857646afebc2","type":"ui_template","z":"ef43236e7e19eab5","group":"0436fb6b71c7e33a","name":"Vid_screen_3","order":1,"width":8,"height":4,"format":"<div>\n <video id=\"video3\" width=\"100%\" heigth=\"100%\"></video>\n</div>\n\n<script> \n (function(scope) {\n // Watch for messages being send to this template node\n scope.$watch('msg', function (msg) { \n if (msg) {\n\n var video3 = document.getElementById('video3');\n video3.src = msg.payload;\n video3.play();\n } \n }); \n })(scope); \n</script>\n\n\n\n","storeOutMessages":false,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":700,"y":340,"wires":[[]]},{"id":"7b44ef2ce3352db2","type":"function","z":"ef43236e7e19eab5","name":"","func":"msg.payload = \"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4\"\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":520,"y":340,"wires":[["fbe4857646afebc2"]]},{"id":"1d682a1020aeb471","type":"ui_template","z":"ef43236e7e19eab5","group":"58ab9f631d25d819","name":"Vid_screen_3","order":1,"width":8,"height":4,"format":"<div>\n <video id=\"video4\" width=\"100%\" heigth=\"100%\"></video>\n</div>\n\n<script> \n (function(scope) {\n // Watch for messages being send to this template node\n scope.$watch('msg', function (msg) { \n if (msg) {\n\n var video4 = document.getElementById('video4');\n video4.src = msg.payload;\n video4.play();\n } \n }); \n })(scope); \n</script>\n\n\n\n","storeOutMessages":false,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":700,"y":380,"wires":[[]]},{"id":"7c1a4134b2d3a215","type":"function","z":"ef43236e7e19eab5","name":"","func":"msg.payload = \"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4\"\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":520,"y":380,"wires":[["1d682a1020aeb471"]]},{"id":"b91f4371f84bbfe8","type":"ui_button","z":"ef43236e7e19eab5","name":"","group":"0f543f3af487dbc2","order":0,"width":0,"height":0,"passthru":false,"label":"Start","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":370,"y":260,"wires":[["2caf0d1f0b97a4b1"]]},{"id":"b6e78d551ec45606","type":"ui_button","z":"ef43236e7e19eab5","name":"","group":"0436fb6b71c7e33a","order":0,"width":0,"height":0,"passthru":false,"label":"Start","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":370,"y":340,"wires":[["7b44ef2ce3352db2"]]},{"id":"44a8db67d3a4b226","type":"ui_button","z":"ef43236e7e19eab5","name":"","group":"1add6f18.191f41","order":0,"width":0,"height":0,"passthru":false,"label":"Start","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":370,"y":300,"wires":[["f3974aa91ca73ccc"]]},{"id":"76f2281b369ec8b3","type":"ui_button","z":"ef43236e7e19eab5","name":"","group":"58ab9f631d25d819","order":0,"width":0,"height":0,"passthru":false,"label":"Start","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":370,"y":380,"wires":[["7c1a4134b2d3a215"]]},{"id":"0f543f3af487dbc2","type":"ui_group","name":"1st Video","tab":"bff636ce.5bde08","order":2,"disp":true,"width":8,"collapse":false},{"id":"1add6f18.191f41","type":"ui_group","name":"2nd Video","tab":"bff636ce.5bde08","order":3,"disp":true,"width":8,"collapse":false},{"id":"0436fb6b71c7e33a","type":"ui_group","name":"3rd Video","tab":"bff636ce.5bde08","order":3,"disp":true,"width":8,"collapse":false},{"id":"58ab9f631d25d819","type":"ui_group","name":"4th Video","tab":"bff636ce.5bde08","order":4,"disp":true,"width":8,"collapse":false},{"id":"bff636ce.5bde08","type":"ui_tab","name":"Movie link","icon":"dashboard","order":2,"disabled":false,"hidden":false}]

```

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/5/25e6ab57214c7d82620c7dfe1c8d54e3e01af884.png)

---

<div class="post-metadata">

**Author:** ![funhall](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/funhall/32/36062_2.png) [@funhall](https://discourse.nodered.org/u/funhall)\
**Post date:** [6 August 2021 12:48 UTC](https://discourse.nodered.org/t/ui-control-not-work-when-showing-video/49315/10 "2021-08-06T12:48:18Z")

</div>

Finally I got it to show the video.  
Thanks a lot.  
But how do we control the volume?  
Do you have any idea of that???

---

<div class="post-metadata">

**Author:** ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)\
**Post date:** [6 August 2021 18:15 UTC](https://discourse.nodered.org/t/ui-control-not-work-when-showing-video/49315/11 "2021-08-06T18:15:57Z")

</div>

> [@funhall](#):
>
> But how do we control the volume?  
> Do you have any idea of that???

Programmatically... no idea if even possible via NR.

But manually, via the right-click controls

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/0/50670b39529799c8c5810f7ccd75426905b88983.jpeg)

---

<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:** [5 September 2021 18:16 UTC](https://discourse.nodered.org/t/ui-control-not-work-when-showing-video/49315/12 "2021-09-05T18:16:45Z")

</div>

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