-
-
Save celevra/f5c64d994e2de7efc8645dcc4a69dd1f to your computer and use it in GitHub Desktop.
Teleweb - Einfache HTML-Seite zum Abspielen von TV Livestreams
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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"> <span class="oi oi-chevron-top"></span> </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"> <span class="oi oi-chevron-bottom"></span> </button> | |
| </div> | |
| </div> | |
| <div class="col-1 ml d-none d-lg-block"> | |
| <button id="fullscreen" type="button" class="btn btn-lg btn-primary "> <span class="oi oi-fullscreen-enter"></span> </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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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()); | |
| }) | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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" | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
As requested, Teleweb has it's own repository now:
Teleweb on Github