ubuntuusers.de

ubuntuusers.deWikiZattoo Web Player

Zattoo Web Player

Ausbaufähige Anleitung

Dieser Anleitung fehlen noch einige Informationen. Wenn Du etwas verbessern kannst, dann editiere den Beitrag, um die Qualität des Wikis noch weiter zu verbessern.


Anmerkung: Mozilla Prism befindet sich nicht mehr in den offiziellen Paketquellen. Daher ist die unter Chromium beschriebene Vorgehensweise derzeit der einzige Weg, Zattoo in einem Browser zu nutzen.

Dieser Artikel wurde für die folgenden Ubuntu-Versionen getestet:

Zum Verständnis dieses Artikels sind folgende Seiten hilfreich:

zattoo_logo_normal.png Der Zattoo Web Player {en} soll in diesem Artikel für die Desktop-Nutzung optimiert werden. Da Zattoo auf Flash basiert, ist dieses zwingende Voraussetzung für die Nutzung in Kombination mit einem Webbrowser.

Mit Prism

Installation von Prism

Prism.png Zuerst muss Archiv/Prism wie im dazugehörigen Artikel beschrieben installiert werden. Nun erstellt man über "Internet -> Prism" die Zattoo-Webanwendung. Hier müssen folgende Zeilen eingetragen werden:

Unter "Web Application":

URL:

1
http://zattoo.com/view/DasErste

Name:

1
Zattoo

Unter "Create Shortcuts": Hier sollte die Option "Desktop" aktiviert werden.

Optimierung

Um nun die Darstellung von möglicherweise störenden Elementen zu säubern, haben die User Roughtrade und Linux-Fan Skripte erstellt.

Hinweis:

Entwicklung, Instandhaltung und Bandbreite einer Webapplikation verursachen Kosten. Diese gedenkt Zattoo durch Werbeeinblendungen zu erwirtschaften. Wenn dem Benutzer etwas an der Fortführung des Services liegt, sollte in Erwägung gezogen werden, diese Bemühungen nicht zu behindern.

Deshalb blenden die folgenden "Optimierungen" das Werbefenster im Gegensatz zu vorhergehenden Versionen nicht mehr aus. Sollte dies auch in Anbetracht obiger Argumente dennoch gewünscht sein, so muss in der Zeile, die auf "@-moz-document url-prefix("http://zattoo.com/") {" folgt, in der durch Kommata getrennten Aufzählung "#tv-frame-ad-iframe" ergänzt werden.

Variante 1

Mit feststehender Seitenleiste, aber ohne ChannelsHeader. Man erstellt mit einem Editor die Datei ~/.webapps/zattoo.tv@prism.app/webapp.css und fügt Folgendes ein[1]:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("zattoo.com") {
#landing-video-content, #landing-ad-blocking-div, #companion {
 display: none !important;
}
#channels {
 height: 100% !important;
}
#mosaic-wrap {
 top: 0 !important;
}
}

@-moz-document url-prefix("http://zattoo.com/") {
#headerpane, #companion, #sidebaradpane, #channels-header, #title {
 display: none !important;
}

#zingspane {
 padding-top: -30px !important;
 margin-top: -30px !important;
 height: 100% !important;
}

#bodypane {
 top: 0 !important;
}

#body, #wrapper {
 top: 0 !important;
}

#mainpane {
 left: 300px !important;
}

.promo {
 display: none !important;
}

zattoo_normal.png
Vorher

zattoo_optimiert.png
Nachher

Variante 2

Mit flexibler Kopfleiste und Seitenleiste sowie ChannelsHeader. Man erstellt mit einem Editor die Datei ~/.webapps/zattoo.tv@prism.app/webapp.css und fügt Folgendes ein[1]:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("zattoo.com") {
#landing-video-content, #landing-ad-blocking-div {
 display: none !important;
}
#mosaic-wrap {
 top: 0 !important;
}
}

@-moz-document url-prefix("http://zattoo.com/") {
#companion, #title, #sidebaradpane, #channels-header {
 display: none !important;
}
#body, #wrapper {
 top: 0 !important;
}
#headerpane {
 z-index: 2 !important;
 position: absolute !important;
 width: 100% !important;
 background: #000 !important;
 top: -47px !important;
}
#headerpane:hover {
 top: 0 !important;
}
#channels {
 height: 100% !important;
}
#zingspane {
 z-index: 1 !important;
 left: -296px !important;
 background: #000 !important;
}
#zingspane:hover {
 left: 0 !important;
}
#controlpane {
 z-index: 99 !important;
 height: 90% !important;
 border-right: 8px solid #222 !important;
 -moz-border-radius-topright: 3px;
 -moz-border-radius-bottomright: 3px;
 border-top-right-radius: 3px;
 border-bottom-right-radius: 3px;
 left: -305px !important;
 background: #000 !important;
 }
