Montag, 21. März 2016

SkyGo im Vollbild bei zwei Monitoren [neues SkyGo-Layout]

+++ SkyGo auf dem FireTV: Hier gibt es die Anleitung! +++
+++ SkyGo auf dem FireTV: Hier gibt es die Anleitung! +++
+++ SkyGo auf dem FireTV: Hier gibt es die Anleitung! +++


Während der Sommerpause hat Sky seine Onlineplattform SkyGo etwas überarbeitet. Damit ihr trotzdem Fussball und auch andere Dinge wieder in (fast) Vollbild gucken könnt, hier die angepasste Anleitung für Google Chrome.

SkyGo auf zweitem Monitor im Vollbild - so gehts!


Nochmal zur Geschichte:

In vielen Foren wird darüber heiß diskutiert, eine wirklich akzeptable Lösung hatte ich aber nicht gefunden. Ich habe versucht an meinem Rechner an einem Monitor SkyGo Bundesliga in Vollbild zu schauen und am anderen Monitor zu arbeiten. Das stellte sich als schwierig bzw. nahezu unmöglich heraus, da sich das Vollbildfenster schloss, sobald ich im zweiten Monitor eine Aktion ausführte.

Den Originalpost gibt es hier: So gehts! SkyGo im Vollbild bei zwei Monitoren

Falls ihr noch keinen Zweitmonitor habt, aber unbedingt einen braucht, damit ihr SkyGo darauf gucken könnt, habe ich ein paar Empfehlungen für euch:
BenQ GL2450H 61 cm (24 Zoll) LED Monitor (Full-HD)
Asus VS247HR 59,9 cm (23,6 Zoll) Monitor (Full HD)
Acer S242HLCBID 60,1 cm (24 Zoll) Monitor (Full-HD)

Nun aber zum hier und jetzt:
  1. Rechtklick neben(!) den Player und "Prüfen" auswählen - daraufhin öffnet sich am unteren Browserrand ein Fenster, welches euch den Quelltext der Webseite anzeigt.
  2. In diesem Fenster links oben auf die kleine Lupe klicken und damit den Player auswählen.
  3. Im unteren Fenster wird ein Quellcode-Abschnitt markiert. Das ist die Implementierung des Players.
  4. Ihr seht hier im hinteren Teil des Abschnittes die Werte "width" und "height" - diese könnt ihr verändern, indem ihr sie doppelt anklickt. 
  5. Setzt hier nun die Auflösung eures Monitors (oder die von euch gewünschte) ein und schließt anschließend das Quellcodefenster.
  6. Nun sollte sich der Player entsprechend eurer Einstellungen vergrößert haben. Schiebt nun noch das Bild so zurecht, dass der Player zentriert angezeigt wird. 
  7. Mit dem neuen SkyGo-Layout kommt hier nun noch ein Schritt hinzu: Über dem Player liegen noch einige Objekte (Bilder, andere Videos, Text usw.). Diese müsst ihr noch entfernen, damit ihr freie Sicht auf das Video habt. Dazu wählt ihr wieder die Lupe und wählt die Objekte aus, die sich dort befinden. Wenn ihr das gemacht habt, drückt einfach die Entfernen-Taste (meist mit "ENTF" oder "DEL" auf eurer Tastatur beschriftet). Diese Bereiche der Webseite werden dann sofort entfernt.

    Mit etwas Übung und Geschick lassen sich relativ große Bereiche und somit mehrere Objekte auf einmal entfernen.
  8. Das wiederholt ihr solange, bis alles unnötige entfernt ist. Solltet ihr aus Versehen den Player erwischt und gelöscht haben, drückt einfach STRG+Z. Das macht die letzte Aktion rückgängig und bringt euch den Player wieder.
  9. Voilà! (Nahezu) Vollbild und was ganz wichtig ist: die Qualität passt sich der Auflösung an - somit solltet ihr entsprechend auch ein HD-Bild haben (wenn es denn eine HD-Sendung ist) und kein rangezoomtes verpixeltes Bild...

Wem das zu umständlich ist und lieber SkyGo auf dem Fernseher gucken will, dem lege ich das Amazon Fire TV ans Herz. Mittels dieser Anleitung bekommt ihr die SkyGo-App zum laufen und habt vollen Zugriff auf eure Sky-Inhalte.


Für weitere Hinweise oder Fragen, einfach die Kommentarfunktion nutzen.

