Ui control not work when showing video

funhall · 4 August 2021 10:52

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

I have made a little video to show the problem

[{"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}]

Gunner · 4 August 2021 19:19

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

Gunner · 4 August 2021 20:00

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

[{"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}]

funhall · 4 August 2021 21:17

Are you using rpi and hdmi to a screen??

funhall · 4 August 2021 21:20

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

Gunner · 4 August 2021 21:24

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 )

funhall · 4 August 2021 21:45

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

Gunner · 4 August 2021 21:55

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.

[{"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}]

funhall · 6 August 2021 12:48

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

Gunner · 6 August 2021 18:15

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

But manually, via the right-click controls

system · 5 September 2021 18:16

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