# Play video on click on button

**URL:** <https://discourse.nodered.org/t/play-video-on-click-on-button/79894>\
**Category:** Dashboard\
**Tags:** node-red-dashboard\
**Created:** [18 July 2023 04:37 UTC](https://discourse.nodered.org/t/play-video-on-click-on-button/79894 "2023-07-18T04:37:40Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Vaibhavi27](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/vaibhavi27/32/70897_2.png) [@Vaibhavi27](https://discourse.nodered.org/u/Vaibhavi27)\
**Post date:** [18 July 2023 04:37 UTC](https://discourse.nodered.org/t/play-video-on-click-on-button/79894/1 "2023-07-18T04:37:40Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/1/3119e89949a65e7c39c7e92d89804a41191d36eb.jpeg)

---

<div class="post-metadata">

**Author:** ![krambriw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/krambriw/32/5429_2.png) [@krambriw](https://discourse.nodered.org/u/krambriw)\
**Post date:** [18 July 2023 12:44 UTC](https://discourse.nodered.org/t/play-video-on-click-on-button/79894/2 "2023-07-18T12:44:37Z")

</div>

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](https://drive.google.com/file/d/1WbAbFoJgS4TipXSyMhKKZJLHhTyerIAb/view?usp=sharing)

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/2/b2b3aee6fcafa1b1a8a5b007884c38911920a790.png)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/2/a2648bd3cc78daf857485cb271332752936240d5.png)

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

```

---

<div class="post-metadata">

**Author:** ![krambriw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/krambriw/32/5429_2.png) [@krambriw](https://discourse.nodered.org/u/krambriw)\
**Post date:** [20 July 2023 05:46 UTC](https://discourse.nodered.org/t/play-video-on-click-on-button/79894/3 "2023-07-20T05:46:05Z")

</div>

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

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

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

```

---

<div class="post-metadata">

**Author:** ![Vaibhavi27](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/vaibhavi27/32/70897_2.png) [@Vaibhavi27](https://discourse.nodered.org/u/Vaibhavi27)\
**Post date:** [20 July 2023 05:48 UTC](https://discourse.nodered.org/t/play-video-on-click-on-button/79894/4 "2023-07-20T05:48:57Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![krambriw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/krambriw/32/5429_2.png) [@krambriw](https://discourse.nodered.org/u/krambriw)\
**Post date:** [20 July 2023 05:50 UTC](https://discourse.nodered.org/t/play-video-on-click-on-button/79894/5 "2023-07-20T05:50:09Z")

</div>

Run on what start?

You can trigger the flow with any message instead of buttons

---

<div class="post-metadata">

**Author:** ![Vaibhavi27](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/vaibhavi27/32/70897_2.png) [@Vaibhavi27](https://discourse.nodered.org/u/Vaibhavi27)\
**Post date:** [20 July 2023 05:52 UTC](https://discourse.nodered.org/t/play-video-on-click-on-button/79894/6 "2023-07-20T05:52:18Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![krambriw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/krambriw/32/5429_2.png) [@krambriw](https://discourse.nodered.org/u/krambriw)\
**Post date:** [20 July 2023 06:01 UTC](https://discourse.nodered.org/t/play-video-on-click-on-button/79894/7 "2023-07-20T06:01:25Z")

</div>

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

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/5/05da559383c9a91c8756c987b5a5ec6d9dfc3761.png)

---

<div class="post-metadata">

**Author:** ![krambriw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/krambriw/32/5429_2.png) [@krambriw](https://discourse.nodered.org/u/krambriw)\
**Post date:** [20 July 2023 06:03 UTC](https://discourse.nodered.org/t/play-video-on-click-on-button/79894/8 "2023-07-20T06:03:30Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Vaibhavi27](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/vaibhavi27/32/70897_2.png) [@Vaibhavi27](https://discourse.nodered.org/u/Vaibhavi27)\
**Post date:** [20 July 2023 07:35 UTC](https://discourse.nodered.org/t/play-video-on-click-on-button/79894/9 "2023-07-20T07:35:22Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![krambriw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/krambriw/32/5429_2.png) [@krambriw](https://discourse.nodered.org/u/krambriw)\
**Post date:** [20 July 2023 11:05 UTC](https://discourse.nodered.org/t/play-video-on-click-on-button/79894/10 "2023-07-20T11:05:18Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Vaibhavi27](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/vaibhavi27/32/70897_2.png) [@Vaibhavi27](https://discourse.nodered.org/u/Vaibhavi27)\
**Post date:** [20 July 2023 12:17 UTC](https://discourse.nodered.org/t/play-video-on-click-on-button/79894/11 "2023-07-20T12:17:56Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![krambriw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/krambriw/32/5429_2.png) [@krambriw](https://discourse.nodered.org/u/krambriw)\
**Post date:** [20 July 2023 14:37 UTC](https://discourse.nodered.org/t/play-video-on-click-on-button/79894/12 "2023-07-20T14:37:38Z")

</div>

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

> **[Single File PHP Gallery 4.11.0](https://sye.dk/sfpg/)**
>
> Home of Single File Gallery and other usefull tools.

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

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

---

<div class="post-metadata">

**Author:** ![Vaibhavi27](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/vaibhavi27/32/70897_2.png) [@Vaibhavi27](https://discourse.nodered.org/u/Vaibhavi27)\
**Post date:** [21 July 2023 05:25 UTC](https://discourse.nodered.org/t/play-video-on-click-on-button/79894/13 "2023-07-21T05:25:14Z")

</div>

I am gonna try this... Will this work offline?🤔

---

<div class="post-metadata">

**Author:** ![krambriw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/krambriw/32/5429_2.png) [@krambriw](https://discourse.nodered.org/u/krambriw)\
**Post date:** [21 July 2023 05:47 UTC](https://discourse.nodered.org/t/play-video-on-click-on-button/79894/14 "2023-07-21T05:47:03Z")

</div>

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)

```auto
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()

```

---

<div class="post-metadata">

**Author:** ![Vaibhavi27](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/vaibhavi27/32/70897_2.png) [@Vaibhavi27](https://discourse.nodered.org/u/Vaibhavi27)\
**Post date:** [21 July 2023 10:41 UTC](https://discourse.nodered.org/t/play-video-on-click-on-button/79894/15 "2023-07-21T10:41:51Z")

</div>

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

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

---

<div class="post-metadata">

**Author:** ![krambriw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/krambriw/32/5429_2.png) [@krambriw](https://discourse.nodered.org/u/krambriw)\
**Post date:** [21 July 2023 14:30 UTC](https://discourse.nodered.org/t/play-video-on-click-on-button/79894/16 "2023-07-21T14:30:20Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Vaibhavi27](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/vaibhavi27/32/70897_2.png) [@Vaibhavi27](https://discourse.nodered.org/u/Vaibhavi27)\
**Post date:** [22 July 2023 08:47 UTC](https://discourse.nodered.org/t/play-video-on-click-on-button/79894/17 "2023-07-22T08:47:45Z")

</div>

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.

 ![Screenshot 2023-07-22 105941](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/0/702a58e4daa5958b6ceabad120450d2d83f4532f.jpeg)

```auto
<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>`

```

---

<div class="post-metadata">

**Author:** ![krambriw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/krambriw/32/5429_2.png) [@krambriw](https://discourse.nodered.org/u/krambriw)\
**Post date:** [24 July 2023 04:56 UTC](https://discourse.nodered.org/t/play-video-on-click-on-button/79894/18 "2023-07-24T04:56:04Z")

</div>

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

> **[How To Create a Fullscreen Video Background](https://www.w3schools.com/howto/howto_css_fullscreen_video.asp)**
>
> W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

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

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/c/7c1e4a5d3c65a9964422339098bb0bf83ae4fa06.jpeg)

---

<div class="post-metadata">

**Author:** ![Vaibhavi27](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/vaibhavi27/32/70897_2.png) [@Vaibhavi27](https://discourse.nodered.org/u/Vaibhavi27)\
**Post date:** [1 August 2023 07:08 UTC](https://discourse.nodered.org/t/play-video-on-click-on-button/79894/19 "2023-08-01T07:08:46Z")

</div>

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

---

<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:** [15 August 2023 07:09 UTC](https://discourse.nodered.org/t/play-video-on-click-on-button/79894/20 "2023-08-15T07:09:29Z")

</div>

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