{% extends "base.njk" %} {% block head %} <!--<script src="/videojs/video.min.js"></script> <link rel="stylesheet" type="text/css" href="/videojs/video-js.min.css">--> <script src="/dashjs/dash.all.min.js"></script> <script> async function startVideo(){ //var url = "/live/{{username}}/index.mpd"; //var player = dashjs.MediaPlayer().create(); //player.initialize(document.querySelector("#videoPlayer"), url, true); //console.log('called startvideo'); while(true){ if(document.querySelector('#videoPlayer') === null) break; if(window.location.pathname.substring(window.location.pathname.length - 1) !== '/'){ var url = "/api/"+window.location.pathname.substring(7)+"/config"; console.log(url) var xhr = JSON.parse(await makeRequest("GET", url)); if(xhr.live){ var player = dashjs.MediaPlayer().create(); player.initialize(document.querySelector("#videoPlayer"), url, true); break; } } else{ var url = "/api/"+window.location.pathname.substring(7, window.location.pathname.length - 1)+"/config"; console.log(url) var xhr = JSON.parse(await makeRequest("GET", url)); if(xhr.live){ var player = dashjs.MediaPlayer().create(); player.initialize(document.querySelector("#videoPlayer"), url, true); break; } } await sleep(60000); } } function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } </script> {% endblock %} {% block content %} <script> function newPopup(url) { popupWindow = window.open( url,'popUpWindow','height=700,width=450,scrollbars=yes,toolbar=no,menubar=no,location=no,directories=no,status=yes') } </script> </br> <span style="float: left;font-size: large;"><a href="/live/{{ username }}/index.mpd">{{ username }}</a> | {{ title | escape }}</b></span><span style="float: right;font-size: large;"> Links | <a href="rtmp://{{ domain }}/live/{{ username }}">Watch</a> <a href="JavaScript:newPopup('/chat?room={{ username }}');">Chat</a> <a href="/vods/{{ username }}">VODs</a></span> <div id="jscontainer"> <div id="jschild" style="width: 70%;height: 100%;"> <!--<video controls poster="/thumbnail.jpg" class="video-js vjs-default-skin" id="live-video" style="width:100%;height:100%;min-height: 500px;"></video>--> <video id="videoPlayer" style="width:100%;height:100%;width: 950px;height: 534px;background-color: rgb(0, 0, 0);" poster="/thumbnail.jpg" autoplay muted></video> <!--this spits errors fucking constantly after it tries to reload a video that's already running.. I dunno if it's bad or causing problems so let's just push it to develop and wait for issues!--> <!--it plays the stream without reloading the page tho lol--> <script>startVideo()</script> </div> <div id="jschild" class="webchat" style="width: 30%;height: 100%;position: relative;"> <iframe src="/chat?room={{ username }}" frameborder="0" style="width: 100%;height: 100%; min-height: 534px;" allowfullscreen></iframe> </div> </div> </br> <noscript>The webclients for the stream and the chat require javascript, but feel free to use the direct links above!</br></br></noscript> {{ about | escape }} <!--<script> window.HELP_IMPROVE_VIDEOJS = false; var player = videojs('live-video', { html: { nativeCaptions: false, }, }); player.ready(function() { player.on("error", () => { document.querySelector(".vjs-modal-dialog-content").textContent = "The stream is currently offline."; }); player.src({ src: '/live/{{ username }}/index.mpd', type: 'application/dash+xml' }); }) </script>--> {% endblock %}