Skip to content

Instantly share code, notes, and snippets.

@celevra

celevra/index.html

Forked from noestreich/index.html
Created March 24, 2018 11:49
Show Gist options
  • Save celevra/f5c64d994e2de7efc8645dcc4a69dd1f to your computer and use it in GitHub Desktop.
Save celevra/f5c64d994e2de7efc8645dcc4a69dd1f to your computer and use it in GitHub Desktop.
Download ZIP
Teleweb - Einfache HTML-Seite zum Abspielen von TV Livestreams
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic-bootstrap.css" rel="stylesheet">
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="apple-touch-icon" href="tv.png">
<link rel="apple-touch-startup-image" href="launch.png">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Teleweb</title>
<style type="text/css">
body { background: black !important; }
.btn-space {margin-bottom: 10px;}
.btn:focus, .btn:active {
outline: none !important;
box-shadow: none !important;
}
</style>
</head>
<body>
<div class="container pt-2">
<div class="row pt-4 d-block d-sm-none">
<div class="col-auto mr-auto">
<button class="btn btn-lg btn-primary btn-block" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false">
<div class="text" id="senderknopf-sm">s-display</div>
</button>
</div>
</div>
<div class="row pt-4">
<div class="col-sm">
<video controls autoplay muted playsinline id="video" class="embed-responsive embed-responsive-16by9"></video>
</div>
</div>
<div class="row pt-4">
<div class="col-auto mr-auto d-none d-sm-block">
<button class="btn btn-lg btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
<div class="text" id="senderknopf">xl-display</div>
</button>
</div>
<div class="col-auto ml-auto">
<div class="btn-group btn-group-lg" role="group" aria-label="Basic example">
<button id="runter" type="button" class="btn btn-primary">&nbsp;<span class="oi oi-chevron-top"></span>&nbsp;</button>
<button id="mute-video" type="button" class="btn btn-lg bg-dark"><strike>Audio</strike></button>
<button id="hoch" type="button" class="btn btn-primary">&nbsp;<span class="oi oi-chevron-bottom"></span>&nbsp;</button>
</div>
</div>
<div class="col-1 ml d-none d-lg-block">
<button id="fullscreen" type="button" class="btn btn-lg btn-primary ">&nbsp;<span class="oi oi-fullscreen-enter"></span>&nbsp;</button>
</div>
</div>
<div class="row pt-2">
<div class="col-sm">
<div class="collapse" id="collapseExample">
<div class="card bg-secondary">
<div class="card-body bg-dark channelList">
</div>
</div>
</div>
</div>
</div>
<div class="row pt-2 d-none d-lg-block">
<div class="col-sm">
<small class="text-muted">Zappen: <b>+</b>/<b>-</b> | Audio: <b>M</b> | Vollbild: <b>F</b></small>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script src="streams.js"></script>
<script src="main.js"></script>
</body>
</html>
Raw
main.js
var video = document.getElementById('video');
var hls = new Hls();
function playtv(streamId) {
var stream = streams[streamId]
$('#senderknopf').text(streamId);
$('#senderknopf-sm').text(streamId);
$('#'+streamId).addClass('active').siblings().removeClass('active');
if (Hls.isSupported()) {
hls.loadSource(stream);
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, function() {
video.play();
var test = stream;
return test;
});
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = stream;
video.addEventListener('canplay', function() {
video.play();
var test = stream;
return test;
});
}
}
//MUTE
$("video").prop('muted', true);
$("#mute-video").click(function() {
if ($("video").prop('muted')) {
$("video").prop('muted', false);
$("#mute-video").html("Audio");
$('#mute-video').addClass('btn-primary').removeClass('bg-dark');
} else {
$("video").prop('muted', true);
$("#mute-video").html("<strike>Audio</strike>");
$('#mute-video').addClass('bg-dark').removeClass('btn-primary');
}
});
function leise(e) {
if ((e.type == "keydown" && e.which == 77)) {
if ($("video").prop('muted')) {
$("video").prop('muted', false);
$("#mute-video").html("Audio");
$('#mute-video').addClass('btn-primary').removeClass('bg-dark');
} else {
$("video").prop('muted', true);
$("#mute-video").html("<strike>Audio</strike>");
$('#mute-video').addClass('bg-dark').removeClass('btn-primary');
}
}
}
$('body').keydown(leise);
function fullscreen() {
var isInFullScreen = (document.fullscreenElement && document.fullscreenElement !== null) ||
(document.webkitFullscreenElement && document.webkitFullscreenElement !== null) ||
(document.mozFullScreenElement && document.mozFullScreenElement !== null) ||
(document.msFullscreenElement && document.msFullscreenElement !== null);
var docElm = document.getElementById("video");
if (!isInFullScreen) {
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
} else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
} else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
} else if (docElm.msRequestFullscreen) {
docElm.msRequestFullscreen();
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
}
function vollbild(e) {
if ((e.type == "keydown" && e.which == 70)) {
fullscreen();
}
}
$('body').keydown(vollbild);
$("#fullscreen").click(function() {
fullscreen();
});
function hochschalten(e) {
if ((e.type == "keydown" && (e.which == 187 || e.which == 107 || e.which == 171)) || (e.type == "click")) {
//alert( "Enter-schmenter" );
var keys = Object.keys(streams);
var jetzt = $('#senderknopf').text();
var index = keys.indexOf(jetzt);
var nextIndex = (index+1 > Object.keys(streams).length-1) ? 0 : index+1;
var next = keys[nextIndex];
playtv(next);
} else if (e.type == "keydown" && e.which == 13) {
alert("du hast enter gedrueckt");
}
}
$('#hoch').click(hochschalten);
$('body').keydown(hochschalten);
function runterschalten(e) {
if ((e.type == "keydown" && (e.which == 189 || e.which == 109 || e.which == 173)) || (e.type == "click")) {
//alert( "Enter-schmenter" );
var keys = Object.keys(streams);
var jetzt = $('#senderknopf').text();
var index = keys.indexOf(jetzt);
var nextIndex = (index-1 < 0) ? Object.keys(streams).length-1 : index-1;
var next = keys[nextIndex];
playtv(next);
} else if (e.type == "keydown" && e.which == 13) {
alert("du hast enter gedrueckt");
}
}
$('#runter').click(runterschalten);
$('body').keydown(runterschalten);
$(function() {
for (var sender in streams)
{
$('.channelList').append('<button id="'+sender+'" type="button" class="btn-sm btn-primary btn-space sender active">'+sender+'</button>')
}
playtv('ARD');
$('.sender').click(function(){
$(this).addClass('active').siblings().removeClass('active');
playtv($(this).text());
})
});
Raw
streams.js
var streams = {
"BRA":"https://brlive-lh.akamaihd.net/i/bralpha_germany@119899/master.m3u8",
"ARTE":"https://artelive-lh.akamaihd.net/i/artelive_de@393591/master.m3u8",
"BR":"https://brlive-lh.akamaihd.net/i/bfsnord_germany@119898/master.m3u8",
"ARD":"https://daserstelive-lh.akamaihd.net/i/daserste_de@38086/master.m3u8",
"DW":"https://dwstream72-lh.akamaihd.net/i/dwstream72_live@123556/master.m3u8",
"HR":"https://hrlive1-lh.akamaihd.net/i/hr_fernsehen@75910/master.m3u8",
"KIKA":"https://kikade-lh.akamaihd.net/i/livetvkika_de@450035/master.m3u8",
"MDR":"https://mdrsnhls-lh.akamaihd.net/i/livetvmdrsachsen_de@513998/master.m3u8",
"NDR":"https://ndrfs-lh.akamaihd.net/i/ndrfs_hh@430231/master.m3u8",
"ONE":"https://onelivestream-lh.akamaihd.net/i/one_livestream@568814/master.m3u8",
"PHOENIX":"https://zdf0910-lh.akamaihd.net/i/de09_v1@392871/master.m3u8",
"SAT":"https://zdf0910-lh.akamaihd.net/i/dach10_v1@392872/master.m3u8",
"RBB":"https://rbblive-lh.akamaihd.net/i/rbb_berlin@144674/master.m3u8",
"SR":"https://srlive24-lh.akamaihd.net/i/sr_universal02@107595/master.m3u8",
"SWR":"https://swrbw-lh.akamaihd.net/i/swrbw_live@196738/master.m3u8",
"RGS24":"https://tagesschau-lh.akamaihd.net/i/tagesschau_1@119231/master.m3u8",
"WDR":"https://wdrfsgeo-lh.akamaihd.net/i/wdrfs_geogeblockt@530016/master.m3u8",
"AJ":"https://english.streaming.aljazeera.net/aljazeera/english2/index255.m3u8",
"RT":"https://secure-streams.akamaized.net/rt/index2500.m3u8",
"ZDF":"https://zdf1314-lh.akamaihd.net/i/de14_v1@392878/master.m3u8",
"ZDFN":"https://zdf1314-lh.akamaihd.net/i/de13_v1@392877/master.m3u8",
"ZDFI":"https://zdf1112-lh.akamaihd.net/i/de12_v1@392882/master.m3u8",
"NHK":"https://nhkwtvglobal-i.akamaihd.net/hls/live/263941/nhkwtvglobal/index_1180.m3u8",
"WELT":"https://live2weltcms-lh.akamaihd.net/i/Live2WeltCMS_1@444563/master.m3u8"
}
@noestreich
Copy link

As requested, Teleweb has it's own repository now:
Teleweb on Github

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment