You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
harambee-tv/site/index60.html

120 lines
9.9 KiB

4 years ago
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HarambeeTV</title>
<link href="data:image/vnd.microsoft.icon;base64,AAABAAIAEBAAAAAAIABoBAAAJgAAACAgAAAAACAAqBAAAI4EAAAoAAAAEAAAACAAAAABACAAAAAAAEAEAAAAAAAAAAAAAAAAAAAAAAAA////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8BKYT2MSqD9mX///8BKYT1iymE9eUqhPZf////Af///wH///8B////Af///wH///8B////Af///wH///8BK4L1EyqE9vkqhPb/KoP2UyqE9qcqhPaRKoT2yyiH9wkpg/WPJIbzBf///wH///8B////Af///wH///8BKoT1bSuF9UcqhPb9KoT2qyqE9dcphPaFKoT20yqE9X8phPZpKYT2tymE9pH///8B////Af///wH///8BKYT3CSqE9ukpg/bPKYT2wSqE9qkqhPaVKYT2iSqE9v8qhPZZKoT1zSqD9YEqhPWdKYT1P////wH///8BigBkK3cVeQVaQq9LKYP2OSmE9y8tf/FbK4P1Gy2A8V0qg/VfKYT2QymE9UErg/c3KYT0MyqE9kf///8B////AYwAZYOLAGY/jABlR4wAZYuLAGaNjABmj4wAZZmLAGaLiwBmoYwAZn+MAGaLjABmqYwAZn96F4BRiwBmS40AZkWLAGaLjABldX4ReXtkNJ9rYzihO2E5ozUsg/gJLn3vFTN56iNuJ5FJfhJ5QyqD9Tcpg/UhKoP2m////wGOAGMFjABlQ05TwKF4GYF7KoT2wymD9qEqg/atKoT28yqD9mMqhPa3KoP18T1r2kMqhPbrKoT1XSiF9h3///8B////AYkAYgdmMZuLQGbV2S597ncqhPaTKYT2tSmE9vEqg/ZXKYT2xyqE9d8qhPZhKoT2ySqE9pP///8B////Af///wH///8B////ASmE9pcqhPajKoT2xSmE9sUqg/WfKYP1hyqE9t0qhPWvKoT1dSqE9msqg/al////Af///wH///8B////Af///wErgP8DKoP2lyqE9u8phPVrKYP2tSqD9sUqhPaXKoP13yqD9oH///8B////Af///wH///8B////Af///wH///8B////Af///wEinv8DIojuBSqE9rUpg/XLK4P1GymD9pcpg/Yt////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////AQAA//8AAP//AAD//wAA//8AAP//AAD//wAA//8AAP//AAD//wAA//8AAP//AAD//wAA//8AAP//AAD//wAA//8oAAAAIAAAAEAAAAABACAAAAAAAIAQAAAAAAAAAAAAAAAAAAAAAAAA////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8BK4D/Df///wH///8B////ARyO/wkqhPbZKoT18SmE9ssqhfdj////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8BKYT3HyqE9qUqhPb7K4T2j////wH///8BK4P1TyqE9v8qhPb5KoX24yqE9vkriPcf////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////AS6A8xcqhfblKoT2/yqE9v8qhPb/KoT3W////wErhfdbKoT2/yqF9uUqgvY3KoT2+yqE95n///8B////ASmE9WsngPUb////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8BK4T2NyqE9v8qhPb/KoT2/yqE9v8qhPbnK4D/DSuD90MqhPb/KoT2/y2G+SkrhPebKoT2+yiH9yH///8BKoT22yqE9t0khvMV////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8BKYP1SySS/wcrhvY7KoT2/yqE9v8rhPfxKoT2syqE9v8qhPWBLIP4IyqE9v8qhPb/K4T2cyiC9TMqhPb/KoT3mf///wEqhPbBKoT27yqF9skcjv8J////Af///wH///8B////Af///wH///8B////Af///wH///8B////ASuF9WcqhPb/K4X2zTCA7xEqhPb3KoT2/yuE9vcth/ARKoT25yqE9vMkhvMVKoT23SqE9v8rhPbZ////ASuF9s0qhPb1KIbyEymE95sqhfaTKoT31SqE9Z////8B////Af///wH///8B////Af///wH///8B////Af///wH///8BKoT27yqE9v8qhPb/KYP2byqE9q0qhPb/KoT2/yyD+SkrhPZtKoT2/yqF938pg/aJKoT2/yqE9v8pg/hFK4P1ZSqE9v8rhPZzLIP2UyqE9bsrhfVnKoT2/yuF9Ef///8B////Af///wH///8B////Af///wH///8B////ASmE9x8qhPb/K4T3tSqE9ucqhPbnKYT3XSqE9v8qhPb/KoX3fySS/wcrhPblKoX25SiG9jkqhPb/KoT2/yqF9q8ui/8LKoT27SqE9dUkgP8PKoT25ySG8xUrhPb9KYT2s////wH///8B////Af///wH///8B////Af///wH///8BAKr/AyuD9nEohvgnLIP4IymE9r8pg/hFKoX3eSqD9qkrhPW7////ASuD9WsqhPb/K4P1ZSuD9aEqhPXXKoT2+TOA/wspg/VRKoX2sSyD+SkrhPe1KIbyEyqE9bsrhPb9KYT3H////wH///8B////Af///wGLAGWhiQBiDf///wGIAGYPjABnkYAAgAP///8B////Af///wH///8BgACABZIAbQf///8B////ATOZ/wWLAF0L////Af///wEkkv8HAKr/A////wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////AYwAZr+MAGdF////AYsAZm+MAGa3////AY0AZZ2MAGWXjABmx4
<link href="./node_modules/video.js/dist/video-js.min.css" rel="stylesheet" />
<link href="./node_modules/videojs-hls-quality-selector/dist/videojs-hls-quality-selector.css" rel="stylesheet" />
<script src="./node_modules/video.js/dist/video.min.js"></script>
<script src="./node_modules/@videojs/http-streaming/dist/videojs-http-streaming.min.js"></script>
<script src="./node_modules/videojs-hls-quality-selector/dist/videojs-hls-quality-selector.min.js"></script>
<style>
body {
margin: 0px;
font: 20px 'RobotoRegular', Arial, sans-serif;
font-weight: 100;
height: 100%;
color: #0f1419;
background-image: url('./bg.svg');
background-color: #ff5800;
}
div.info {
position: fixed;
background: #66008C;
padding: 50px 50px 50px 50px;
border-radius: 10px;
width: 1050px;
height: 600px;
top: 50%;
left: 50%;
margin-top: -400px;
margin-left: -550px;
}
div.butt {
margin-top: 10px;
margin-right: 10px;
border-radius: 4px;
height: 30px;
width: 70px;
background: #ff5800;
font-size: 15px;
line-height: 30px;
text-align: center;
float: left;
}
div.butt:hover {
background: #ffa678;
cursor: pointer;
}
div.selected {
margin-top: 10px;
margin-right: 10px;
border-radius: 4px;
height: 30px;
width: 70px;
background: #943300;
font-size: 15px;
line-height: 30px;
text-align: center;
float: left;
color: white;
}
#footer {
position: fixed;
bottom: 36px;
width: 100%;
}
#center {
width: 400px;
margin: 0 auto;
font: 12px Courier;
}
</style>
</head>
<body>
<div class="info">
<video-js id="vid1" width="1050px" height="600px" class="vjs-default-skin vjs-big-play-centered" controls>
<source
src="http://harambee-woest.student.utwente.nl:8080/live/teampresentaties_1080p60_10128kbs/index.m3u8"
type="application/x-mpegURL">
</video-js>
<div>
<div class="butt" onclick="document.location='/indexl.html'">
360p
</div>
<div class="butt" onclick="document.location='/indexm.html'">
480p
</div>
<div class="butt" onclick="document.location='/indexh.html'">
720p
</div>
<div class="butt" onclick="document.location='/indexh60.html'">
720p60
</div>
<div class="butt" onclick="document.location='/index.html'">
1080p
</div>
<div class="selected">
1080p60
</div>
</div>
</div>
</body>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var player = videojs('vid1');
player.hlsQualitySelector();
player.play();
});
</script>
</html>