Dateien hochladen nach „components“

components/videoplayer.md

@@ -0,0 +1,197 @@
+---
+noindex: false
+comments: false
+#author: HaPe
+#author_tools: hape
+#level: beginner
+#article_type: info
+#date: 2019-10-28
+last_updated: 2019-10-28
+title: Komponente Videoplayer
+description: 'iStream Tools - Komponente Videoplayer'
+keywords: 'videoplayer, mediaplayer, stream, tools'
+
+---
+
+# Videoplayer
+
+<div class="lead" markdown="1">
+Mit dem Videoplayer bekommst Du Videos direkt in Deinen Stream. Du kannst die Videos uploaden und
+  dann mit einem Klick mit der Maus oder einem Tap auf dem Tablet je nachdem wie du die Console
+  geöffnet hast, starten. Du kannst Dir so wechselnde Hintergründe einrichten und oder "Beep-Videos"
+  einblenden. Kein mühsames suchen auf Youtube und keine Werbeeinblendungen mehr.
+</div>
+
+## Videoplayer einrichten
+
+Erlaubte Dateiformate für Video sind *.mp4, *.avi.
+
+Um einen Videoplayer einzurichten wählst Du einen bereits vorhandenen Videoplayer aus oder erstellst
+  mit dem Add-Button einen neuen Videoplayer und wählst anschliessend diesen aus.
+
+Es stehen Dir nun folgende Einstellungen zur Verfügung:
+
+**Über die generelle Konfiguration:**
+
+- Den Namen des Videoplayers anpassen.
+- Die Startlautstärke festlegen.
+- Die Grösse des Videoplayers festlegen.
+- Ausrichtung des Videos innerhalb des Players.
+- Ein Overlay (Vordergrund) einfügen.
+- Ausrichtung des Overlays festlegen.
+- Ein Underlay (Hintergrund) einfügen.
+- Ausrichtung des Underlays festlegen.
+- Das aktuelle Setup des Audiplayers löschen.
+
+**Die Standard-Buttons:**
+
+- Lautstärke reduzieren
+- Pause
+- Lautstärke erhöhen
+- Schnellzugriff niedrige Lautstärke
+- Loop
+- Schnellzugriff obere Lautstärke
+
+**Button Video (-datei) abspielen:**
+
+- Datei per Drag n Drop oder Auswahl hochladen
+- Name des Buttons anpassen
+- Lautstärke für diese Datei festlegen
+- Farbe des Buttons festlegen
+- Datei löschen.
+
+## Video ausrichten
+
+Evtl. hast Du mehrere Videos aus verschiedenen Quellen, die sich in der Grösse unterschieden. Die
+  eine Gruppe der Videos ist 4:3 (1024x768, 800x600, 640x480, usw.) Die andere Gruppe ist evtl.
+  16:9 (1365x768, 1280x720, 1024x576, usw.) Und dazwischen noch welche, die andere willkürliche
+  Abmessungen haben.
+
+Selbstredend wird es schwierig, all die Videos in Einklang zu bringen. Das heisst, so einzubinden,
+  dass sie alle, ohne Verzerrungen angezeigt werden. Wenn ich einen Videoplayer mit einer Grösse von
+  1280px x 720px, was einem Aspect Ratio von 16:9 entspricht, erstelle, dann passen Videos mit einem
+  Aspect Ratio von 4:3 nicht wirklich in dieses Format. Ein ähnliches Problem entsteht, wenn das
+  eine Video 16:9 1280x720 gross ist und das andere zwar auch 16:9 aber nur 1024x576 gross ist.
+
+Es gibt hier verschiedene Techniken, um diesem Problem zu begegnen, aber es ist natürlich auch klar,
+  dass es nicht die eine Lösung für jeden Fall und jeden Geschmack gibt. Deshalb hast Du es selbst
+  in der Hand, welche der möglichen Setups du anwenden möchtest.
+
+### Videoposition
+
+Die Position bestimmt, was sicher angezeigt wird und von welcher Seite evtl. etwas abgeschnitten
+  wird, bzw. wo im Player evtl. der Hintergrund durchscheint bzw. was transparent ist. Es gibt
+  folgende Positionen.
+
+- links / oben
+- oben / mitte
+- rechts / oben
+- rechts / mitte
+- rechts / unten
+- unten / mitte
+- links / unten
+- links / mitte
+- center / mitte
+
+Wenn Du die Option `center / mitte` auswählst, dann wird das Video exakt in der Mitte des
+  Videoplayers ausgerichtet. Wenn keine weitere Transformation eingestellt wird, dann wird ein Video
+  das kleiner als der Player ist den Player nicht ganz ausfüllen und es wird Hintergrund
+  durchscheinen bzw. es werden Teile des Players transparent sein. Wenn das Video grösser als der
+  Player ist, dann werden Teile des Videos abgeschnitten. In beiden Fällen wird es oben und unten
+  sowie links und rechts immer gleich viel sein, das abgeschnitten wird bzw. teile des Players
+  transparent sind.
+
+Wenn Du die Option `links / oben` auswählst, dann wird das Video exakt links oben im Player
+  ausgerichtet. Der obere Rand des Videos schliesst mit dem oberen Rand des Players ab. Der linke
+  Rand des Videos schliesst mit dem linken Rand des Players ab. Ist das Video grösser als der
+  Player, dann wird das Video rechts bzw. unten beschnitten. Ist das Video kleiner, dann wird rechts
+  bzw. unten im Player nicht alles ausgefüllt.
+
+### Videotransform
+
+Es gibt 4 Einstellungen mit denen das Video in den Player eingepasst werden kann. Das funktioniert
+  im Zusammenspiel mit der Position, wie gerade beschrieben. Die Einstellungen für die
+  Transformation sind wie folgt.
+
+- Video füllt den ganzen Player aus.
+- Video wird in den Player eingepasst.
+- Video wird gestreckt.
+- Keine Anpassung.
+
+<img src="/images/video-transform-1.png">
+
+Bei der Option `Video füllt den ganzen Player aus` wird das Video ausgehend von der eingestellten
+  Position soweit vergrössert, bis der ganze Player ausgefüllt ist. Das Seitenverhältnis wird
+  beibehalten.
+
+Bei der Option `Video wird in den Player eingepasst` wird das Video ausgehend von der eingestellten
+  Position soweit vergrössert, bis das Video den Player soweit wie möglich ausfüllt, ohne dass etwas
+  abgeschnitten wird. Das Video ist komplett sichtbar. Das Seitenverhältnis wird beibehalten. Ist
+  Das Video allerdings schmäler oder niedriger als der Player, dann kann es sein, dass Teile des
+  Hintergrunds durchscheinen bzw. Teile des Players transparent sind.
+
+<img src="/images/video-transform-2.png">
+
+`Keine Anpassung` verhält sich genau so wie oben bei Videoposition beschrieben. Das Video wird nicht
+  vergrössert und nicht verkleinert. Es wird in den Originalabmessungen angezeigt.
+
+Bei der Option `Video wird gestreckt` wird das Video unabhängig des Aspect Ratios einfach gestreckt.
+  Dabei werden sicher alle Bereiche des Players ausgefüllt. Das Video könnte verzerrt dargestellt
+  werden, da das Seitenverhältnis nicht berücksichtigt wird.
+
+## Overlay / Underlay
+
+Wie wir vorher gelernt haben, könnte es sein, dass Teile des Videoplayers Transparent sind. Das
+  würde bedeuten, dass Dinge durch den Player durchscheinen könnten. Um dem zu begegnen hast Du
+  die Möglichkeit ein sogenanntes Underlay (Hintergrund) einzusetzen. Das kann eine schwarze Grafik
+  oder ein Muster oder dergleichen sein. Du kannst für diese Hintergrundgrafik ebenfalls
+  Einstellungen vornehmen, wie Du sie vorher beim Videoplayer gelernt hast. Wenn Du dich für die
+  Verwendung einer Hintergrundgrafik entscheidest, dann wird diese immer geladen, und an Stellen,
+  die durch das Video nicht verdeckt werden, wird dann die Hintergrundgrafik durchscheinen.
+
+Das Overlay (Vordergrund) wird über das Video gelegt. Natürlich hat dieses Overlay selbst
+  transparente Teile, an denen das Video durchscheint. Du könntest als Overlay ein Bild von einem
+  Bilderrahmen wählen. Und an Stelle des Bildes machst Du diese Fläche Transparent. So wird dann das
+  Video immer in einem Bilderrahmen dargestellt. Auch hier gibt es die gleichen Einstellungen
+  wie bei dem Underlay.
+
+Erlaubte Dateiformate sind *.png, *.jpg, *.bmp, *.gif.
+
+## Lautstärke Einstellungen
+
+Wenn Du mehrere Videodateien, womöglich noch aus unterschiedlichen Quellen hast, dann wird Dir
+  vermutlich schon aufgefallen sein, dass diese Dateien selten den gleichen Lautstärkepegel haben.
+  Die eine Datei ist ein bisschen leiser als die restlichen Dateien und eine andere Datei ist ein
+  bisschen lauter als die restlichen. Diesen Unterschied über den Mixer in der Encodersoftware
+  auszugleichen ist etwas mühsam. Zudem kann es auch vorkommen, dass man vergisst den
+  Lautstärkepegel über den Mixer anzupassen.
+
+Mit dem Videoplayer kann man diesen Umstand ausgleichen. Man kann einen Standardlautstärkepegel
+  einstellen. Und die Medien erhalten ihren individuellen Lautstärkepegel. Der individuelle
+  Lautstärkepegel ist immer eine Angabe im Verhältnis zur Grundlautstärke. Daraus wird die
+  tatsächliche Lautstärke errechnet. So kann im optimalen Fall ein stetiges nachregeln im Mixer
+  vermieden werden.
+
+Alle Lautstärkeangaben werden in Prozent angegeben. Angenommen, du stellst die Grundlautstärke auf
+  80% ein, und die Lautstärke der Datei ebenfalls auf 80%, dann ist die tatsächliche Lautstärke
+  64%. Die tatsächliche Lautstärke berechnet sich `(80/100) * (80/100) * 100`
+
+Um das System zu verdeutlichen gehen wir einfach mal davon aus, Du hast 3 Videodateien. Eine davon
+  ist genau richtig abgemischt (Video1). Eine ist etwas zu leise (Video2), und die letzte ist
+  etwas zu laut (Video3). Du richtest nun die Grundlautstärke auf 80% ein. Video1 bekommt ebenfalls
+  80%. Video2, die etwas zu leise ist, bekommt 120% und Video3, die etwas zu laut ist, bekommt
+  60%. Daraus ergeben sich folgende Werte für die tatsächliche Lautstärke.
+
+- Video1 64% (80/100 * 80/100 * 100)
+- Video2 96% (120/100 * 80/100 * 100)
+- Video3 48% (60/100 * 80/100 * 100)
+
+Das schaut in Zahlen ein bisschen nach Misch Masch aus, wenn aber die richtigen Einstellungen
+  ausgewählt werden, erscheinen alle 3 Dateien gleich laut, obwohl sie recht unterschiedlich
+  abgemischt sind.
+
+## in die Encodersoftware einbinden
+
+Der Videoplayer wird am besten angezeigt, wenn beim einrichten der Browsersource die gleichen
+  Grössenangaben verwendet werden, wie sie auch im Streamtool verwendet wurden. Selbstverständlich
+  kann diese Quelle wie jede andere Quelle dann auch per Transform bzw. Filter verändert werden.