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