satyr/templates/user.njk
knotteye 4bd10151f8 Switch from video.js to dash.js, it seems to be more consistent and hiccup less during streams.
This means transcoding to HLS is no longer an option.
Also add a bit of JS to reload the stream periodically if it hadn't started when the page was loaded.
That thing spits out errors fucking constantly, so hopefully it won't cause any problems.
2020-06-27 12:11:42 -05:00

57 lines
2.7 KiB
Plaintext

{% 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>
function startVideo(){
var url = "/live/{{username}}/index.mpd";
var player = dashjs.MediaPlayer().create();
player.initialize(document.querySelector("#videoPlayer"), url, true);
console.log('called startvideo');
}
</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>window.setInterval(startVideo, 60000)</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 %}