Play video on click on button

Dear Concern,

I have ui-media where I have added video on dashboard. I want that video to have no controls and run on start but ( autoplay is not working). I want to use a button from dashboard to start the video instead of controls on the video.
Can anyone help me on this matter.
Video 1: video with the controls.
video 2: does no have any controls but run on start has been enabled which is not working on dashboard
Screenshot 2023-07-18 120427

Please note that autoplay in the browser only works if audio is muted

Here is a simple example using a public video source (RedBull TV) you can try and play with, it might give you some ideas

Since it is using RTSP source, you need to install nodes created and shared by @kevinGodell

See a demo
https://drive.google.com/file/d/1WbAbFoJgS4TipXSyMhKKZJLHhTyerIAb/view?usp=sharing


[
    {
        "id": "73f9f5583289fcdb",
        "type": "inject",
        "z": "ef880aa11015039b",
        "name": "stop default",
        "props": [
            {
                "p": "action",
                "v": "{\"command\":\"stop\"}",
                "vt": "json"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "x": 150,
        "y": 120,
        "wires": [
            [
                "c26d3d93cf6ed2fd"
            ]
        ]
    },
    {
        "id": "ac63916c39321c68",
        "type": "mp4frag",
        "z": "ef880aa11015039b",
        "name": "",
        "outputs": 2,
        "basePath": "237",
        "serveHttp": "true",
        "serveIo": "true",
        "hlsPlaylistSize": "10",
        "hlsPlaylistExtra": "5",
        "autoStart": "false",
        "preBuffer": "3",
        "timeLimit": "600000",
        "repeated": "true",
        "statusData": "playlist",
        "x": 610,
        "y": 100,
        "wires": [
            [
                "d1b28c075e82f7a8"
            ],
            []
        ]
    },
    {
        "id": "d1af2aef282c91aa",
        "type": "inject",
        "z": "ef880aa11015039b",
        "name": "start default",
        "props": [
            {
                "p": "action",
                "v": "{\"command\":\"start\"}",
                "vt": "json"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": "1",
        "topic": "",
        "x": 150,
        "y": 80,
        "wires": [
            [
                "c26d3d93cf6ed2fd"
            ]
        ]
    },
    {
        "id": "9e9240d71abd7eae",
        "type": "comment",
        "z": "ef880aa11015039b",
        "name": "Video sources",
        "info": "",
        "x": 150,
        "y": 40,
        "wires": []
    },
    {
        "id": "494422e7aef3d4fa",
        "type": "ui_template",
        "z": "ef880aa11015039b",
        "group": "16030ced.45add3",
        "name": "Main Display",
        "order": 3,
        "width": 14,
        "height": 8,
        "format": "<script src=\"//cdn.jsdelivr.net/npm/hls.js@latest\"></script>\n\n<script type=\"text/javascript\">\nhls_m = undefined;\n\n(function(scope) {\n    scope.$watch('msg', function(msg) {\n        if (msg.url.match('reset')) {\n            hls_m.destroy();\n        }\n        if (msg.url.match('.m3u8')) {\n            if(hls_m!=undefined){hls_m.destroy();}\n            $(\"#hls_\"+scope.$id).hide();\n            $(\"#saf_\"+scope.$id).hide();\n            if(isSafari()){\n                $(\"#saf_\"+scope.$id).show();\n            }\n            if(!isSafari()){\n                $(\"#hls_\"+scope.$id).show();\n                hls_m = new Hls();\n                if (Hls.isSupported()) {\n                    let z = $(\"#hls_\"+scope.$id)[0];\n                    // bind them together\n                    hls_m.attachMedia(z);\n                    hls_m.on(Hls.Events.MEDIA_ATTACHED, function () {\n                      hls_m.loadSource(msg.url);\n                      hls_m.on(Hls.Events.MANIFEST_PARSED, function () {\n                        z.play();  \n                      });\n                    });\n                }\n            }\n        }\n    });\n})(scope);\n\nfunction isSafari() {\n    if (/apple/i.test(navigator.vendor)) {\n        //alert(\"Safari\");\n        return true;\n    }else{\n        return false;\n    } \n}\n\nthis.scope.action = function(event) { return event; }\n\nthis.scope.send({payload:'do_init'});\n\n</script>\n\n<div>\n<center>\n    <table>\n        <tr>\n    \t\t<td style=\"text-align: center\">\n    \t\t<video autoplay muted id=\"{{'hls_'+$id}}\" width='320px' height='240px' type=\"video/mp4\"></video>\n    \t\t</td>\n        </tr>\n    </table>\n</center>\n</div>\n\n<div id=\"{{'saf_'+$id}}\">\n<center>\n    <table>\n        <tr>\n    \t\t<td style=\"text-align: center\">\n    \t\t<video autoplay muted controls src={{msg.url}} width='320px' height='240px' type=\"video/mp4\"></video>\n    \t\t</td>\n        </tr>\n    </table>\n</center>\n</div>\n\n",
        "storeOutMessages": false,
        "fwdInMessages": false,
        "resendOnRefresh": false,
        "templateScope": "local",
        "className": "",
        "x": 990,
        "y": 220,
        "wires": [
            []
        ]
    },
    {
        "id": "c26d3d93cf6ed2fd",
        "type": "ffmpeg",
        "z": "ef880aa11015039b",
        "name": "",
        "outputs": 2,
        "cmdPath": "ffmpeg",
        "cmdArgs": "[\"-loglevel\",\"error\",\"-nostats\",\"-f\",\"hls\",\"-http_multiple\",\"1\",\"-timeout\",\"1\",\"-re\",\"-i\",\"http://rbmn-live.akamaized.net/hls/live/590964/BoRB-AT/master_1660.m3u8\",\"-c:v\",\"copy\",\"-c:a\",\"aac\",\"-f\",\"mp4\",\"-movflags\",\"+frag_keyframe+empty_moov+default_base_moof\",\"pipe:1\"]",
        "cmdOutputs": 1,
        "killSignal": "SIGTERM",
        "x": 380,
        "y": 100,
        "wires": [
            [
                "ac63916c39321c68"
            ],
            [
                "ac63916c39321c68"
            ]
        ]
    },
    {
        "id": "fc61d60a332aecb2",
        "type": "ui_button",
        "z": "ef880aa11015039b",
        "name": "Play",
        "group": "16030ced.45add3",
        "order": 1,
        "width": "7",
        "height": "1",
        "passthru": false,
        "label": "Play",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "payload": "play",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 150,
        "y": 190,
        "wires": [
            [
                "c74ee7b496e6e23e"
            ]
        ]
    },
    {
        "id": "e34d9d9a23dca2f1",
        "type": "change",
        "z": "ef880aa11015039b",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "url",
                "pt": "msg",
                "to": "payload.hlsPlaylist",
                "tot": "msg"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 790,
        "y": 190,
        "wires": [
            [
                "494422e7aef3d4fa"
            ]
        ]
    },
    {
        "id": "d1b28c075e82f7a8",
        "type": "switch",
        "z": "ef880aa11015039b",
        "name": "",
        "property": "status",
        "propertyType": "msg",
        "rules": [
            {
                "t": "eq",
                "v": "playlist",
                "vt": "str"
            },
            {
                "t": "eq",
                "v": "reset",
                "vt": "str"
            }
        ],
        "checkall": "true",
        "repair": false,
        "outputs": 2,
        "x": 610,
        "y": 220,
        "wires": [
            [
                "e34d9d9a23dca2f1"
            ],
            [
                "178d79c8cd19a8aa"
            ]
        ]
    },
    {
        "id": "178d79c8cd19a8aa",
        "type": "change",
        "z": "ef880aa11015039b",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "url",
                "pt": "msg",
                "to": "reset",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 790,
        "y": 250,
        "wires": [
            [
                "494422e7aef3d4fa"
            ]
        ]
    },
    {
        "id": "1065346a6ad8d462",
        "type": "ui_button",
        "z": "ef880aa11015039b",
        "name": "Stop",
        "group": "16030ced.45add3",
        "order": 2,
        "width": "7",
        "height": "1",
        "passthru": false,
        "label": "Stop",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "payload": "stop",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 150,
        "y": 250,
        "wires": [
            [
                "9c1793789876ecb0"
            ]
        ]
    },
    {
        "id": "c74ee7b496e6e23e",
        "type": "change",
        "z": "ef880aa11015039b",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "action",
                "pt": "msg",
                "to": "{\"command\":\"start\"}",
                "tot": "json"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 380,
        "y": 190,
        "wires": [
            [
                "c26d3d93cf6ed2fd"
            ]
        ]
    },
    {
        "id": "9c1793789876ecb0",
        "type": "change",
        "z": "ef880aa11015039b",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "action",
                "pt": "msg",
                "to": "{\"command\":\"stop\"}",
                "tot": "json"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 380,
        "y": 250,
        "wires": [
            [
                "c26d3d93cf6ed2fd"
            ]
        ]
    },
    {
        "id": "16030ced.45add3",
        "type": "ui_group",
        "name": "Test",
        "tab": "aed64a14.9adfe8",
        "order": 1,
        "disp": true,
        "width": "14",
        "collapse": false
    },
    {
        "id": "aed64a14.9adfe8",
        "type": "ui_tab",
        "name": "Test",
        "icon": "dashboard",
        "disabled": false,
        "hidden": false
    }
]

Just an updated version, nowlooks better when no video is played. Works similar in both Chrome and Safari


[
    {
        "id": "73f9f5583289fcdb",
        "type": "inject",
        "z": "ef880aa11015039b",
        "name": "stop default",
        "props": [
            {
                "p": "action",
                "v": "{\"command\":\"stop\"}",
                "vt": "json"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "x": 150,
        "y": 120,
        "wires": [
            [
                "c26d3d93cf6ed2fd"
            ]
        ]
    },
    {
        "id": "ac63916c39321c68",
        "type": "mp4frag",
        "z": "ef880aa11015039b",
        "name": "",
        "outputs": 2,
        "basePath": "237",
        "serveHttp": "true",
        "serveIo": "true",
        "hlsPlaylistSize": "10",
        "hlsPlaylistExtra": "5",
        "autoStart": "false",
        "preBuffer": "3",
        "timeLimit": "600000",
        "repeated": "true",
        "statusData": "playlist",
        "x": 610,
        "y": 100,
        "wires": [
            [
                "d1b28c075e82f7a8"
            ],
            []
        ]
    },
    {
        "id": "d1af2aef282c91aa",
        "type": "inject",
        "z": "ef880aa11015039b",
        "name": "start default",
        "props": [
            {
                "p": "action",
                "v": "{\"command\":\"start\"}",
                "vt": "json"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": "1",
        "topic": "",
        "x": 150,
        "y": 80,
        "wires": [
            [
                "c26d3d93cf6ed2fd"
            ]
        ]
    },
    {
        "id": "9e9240d71abd7eae",
        "type": "comment",
        "z": "ef880aa11015039b",
        "name": "Video sources",
        "info": "",
        "x": 150,
        "y": 40,
        "wires": []
    },
    {
        "id": "494422e7aef3d4fa",
        "type": "ui_template",
        "z": "ef880aa11015039b",
        "group": "16030ced.45add3",
        "name": "Main Display",
        "order": 3,
        "width": 14,
        "height": 8,
        "format": "<script src=\"//cdn.jsdelivr.net/npm/hls.js@latest\"></script>\n\n<script type=\"text/javascript\">\nhls_m = undefined;\n\n(function(scope) {\n    scope.$watch('msg', function(msg) {\n        if(hls_m!=undefined){hls_m.destroy();}\n        if (msg.url.match('reset')) {\n            $(\"#hls_\"+scope.$id).hide();\n            $(\"#saf_\"+scope.$id).hide();\n            hls_m.destroy();\n        }\n        if (msg.url.match('.m3u8')) {\n            if(isSafari()){\n                $(\"#saf_\"+scope.$id).show();\n                $(\"#hls_\"+scope.$id).hide();\n            }\n            if(!isSafari()){\n                $(\"#hls_\"+scope.$id).show();\n                $(\"#saf_\"+scope.$id).hide();\n                hls_m = new Hls();\n                if (Hls.isSupported()) {\n                    let z = $(\"#hls_\"+scope.$id)[0];\n                    // bind them together\n                    hls_m.attachMedia(z);\n                    hls_m.on(Hls.Events.MEDIA_ATTACHED, function () {\n                      hls_m.loadSource(msg.url);\n                      hls_m.on(Hls.Events.MANIFEST_PARSED, function () {\n                        z.play();  \n                      });\n                    });\n                }\n            }\n        }\n    });\n})(scope);\n\nfunction isSafari() {\n    if (/apple/i.test(navigator.vendor)) {\n        //alert(\"Safari\");\n        return true;\n    }else{\n        return false;\n    } \n}\n\nthis.scope.action = function(event) { return event; }\n\nthis.scope.send({payload:'do_init'});\n\n</script>\n\n<div>\n<center>\n    <table>\n        <tr>\n    \t\t<td style=\"text-align: center\">\n    \t\t<video autoplay muted id=\"{{'hls_'+$id}}\" width='320px' height='240px' type=\"video/mp4\"></video>\n    \t\t</td>\n        </tr>\n    </table>\n</center>\n</div>\n\n<div id=\"{{'saf_'+$id}}\">\n<center>\n    <table>\n        <tr>\n    \t\t<td style=\"text-align: center\">\n    \t\t<video autoplay muted src={{msg.url}} width='320px' height='240px' type=\"video/mp4\"></video>\n    \t\t</td>\n        </tr>\n    </table>\n</center>\n</div>\n\n",
        "storeOutMessages": false,
        "fwdInMessages": false,
        "resendOnRefresh": false,
        "templateScope": "local",
        "className": "",
        "x": 990,
        "y": 220,
        "wires": [
            [
                "850f517a130740bb",
                "7e6e01e2bdb871a3"
            ]
        ]
    },
    {
        "id": "c26d3d93cf6ed2fd",
        "type": "ffmpeg",
        "z": "ef880aa11015039b",
        "name": "",
        "outputs": 2,
        "cmdPath": "ffmpeg",
        "cmdArgs": "[\"-loglevel\",\"error\",\"-nostats\",\"-f\",\"hls\",\"-http_multiple\",\"1\",\"-timeout\",\"1\",\"-re\",\"-i\",\"http://rbmn-live.akamaized.net/hls/live/590964/BoRB-AT/master_1660.m3u8\",\"-c:v\",\"copy\",\"-c:a\",\"aac\",\"-f\",\"mp4\",\"-movflags\",\"+frag_keyframe+empty_moov+default_base_moof\",\"pipe:1\"]",
        "cmdOutputs": 1,
        "killSignal": "SIGTERM",
        "x": 380,
        "y": 100,
        "wires": [
            [
                "ac63916c39321c68"
            ],
            [
                "ac63916c39321c68"
            ]
        ]
    },
    {
        "id": "fc61d60a332aecb2",
        "type": "ui_button",
        "z": "ef880aa11015039b",
        "name": "Play",
        "group": "16030ced.45add3",
        "order": 1,
        "width": "7",
        "height": "1",
        "passthru": false,
        "label": "Play",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "payload": "play",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 150,
        "y": 190,
        "wires": [
            [
                "c74ee7b496e6e23e"
            ]
        ]
    },
    {
        "id": "e34d9d9a23dca2f1",
        "type": "change",
        "z": "ef880aa11015039b",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "url",
                "pt": "msg",
                "to": "payload.hlsPlaylist",
                "tot": "msg"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 790,
        "y": 190,
        "wires": [
            [
                "494422e7aef3d4fa"
            ]
        ]
    },
    {
        "id": "d1b28c075e82f7a8",
        "type": "switch",
        "z": "ef880aa11015039b",
        "name": "",
        "property": "status",
        "propertyType": "msg",
        "rules": [
            {
                "t": "eq",
                "v": "playlist",
                "vt": "str"
            },
            {
                "t": "eq",
                "v": "reset",
                "vt": "str"
            }
        ],
        "checkall": "true",
        "repair": false,
        "outputs": 2,
        "x": 610,
        "y": 220,
        "wires": [
            [
                "e34d9d9a23dca2f1"
            ],
            [
                "178d79c8cd19a8aa"
            ]
        ]
    },
    {
        "id": "178d79c8cd19a8aa",
        "type": "change",
        "z": "ef880aa11015039b",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "url",
                "pt": "msg",
                "to": "reset",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 790,
        "y": 250,
        "wires": [
            [
                "494422e7aef3d4fa"
            ]
        ]
    },
    {
        "id": "1065346a6ad8d462",
        "type": "ui_button",
        "z": "ef880aa11015039b",
        "name": "Stop",
        "group": "16030ced.45add3",
        "order": 2,
        "width": "7",
        "height": "1",
        "passthru": false,
        "label": "Stop",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "payload": "stop",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 150,
        "y": 250,
        "wires": [
            [
                "9c1793789876ecb0"
            ]
        ]
    },
    {
        "id": "c74ee7b496e6e23e",
        "type": "change",
        "z": "ef880aa11015039b",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "action",
                "pt": "msg",
                "to": "{\"command\":\"start\"}",
                "tot": "json"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 380,
        "y": 190,
        "wires": [
            [
                "c26d3d93cf6ed2fd"
            ]
        ]
    },
    {
        "id": "9c1793789876ecb0",
        "type": "change",
        "z": "ef880aa11015039b",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "action",
                "pt": "msg",
                "to": "{\"command\":\"stop\"}",
                "tot": "json"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 380,
        "y": 250,
        "wires": [
            [
                "c26d3d93cf6ed2fd"
            ]
        ]
    },
    {
        "id": "850f517a130740bb",
        "type": "debug",
        "z": "ef880aa11015039b",
        "name": "debug 35",
        "active": false,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 1180,
        "y": 220,
        "wires": []
    },
    {
        "id": "7e6e01e2bdb871a3",
        "type": "delay",
        "z": "ef880aa11015039b",
        "name": "",
        "pauseType": "delay",
        "timeout": "50",
        "timeoutUnits": "milliseconds",
        "rate": "1",
        "nbRateUnits": "1",
        "rateUnits": "second",
        "randomFirst": "1",
        "randomLast": "5",
        "randomUnits": "seconds",
        "drop": false,
        "allowrate": false,
        "outputs": 1,
        "x": 990,
        "y": 300,
        "wires": [
            [
                "a7306b61b3afc002"
            ]
        ]
    },
    {
        "id": "a7306b61b3afc002",
        "type": "switch",
        "z": "ef880aa11015039b",
        "name": "",
        "property": "payload",
        "propertyType": "msg",
        "rules": [
            {
                "t": "eq",
                "v": "do_init",
                "vt": "str"
            }
        ],
        "checkall": "true",
        "repair": false,
        "outputs": 1,
        "x": 990,
        "y": 380,
        "wires": [
            [
                "178d79c8cd19a8aa"
            ]
        ]
    },
    {
        "id": "16030ced.45add3",
        "type": "ui_group",
        "name": "Test",
        "tab": "aed64a14.9adfe8",
        "order": 1,
        "disp": true,
        "width": "14",
        "collapse": false
    },
    {
        "id": "aed64a14.9adfe8",
        "type": "ui_tab",
        "name": "Test",
        "icon": "dashboard",
        "disabled": false,
        "hidden": false
    }
]

What if I dont want any button for this video to play. I want to have run on start.!!

Run on what start?

You can trigger the flow with any message instead of buttons

I mean to say autostart. As I go into the dashboard. I want to mp4 play automatically. I dont want to have any controls on the mp4. And I have the file locally.I dont want to use URL.

Well, then you have the option to always let the video play or cameras continusly stream. You can just have the streaming going from start of Node-RED. You just have to edit the inject button to inject a start message at start like in the image below

If you are thinking about that video should play when the dashboard gets focus and stops when you leave it, I cannot help, I do not know if there are any messages in Node-RED that can be used for such purpose

Ah, is a local file, then you cannot run streaming all the time. Then I do not know how you can do it

Acutally I am not streaming a live video. It is a recorded MP4 video, which I gonna play on dashboard. Wiith help of UI_template from dashboard. Can I play a video which is stored on desktop.

Well. whatever, different medias require maybe other methods. With the ui_template node you have the possibilty to write your own html & javascript code. Maybe using jQuery is something that can help yoiu on your way

Hey,

Thinks got workout for me..
I downloaded http server , on a command prompt I changed my location to the location where my actual video file (mp4) exist. I started the web server using " http-server -p 8080".
I copied the http link of my video and used it in ui_template of node-red dashboard. This worked our for me in a simple way.
But Thanks Krambriw for instant help. I gonna use this for streaming my live video from cam.

Just another idea & solution. If you have multiple mp4 videos locally stored, like I have, you could consider using the Single File Gallery

EDIT: I serve it using apache running in Debian

Here is an example showing my setup. When you click on a thumbnail, the video opens up and is played in a larger pop-window


1 Like

I am gonna try this... Will this work offline?:thinking:

Offline?
I use it for my locally stored video files and an apache server running in my same local network if that is what you are wondering. There is only a index.php file you need to download, modify and put into the folder where you have the video files. In my case I have them on a share

To get the thumbnails you have to generate them yourself, otherwise you will just see a black frame for each of your video files. My video system is generating video recordings (.mp4) continuosly. Every night, I run a python script that creates those thumbnails. The script uses ffmpeg. My example is below

If you are familiar with Python, this is a no-brainer. You can run it and it will create thumbnails for all your video files (just change the workdir to your needs)

import os
import subprocess
import time

workdir = "/DRIVE/MP4"


def makeThumbNails():
    lst = os.listdir(workdir)
    for f in lst:
        path = os.path.join(workdir, f)
        if os.path.isfile(path) and '.jpg' not in f and '.php' not in f:
            if f+'.jpg' not in lst:
                #print ('not found')
                #print (f)
                #os.system('ffmpeg -hide_banner -loglevel error -i '+path+' -f image2 -vframes 1 '+path+'.jpg ')    
                command = 'ffmpeg -hide_banner -loglevel error -i '+path+' -f image2 -start_number 3 -vframes 1 '+path+'.jpg '    
                process = subprocess.Popen(command, shell=True)
                process.wait()
                print (process.returncode)

makeThumbNails()
1 Like

I have multiple videos now in a single folder. I want 1 video to play at time. As I am sending string data { 1, 2} from a Arduino uno. I want video 1 to play during string 1 , I want video 2 during straing 2. I am stuck in function where

if (msg.payload === "2") {
    msg.ui_control = {"ui_template": {"command": "play" } };
} else{
    msg.ui_control = {"ui_template": {"command": "pause" } };
}
return msg;

code seems to be not working, Any suggestion from your end.

No sorry, I have not used that way to communicate. I have just sent messages directly to the ui_template node to control it

Ok.. I think I figured it out some way by using function node. Thanks alot!!
I want my video to play full screen. instead of going to new tab. Any solution for this.

This is a method I have used to display my video on dashboard.

<div>
    <video id="Video_2"
    class="video-js vjs-default-skin vjs-big-play-centered" width="1280" height="800">
        <source src="URL" type="video/mp4">
      <br>
      <button onclick="playVideo()">Play</button>
    </video>
</div>

<script>
    // Add jQuery code here
  $(function() {
    // Replace "URL_OF_YOUR_VIDEO_FILE" with the actual URL of your video file.
    var videoSrc = "URL";
    
    // Get the video element by its ID
    var videoElement = document.getElementById("Video_2");
    var video = document.getElementById("videoSrc");
    
    // Set the source of the video element
    $(videoElement).attr("src", videoSrc);
    //video.play();
    // Load the video and play it
    videoElement.load();
    videoElement.play();
  });
</script>`

There are several examples on the net for that. Not sure if you now talk about html in general or dashboard specifics. Anyway, here are two, taken from W3Schools nice examples and slightly modified. One is a pure html/javascript file when I hosted it directly, the other is the same code pasted into a ui_template node. Both seems to work fine and gives you the video played in full screen

Hi.... Thanks alot..I referred to all your suggestions. It working fantastically.:blush:

2 Likes

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