Viele Grüße
Peti

19 Kommentare:

  1. Danke für den Tipp. Hätte ich auch selbst drauf kommen können.

    Eigentlich könnte man jetzt ein simples Addon für Chrome etc. entwickeln, das einem die Arbeit abnimmt und alle Elemente auf der Seite automatisch auf hidden stellt bis auf das object und davon die width/heigth anpasst. Man könnte das sogar so machen, dass man bei Klicken auf F11 toggled:
    http://stackoverflow.com/questions/21461890/browser-f11-fullscreen-does-not-register-with-webkit-full-screen-or-javascript

    Los wer will? ^^

    AntwortenLöschen
    Antworten
    1. ich habe schon eine kleine Addon geschrieben. Wer möchte kann sie ja mal testen: http://www.alexanderboehm.com/skygo.rar

      Löschen
    2. PS: Sie geht nur richtig bei den Sport Streams...

      Löschen
  2. Nicht so kompliziert. Orientiere Dich an dem Code (clone):
    http://atsud1.tumblr.com/post/94837219115/skygo-germany-dual-monitor-fullscreen-pinned

    jQuery brauchst Du dafür nicht. clone() kannst Du z.B. hier holen:
    http://stackoverflow.com/a/122190/318765

    Allerdings auch nicht die ID targeten, sondern einfach nur nach dem object auf der Seite suchen, das im "type" das Wort "silverlight" enthält (nicht exakt "application/x-silverlight-2").

    Damit wird Dein Plugin flexibel und muss nicht ständig angepasst werden.

    Ich würde das dann auch gleich "Silverlight Fullscreen" nennen. Also immer dann laufen lassen, wenn auf der Seite ein silverlight object gefunden wurde. Sky Go wird sicher nicht der einzige Problemfall sein.

    AntwortenLöschen
    Antworten
    1. Ne das Klonen sollte eher passen:
      http://stackoverflow.com/a/921316/318765

      Löschen
    2. Danke, werde ich mir mal anschauen. Habe das nur eben in 5 Minuten hingeklatscht, damit ich gestern und heute Bundesliga gescheit gucken kann ^^

      Löschen
    3. So nun die überarbeite Version. Wäre nett wenn du sie mal ausprobieren könntest und mir nen Feedback / Verbesserungen gibst ;)
      http://alexanderboehm.com/silverlightfullscreen.rar

      Löschen
    4. hey,
      könnte mir evtl jemand sagen, wo ich die ordner hinkopieren muss?
      oder wie ich das aktivieren kann? habe leider nicht so die ahnung :)
      lg

      Löschen
    5. Jetzt hast Du es sogar so flexibel, dass es jeden Player z.B. auch Flash erfasst. Das muss aber nicht unbedingt ein Nachteil sein. Vielleicht will der eine oder andere das ja sogar so haben. Bald kannst Du es "Video Fullscreen Faker" nennen ^^

      Das Microsoft Logo würde ich allerdings nicht mit einbauen wg. der Urheberrechte. Zumindest wenn Du es im offiziellen App Store anbieten willst.

      Allerdings resultiert aus der Flexibilität auch der Nachteil, dass es eine Flash-Werbung Vollbild darstellen könnte. Entweder Du reduzierst das wie zuvor vorgeschlagen auf Silverlight, denn da kenne ich aktuell keinen anderen Einsatz oder Du musst eine blacklist mit height/width Angaben für Werbeflächen machen. d.h. Leaderboard, Rectangle, usw. Was aber an der Masse der unterschiedlichen Werbegrößen scheitern könnte. Also doch lieber auf den type enthält Silverlight prüfen?!

      Aber warum machst Du überhaupt einen extra Button. Ich dachte eher daran die Fullscreen Aktion (F11) als trigger zu nutzen wie hier:
      http://stackoverflow.com/questions/21461890/browser-f11-fullscreen-does-not-register-with-webkit-full-screen-or-javascript

      Desweiteren hast Du clone missverstanden. Nicht das Element komplett kopieren, sondern verschieben. Durch das clone wird nur sichergestellt, dass das Element 1:1 verschoben wird. Ansonsten hast Du zwei Player auf der Seite, was evtl. zu Problemen führen kann. In jedem Fall führt es zur Verwirrung, wenn der eine Player schon auf Play steht und der andere plötzlich neu gestartet werden muss.

      Ich würde wie bei http://atsud1.tumblr.com/post/94837219115/skygo-germany-dual-monitor-fullscreen-pinned genannt den Player einfach im html-tag neu einfügen und den body-tag selbst auf hidden stellen. Dann kannst Du einfach zwischen Vollbild und Normal togglen. D.h. F11 und man sieht nur das object, was im html-tag eingefügt wurde und der body-tag ist hidden und Esc führt dazu, dass es zurück an die ursprüngliche Stelle geschoben wird und der body-tag bekommt sein visible wieder.

      Zuletzt ist width und height mit 100% immer ein Problem. Ein block-Element auf 100/100 zu setzen erfordert, dass das Elternelement 100% height besitzt. Einfacher geht es dank CSS3 mit 1vh als height bzw. 1vw als width:
      http://stackoverflow.com/a/16837667/318765

      Kann mittlerweile auch jeder Browser:
      http://caniuse.com/#feat=viewport-units

      Löschen
    6. Habe ein bischen rumgesucht, aber musste feststellen das die ganzen Events nur aufgerufen werden wenn über javascript der Vollbildmodus aktiviert wird. Habe auch im Google-Dev-Board diesen Beitrag gefunden, der das untermauert:
      "fullscreenchange events do work, but only if the fullscreen mode is triggered by requestFullScreen.

      There appears to be a security restriction that prevents JavaScript from monitoring if a user manually enables fullscreen mode via a hotkey.
      Alternatively, you can monitor the resize events to see if the window matches the desktop size, but this seems like a hack to me (i.e. would this work on dual-monitors?)
      I decided to abandon monitoring of fullscreen mode, and just use the API to toggle the state."

      Dementsprechend muss der Button wohl bleiben, ich kann aber eine Funktion anbieten die das Ursprüngliche Seitenlayout wieder herstellt. Die anderen Tipps werde ich aber einarbeiten ;)

      Löschen
    7. Evtl. ist es auch gar nicht verkehrt das mit einem separaten Button zu machen. Ansonsten kann der Nutzer ja nicht mehr selbst Fullscreen machen ohne dass ein Object auf 100% gezogen wird. Außer man macht eine Option rein, dass der Fullscreen Faker inaktiv ist.

      Löschen
    8. Ich habe mir gerade das Video angeschaut und musste direkt an das Plugin denken:
      https://getpebble.com/videos/ready-to-go

      Denn es gibt keinen Fullscreen Button. Demnach könnte man auch video-Tags berücksichtigen.

      Löschen
  3. @Dennis B.
    In Chrome unter Erweiterungen den Entwicklermodus durch das setzen des Häckchens aktivieren, dann "Entpackte Erweiterung laden..." anklicken und den Ordner auswählen. Danach kann man über das Symbol oben Rechts in der Ecke das Plugin aktivieren.

    AntwortenLöschen
  4. Hmm,.. hab so viele Sachen jetzt versucht, u.a. ne Virtualbox mit Andoid und Win installiert,..auch dort funzt es nicht...Android unter ner vbox unterstützt die skygo app nicht. Wenn ich win7/8 auf ner Virtualbox installier funzt die autorisierung nicht, warum auch immer. Also bleibt nur noch die Möglichkeit der Suche oder sich seinem Schicksal zu fügen. Letzteres ist nicht so meins, daher frage ich mal hier ob jemand schon eine bequemer alternative hat als das nervige löschen der Zeilen,...

    AntwortenLöschen
  5. FireFox: Rechtsklick irgendwo hin - Element Untersuchen (Q) - Reiter Konsole öffnen - Folgendes eingeben und mit Enter bestätigen:

    document.getElementById("PolymediaShowPlayer").style.position = "fixed";
    document.getElementById("PolymediaShowPlayer").style.top = "0px";
    document.getElementById("PolymediaShowPlayer").style.left = "0px";
    document.getElementById("PolymediaShowPlayer").style.width ="100%";
    document.getElementById("PolymediaShowPlayer").style.height ="100%";
    document.getElementById("PolymediaShowPlayer").style.zindex ="50001";
    $('#header').remove();
    $('#footer').remove();
    $('#jsonContent').remove();
    $('#detailBanner').remove();
    $("div").remove(".detail_details");
    $("div").remove(".detail_actions");

    AntwortenLöschen
  6. Danke, danke, danke @ Philipp 1989!
    Funktioniert auch mit Safari unter OSX

    AntwortenLöschen