{"id":6532,"date":"2026-07-28T15:19:42","date_gmt":"2026-07-28T14:19:42","guid":{"rendered":"https:\/\/www.darkcity-projects.com\/theride\/?page_id=6532"},"modified":"2026-08-05T14:21:21","modified_gmt":"2026-08-05T13:21:21","slug":"live-stream","status":"publish","type":"page","link":"https:\/\/www.darkcity-projects.com\/theride\/live-stream\/","title":{"rendered":"Live Stream"},"content":{"rendered":"\n<div style=\"\ntext-align:center;\nmax-width:1067px;\nmargin:0 auto;\nposition:relative;\nborder-radius:14px;\noverflow:visible;\n\">\n\n    <!-- Video -->\n<video id=\"video\" width=\"1067\" height=\"600\" controls=\"\" autoplay=\"\" muted=\"\" playsinline=\"\" style=\"\nmax-width:100%;\nheight:auto;\ndisplay:none;\nborder-radius:14px;\nbox-shadow:0 8px 25px rgba(0,0,0,0.75);\n\n\">\n<\/video>\n\n\n    <!-- LIVE NOW Overlay -->\n    <div id=\"liveOverlay\" style=\"\n        position:absolute;\n        top:5px;\n        left:5px;\n        background:rgba(0,0,0,0.65);\n        color:#fff;\n        padding:3px 3px;\n        border-radius:5px;\n        display:none;\n        flex-direction:column;\n        align-items:flex-start;\n        gap:5px;\n        font-family:Arial,Helvetica,sans-serif;\n        z-index:10;\">\n\n\n        <div style=\"\n            display:flex;\n            align-items:center;\n            gap:5px;\n            font-size:10px;\n            font-weight:bold;\n            letter-spacing:2px;\">\n\n            <span style=\"\n                width:8px;\n                height:8px;\n                background:#00ff66;\n                border-radius:50%;\n                display:inline-block;\n                animation:livePulse 1.5s infinite;\">\n            <\/span>\n\n            LIVE NOW\n\n        <\/div>\n\n\n        <!-- Audio Toggle Button -->\n        <div id=\"audioButton\" onclick=\"toggleAudio()\" style=\"\n            font-size:10px;\n            color:#ccc;\n            letter-spacing:0.5px;\n            cursor:pointer;\n            background:rgba(255,255,255,0.08);\n            padding:3px 3px;\n            border-radius:10px;\n            transition:0.3s;\">\n\n            \ud83d\udd0a Unmute\n\n        <\/div>\n\n\n    <\/div>\n\n\n\n    <!-- Offline Screen -->\n    <div id=\"offlineMessage\" style=\"\n        width:100%;\n        aspect-ratio:16\/9;\n        background:linear-gradient(135deg,#050505,#171717,#0a0a0a);\n        color:#fff;\n        display:flex;\n        flex-direction:column;\n        align-items:center;\n        justify-content:center;\n        text-align:center;\n        font-family:Arial,Helvetica,sans-serif;\n        padding:40px;\n        box-sizing:border-box;\n        border-radius:14px;\n        box-shadow:0 10px 40px rgba(0,0,0,0.7);\">\n\n\n        <div style=\"\n            display:flex;\n            align-items:center;\n            gap:12px;\n            background:rgba(255,255,255,0.08);\n            padding:10px 22px;\n            border-radius:30px;\n            font-size:16px;\n            letter-spacing:2px;\n            text-transform:uppercase;\n            margin-bottom:30px;\n            color:#ddd;\">\n\n            <span style=\"\n                width:12px;\n                height:12px;\n                background:#ff3333;\n                border-radius:50%;\n                display:inline-block;\n                animation:offlinePulse 1.5s infinite;\">\n            <\/span>\n\n            Waiting For Live Broadcast\n\n        <\/div>\n\n\n\n       <div style=\"\n    font-size:28px;\n    font-weight:700;\n    line-height:1.25;\n    max-width:900px;\n    margin-bottom:20px;\">\n\n    Live Broadcasts May Happen As They Happen\n\n<\/div>\n\n\n\n        <div style=\"\n            font-size:22px;\n            color:#aaa;\n            max-width:750px;\n            line-height:1.5;\">\n\n            The stream will automatically go live when we are broadcasting.<br>Please allow up to 20 seconds for it to start.\n\n        <\/div>\n\n\n\n        <div style=\"\n            margin-top:35px;\n            font-size:15px;\n            color:#fff;\n            letter-spacing:1px;\">\n\n            Stay tuned \u2022 Dark City Live\n\n        <\/div>\n\n\n    <\/div>\n\n<\/div>\n\n\n\n<style>\n\n@keyframes offlinePulse {\n\n    0% {\n        opacity:1;\n        transform:scale(1);\n    }\n\n    50% {\n        opacity:.4;\n        transform:scale(1.4);\n    }\n\n    100% {\n        opacity:1;\n        transform:scale(1);\n    }\n\n}\n\n\n@keyframes livePulse {\n\n    0% {\n        opacity:1;\n        transform:scale(1);\n    }\n\n    50% {\n        opacity:.4;\n        transform:scale(1.4);\n    }\n\n    100% {\n        opacity:1;\n        transform:scale(1);\n    }\n\n}\n\n<\/style>\n\n\n\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/hls.js@latest\"><\/script>\n\n\n<script>\n\nvar video = document.getElementById('video');\nvar offline = document.getElementById('offlineMessage');\nvar liveOverlay = document.getElementById('liveOverlay');\n\nvar streamUrl = 'https:\/\/stream.darkcity-projects.com\/live\/test\/index.m3u8';\n\nvar hls;\n\n\n\nfunction showVideo(){\n\n    video.style.display = \"block\";\n    offline.style.display = \"none\";\n    liveOverlay.style.display = \"flex\";\n\n}\n\n\n\nfunction showOffline(){\n\n    video.style.display = \"none\";\n    offline.style.display = \"flex\";\n    liveOverlay.style.display = \"none\";\n\n}\n\n\n\nfunction toggleAudio(){\n\n    var button = document.getElementById('audioButton');\n\n\n    if(video.muted){\n\n        video.muted = false;\n        video.volume = 1;\n\n        button.innerHTML = \"\ud83d\udd07 Mute\";\n        button.style.color = \"#00ff66\";\n\n    }\n    else {\n\n        video.muted = true;\n\n        button.innerHTML = \"\ud83d\udd0a Unmute\";\n        button.style.color = \"#ccc\";\n\n    }\n\n}\n\n\n\nfunction loadStream(){\n\n\n    if(hls){\n\n        hls.destroy();\n\n    }\n\n\n\n    if(Hls.isSupported()){\n\n\n        hls = new Hls();\n\n\n        hls.loadSource(streamUrl);\n\n        hls.attachMedia(video);\n\n\n\n        hls.on(Hls.Events.MANIFEST_PARSED,function(){\n\n\n            showVideo();\n\n            video.play().catch(function(){});\n\n\n        });\n\n\n\n        hls.on(Hls.Events.ERROR,function(event,data){\n\n\n            if(data.fatal){\n\n\n                showOffline();\n\n\n                hls.destroy();\n\n\n            }\n\n\n        });\n\n\n\n    }\n\n    else if(video.canPlayType('application\/vnd.apple.mpegurl')){\n\n\n        video.src = streamUrl;\n\n\n\n        video.addEventListener('loadedmetadata',function(){\n\n\n            showVideo();\n\n\n            video.play().catch(function(){});\n\n\n        });\n\n\n\n        video.addEventListener('error',function(){\n\n\n            showOffline();\n\n\n        });\n\n\n    }\n\n    else {\n\n\n        showOffline();\n\n    }\n\n\n}\n\n\n\n\/\/ Initial check\nloadStream();\n\n\n\n\/\/ Check every 1 second when offline\nsetInterval(function(){\n\n\n    if(video.style.display === \"none\"){\n\n\n        loadStream();\n\n\n    }\n\n\n},1000);\n\n\n<\/script>\n\n\n\n<div style=\"text-align:center;\">\n\n<div id=\"dclv_counter\">\n\n<span>0<\/span> watching now\n\n<\/div>\n\n<\/div>\n\n\n<script>\n\n(function(){\n\nfunction updateViewerCount(){\n\nfetch(\"https:\/\/www.darkcity-projects.com\/theride\/wp-admin\/admin-ajax.php?action=dclv_count\")\n\n.then(response => response.text())\n\n.then(count => {\n\nlet counter = document.querySelector('#dclv_counter span');\n\nif(counter){\n\ncounter.innerHTML = count;\n\n}\n\n});\n\n}\n\n\nupdateViewerCount();\n\nsetInterval(updateViewerCount,5000);\n\n\n})();\n\n<\/script>\n\n\n<style>\n\n#dclv_counter{\n\ndisplay:inline-block;\nfont-size:14px;\nfont-weight:600;\ntext-align:center;\npadding:6px 10px;\nmargin:5px auto;\nborder-radius:8px;\nbackground:rgba(0,0,0,0.65);\ncolor:white;\nbox-shadow:0 3px 8px rgba(0,0,0,0.25);\nletter-spacing:0.5px;\n\n}\n\n<\/style>\n\n\n\n","protected":false},"excerpt":{"rendered":"<p>LIVE NOW \ud83d\udd0a Unmute Waiting For Live Broadcast Live Broadcasts May Happen As They Happen The stream will automatically go live when we are broadcasting.Please allow up to 20 seconds for it to start. Stay tuned \u2022 Dark City Live<\/p>\n","protected":false},"author":6,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":"","_members_access_role":[],"_members_access_error":""},"class_list":["post-6532","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.darkcity-projects.com\/theride\/wp-json\/wp\/v2\/pages\/6532","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.darkcity-projects.com\/theride\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.darkcity-projects.com\/theride\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.darkcity-projects.com\/theride\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.darkcity-projects.com\/theride\/wp-json\/wp\/v2\/comments?post=6532"}],"version-history":[{"count":1,"href":"https:\/\/www.darkcity-projects.com\/theride\/wp-json\/wp\/v2\/pages\/6532\/revisions"}],"predecessor-version":[{"id":6619,"href":"https:\/\/www.darkcity-projects.com\/theride\/wp-json\/wp\/v2\/pages\/6532\/revisions\/6619"}],"wp:attachment":[{"href":"https:\/\/www.darkcity-projects.com\/theride\/wp-json\/wp\/v2\/media?parent=6532"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}