{"id":124169,"date":"2018-03-23T18:39:16","date_gmt":"2018-03-23T17:39:16","guid":{"rendered":"https:\/\/www.iphone-ticker.de\/?p=124169"},"modified":"2018-03-27T08:08:49","modified_gmt":"2018-03-27T06:08:49","slug":"fuer-ios-und-rechner-tv-livestreaming-seite-mit-hotkeys-und-zapping","status":"publish","type":"post","link":"https:\/\/www.iphone-ticker.de\/fuer-ios-und-rechner-tv-livestreaming-seite-mit-hotkeys-und-zapping-124169\/","title":{"rendered":"F\u00fcr iOS und Rechner: TV-Livestreaming-Seite mit Hotkeys und Zapping"},"content":{"rendered":"<p>Wenn wir in ruhigen Minuten eine kleine Runde <a href=\"https:\/\/en.wikipedia.org\/wiki\/Code_golf\">Code Golf<\/a> spielen, dann kommt manchmal sogar etwas Brauchbares dabei heraus. Aktuell haben wir in Anlehnung an die Mac-Anwendung <a href=\"https:\/\/www.ifun.de\/fernsehen-am-mac-freie-app-telemac-in-neuer-version-106699\/\">Telemac<\/a> eine schlichte Internetseite gestrickt, die den einfachen und schnellen Zugriff auf das Live-Programm aller \u00d6ffentlich-Rechtlichen sowie auf die Auslandssender NHK, RT und Al Jazeera erm\u00f6glicht. <\/p>\n<p><a href=\"https:\/\/images.iphone-ticker.de\/wp-content\/uploads\/2018\/03\/desktop.jpg\"><img decoding=\"async\" src=\"https:\/\/images.iphone-ticker.de\/wp-content\/uploads\/2018\/03\/desktop.jpg\" alt=\"Desktop\" width=\"500\" class=\"aligncenter size-full wp-image-124172\" srcset=\"https:\/\/images.iphone-ticker.de\/wp-content\/uploads\/2018\/03\/desktop.jpg 1000w, https:\/\/images.iphone-ticker.de\/wp-content\/uploads\/2018\/03\/desktop-300x226.jpg 300w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/a><\/p>\n<p>Die Webseite &#8211; eine schlichte HTML-Datei &#8211; besitzt keine lokalen Abh\u00e4ngigkeiten und kann gerne von euch weiterbearbeitet, auf dem eigenen Webserver eingesetzt oder auch nur als Ausgangspunkt f\u00fcr ein eigenes Wochenend-Projekt genutzt werden.  <\/p>\n<p>Nach dem Aufruf spielt die Seite automatisch den (bei Aufruf erst mal tonlosen) Stream des ARD ab und passt sich selbstst\u00e4ndig an die Display-Aufl\u00f6sungen von iPhone, iPad und Rechner-Monitor an. <\/p>\n<h2>Hotkeys f\u00fcr Ton, Vollbild und Zapping<\/h2>\n<p>Steht euch eine Tastatur zur Verf\u00fcgung, k\u00f6nnt ihr mit den Tasten &#8222;+\/-&#8220; durch die verf\u00fcgbaren Sender zappen, die Taste &#8222;M&#8220; schaltet den Ton ein bzw. stumm, die Taste &#8222;F&#8220; startet und verl\u00e4sst die Vollbildansicht. Auf iPhone und iPad muss von Hand umgeschaltet werden. <\/p>\n<p><a href=\"https:\/\/images.iphone-ticker.de\/wp-content\/uploads\/2018\/03\/beide-ansichten.gif\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/images.iphone-ticker.de\/wp-content\/uploads\/2018\/03\/beide-ansichten.gif\" alt=\"Beide Ansichten\" width=\"1500\" height=\"864\" class=\"aligncenter size-full wp-image-124173\" \/><\/a><\/p>\n<p>Die Javascript-Schnipsel, die die kleine Spielerei erm\u00f6glichen machen uns nicht stolz &#8211; die Funktionen die umgesetzt werden sollten funktionieren jedoch auch mit unserem Flickenteppich, das reicht uns. <\/p>\n<p>Solltet ihr Lust haben den Code zu optimieren, zu kommentieren bzw. unsere Wischi-Waschi-Funktionen durch ordentlich vereinheitlichte Klassen zu ersetzen, dann bitte keine Zur\u00fcckhaltung. Den Code k\u00f6nnt ihr <a href=\"https:\/\/github.com\/noestreich\/Teleweb\">hier einsehen und kopieren<\/a>. <\/p>\n<p>Eine Demo-Version haben wir zu Testzwecken auf dem Entwickler-Portal jsfiddle abgelegt. <a href=\"http:\/\/jsfiddle.net\/c0335f0L\/embedded\/result\/\">Diese k\u00f6nnt ihr hier aufrufen<\/a> und schon mal auf iPad, iPhone oder Mac probeschauen &#8211; denkt euch den wei\u00dfen Balken am oberen Seitenende einfach weg. Auf dem iPhone muss die Seite in Safari geladen werden um zu funktionieren und nicht in einem In-App-Browser.<\/p>\n<p>Unsere Video-Seite funktioniert auch auf Servern mit HTTPS-Verschl\u00fcsselung, l\u00e4sst sich in Chrome, Safari und Firefox nutzen und bietet lediglich unter iOS noch keinen (funktionalen) Knopf zum Wechseln in den Vollbildmodus an. Apples Browser unterst\u00fctzt die Funktion bislang noch nicht sondern besteht auf die Nutzung der nativen Video-Elemente. <\/p>\n<ul>\n<li><a href=\"http:\/\/jsfiddle.net\/c0335f0L\/embedded\/result\/\">Testversion zum Ausprobieren im Web<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/noestreich\/Teleweb\">Der Quelltext<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<a href=\"https:\/\/www.iphone-ticker.de\/fuer-ios-und-rechner-tv-livestreaming-seite-mit-hotkeys-und-zapping-124169\/\"><img width=\"150\" height=\"150\" src=\"https:\/\/images.iphone-ticker.de\/wp-content\/uploads\/2018\/03\/beide-ansichten-150x150.gif\" class=\"alignright tfe wp-post-image\" alt=\"Beide Ansichten\" decoding=\"async\" loading=\"lazy\" \/><\/a><p>Wenn wir in ruhigen Minuten eine kleine Runde Code Golf spielen, dann kommt manchmal sogar etwas Brauchbares dabei heraus. Aktuell haben wir in Anlehnung an die Mac-Anwendung Telemac eine schlichte Internetseite gestrickt, die den einfachen und schnellen Zugriff auf das Live-Programm aller \u00d6ffentlich-Rechtlichen sowie auf die Auslandssender NHK, RT und Al Jazeera erm\u00f6glicht. Die Webseite [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":124173,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[88,489,1975],"tags":[72,3917,413,171,8],"class_list":["post-124169","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-entwickler","category-videos","category-feature","tag-code","tag-entwickler","tag-fernsehen","tag-tv","tag-video"],"aioseo_notices":[],"featured_image":["https:\/\/images.iphone-ticker.de\/wp-content\/uploads\/2018\/03\/fernseh-app.jpg"],"subheadline":["Basis f\u00fcr ein Wochenend-Projekt"],"rest_api_enabler":{"featured_image":"https:\/\/images.iphone-ticker.de\/wp-content\/uploads\/2018\/03\/fernseh-app.jpg","subheadline":"Basis f\u00fcr ein Wochenend-Projekt"},"_links":{"self":[{"href":"https:\/\/www.iphone-ticker.de\/apiv2\/wp\/v2\/posts\/124169","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.iphone-ticker.de\/apiv2\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.iphone-ticker.de\/apiv2\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.iphone-ticker.de\/apiv2\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.iphone-ticker.de\/apiv2\/wp\/v2\/comments?post=124169"}],"version-history":[{"count":7,"href":"https:\/\/www.iphone-ticker.de\/apiv2\/wp\/v2\/posts\/124169\/revisions"}],"predecessor-version":[{"id":124175,"href":"https:\/\/www.iphone-ticker.de\/apiv2\/wp\/v2\/posts\/124169\/revisions\/124175"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.iphone-ticker.de\/apiv2\/wp\/v2\/media\/124173"}],"wp:attachment":[{"href":"https:\/\/www.iphone-ticker.de\/apiv2\/wp\/v2\/media?parent=124169"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.iphone-ticker.de\/apiv2\/wp\/v2\/categories?post=124169"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.iphone-ticker.de\/apiv2\/wp\/v2\/tags?post=124169"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}