#controlpane:hover {
 left: 0 !important;
 }
#mainpane {
 left: 0 !important;
 z-index: 0 !important;
}
.promo {
 display: none !important;
}
}

Variante 3

Mit einblendbarer Senderwahl, ansonsten reduziert auf das wesentliche (gültig ab Zattoo Layout vom 10.12.2012). Man erstellt mit einem Editor die Datei ~/.webapps/zattoo.tv@prism.app/webapp.css und fügt Folgendes ein[1]:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document url-prefix("http://zattoo.com/") {
	#header {
	top: 0 !important;
	height: 0 !important;
	}
	#headerpane {
	background: none !important;
	background-image: none !important;
	height: 22px !important;
	}
	#tabs #list_tabs {
	display: none !important;
	}
	#logo, #auxlinks span.tab,
	.listheader, .zapper_promo {
	display: none !important;
	}
	#identity, #main_tabs, #main_tabs li, #header a {
	color: #555 !important;
	}
	#main_tabs, #main_tabs li {
	background: none !important;
	background-image: none !important;
	border: 0 !important;
	top: 2px !important;
	}
	#main_tabs li a[href*="subscribe"] {
	display: none !important;
	}
	#controlpane {
	z-index: 99 !important;
	height: 100% !important;
	border-right: 8px solid #222 !important;
	-moz-border-radius-topright: 3px;
	-moz-border-radius-bottomright: 3px;
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
	left: -305px !important;
	background: #000 !important;
	}
	#controlpane:hover {
	left: 0 !important;
	}
	#zingspane, .scrollwrap.llContainer {
	top: 0 !important;
	height: 100% !important;
	}
	
	#sidebaradpane, #social {
	display: none !important;
	}
	#mainpane, #mainpane {
	z-index: 1 !important;
	left: 0 !important;
	right: 0 !important;
	width: auto !important;
	}
}

zattoo_vollbild_sidebar_aus.png
Vollbild ohne Kopf- und Seitenleiste

zattoo_vollbild_sidebar_an.png
Vollbild mit Seitenleiste

zattoo_vollbilld_headerbar_an.png
Vollbild mit Kopfleiste

Zur "Perfektion" kann man nun noch einen Menüeintrag erstellen[3].

Icon herunterladen

Das dafür nötige Icon zattoo.png kann in den Ordner /usr/share/pixmaps heruntergeladen werden.

Eintrag in das Feld "Befehl:"

Befehl:

1
"prism" -override "~/.webapps/zattoo@prism.app/override.ini" -webapp zattoo@prism.app

Mit Chromium

Mit Chromium kann man auf sehr einfache Weise einen Webplayer für Zattoo realisieren. Zuerst installiert man die Erweiterung Auto Login {en}. Dann ruft man einmal zattoo.com {en} auf, speichert das Passwort und erlaubt die automatische Anmeldung auf der Webseite.

Dann erstellt man mit einem Editor die Datei ~/.local/share/applications/Zattoo.desktop im Homeverzeichnis. Der Pfad zur Symbol- bzw. Bilddatei muss noch angepasst werden [2].

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
[Desktop Entry]
Type=Application
Name=Zattoo Webplayer
Comment=Zattoo with Chromium
Exec=/usr/bin/chromium-browser --app=http://zattoo.com/#preview
Icon=/PFAD/ZU/Zattoo.png
NoDisplay=false
Path[$e]=
StartupNotify=true
Terminal=false
TerminalOptions=
Categories=AudioVideo;

Nun sollte bei Ubuntu-Varianten mit einem Anwendungsmenü unter "Multimedia -> Zattoo Webplayer" ein neuer Eintrag zu finden sein, über den man Zattoo bequem mit Chromium aufrufen kann (getestet unter Ubuntu 12.10).

Diese Revision wurde am 18. Mai 2013 14:40 von aasche erstellt.
Die folgenden Schlagworte wurden dem Artikel zugewiesen: TV, Internet