Player-Erweiterungen

Diverse Informationen und Anleitungen zur Player-Einrichtung oder Erweiterung.

Playereinstellungen (Parameter)

WICHTIG:
Die folgenden Parameter und Einstellungen können Sie manuell selber setzen.
Der reguläre Weg wäre jedoch, den Player in Ihrer Verwaltungs-Oberfläche zu konfigurieren. 


Sie erhalten bei der Einrichtung von Ihrem Streamingserver Paket zwei Player-Vorlagen:
einen LIVE-Player und einen DATEI-Player.

Normalerweise wird der Player als iFrame eingefügt. Dies ist ein allgemeiner HTML-Standard und bietet technische Vorteile durch die strenge Trennung von Player-Code und Code auf Ihrer Webseite.

Sie fügen lediglich den flexiblen iFrame-Code ein (= der Player), und alle Videoinhalte werden von uns geladen, ohne Ihre Webseite zu belasten oder zu beeinflussen. Das hat den großen Vorteil für Sie, dass der Player immer aktuell auf neue Entwicklungen im Bereich Browser und Mobilgeräte reagiert. Wir machen automatisch die technischen Anpassungen. Und da sich für Sie nichts ändert, muss auf Ihrer Webseite nicht jeder Playercode angepasst werden, nur weil beispielsweise der Firefox keinen Flashplayer mehr unterstützt oder eine neue Version von iOS oder Android erscheint.


Beispiel-iFrame:

<iframe width="830" height="467" style="border: none" referrerpolicy="strict-origin"  allowfullscreen 
src="https://start.video-stream-hosting.de/player.html?serverapp=vsh-vod&streamname=video-stream-hosting-testvideo.smil"></iframe>

Der Playercode (iFrame) besteht aus verschiedenen Einstellungen.


Parameter für Funktionen des Players: 

Funktions-Parameter:

Erklärung:

&playerSprache=DE
&playerSprache=EN
&playerSprache=FR
&playerSprache=IT
Die Anpassung der Sprache erfolgt normalerweise automatisch. Solange der Browser als eingestellte Nutzersprache D, A oder CH angibt, sind Texte deutsch - ansonsten englisch.
Über diesen Parameter stellen Sie die Sprache der Anzeigetexte (und ggf. Fehlermeldungen) fest auf deutsch, englisch, französisch oder italienisch ein.
&nocookie=1 Wird der Parameter "nocookie=1" übergeben, wird keine "seid"-Cookies angelegt.

Wichtig: sollten Sie andere Parameter setzen, die potentiell personenbezogene Daten speichern wie eine SecureID-, Kennwortabfrage, Formulare, Computershare-Token, usw. dann wird dieser nocookie-Parameter ignoriert.
&secureid=abcd Dieser Parameter wird nur im Zusammenhang mit einem gesicherten Zugang verwendet. Weitere Informationen finden Sie unter diesem Artikel.
&autostopnachsek=120
Der Stream wird nach einem gewünschten Zeitraum automatisch gestoppt. Der Nutzer kann per Klick wieder starten. Dies hilft Ihnen, wenn z.B. manche Nutzer Ihren Livestream einer Naturkamera oder dem Stadt-Panorama über viele Stunden laufen lassen und Sie dies nicht wünschen.

vorspann & abspann

Diese Funktion war früher aktiv (andere Playertechnologie). Dies ist ein Beispiel für eine Funktion, die wir individuell für Sie umsetzen können. Es entstehen ca. 150 Euro Kosten und Sie können sie danach dauerhaft nutzen.
Vor Ihrem Livestream oder auch vor einem Dateistream wird hiermit ein Vorspann (z.B. Werbung) bzw. im Anschluss ein Abspann (Preroll, Postroll) abgespielt.

&autostart=1

Dieser Parameter startet einen Stream automatisch nur in Verbindung mit dem Parameter &mute=1. Der "mute" Parameter deaktiviert den Ton. Das ist leider notwendig, da aktuelle Browser den automatischen Videostart mit aktivem Ton verhindern. 


Hinweis: Unter besonderen Umständen, mehrfaches laden Ihrer Homepage, bei aktivem Livestream, startet der Stream auch ohne folgenden "mute" Parameter automatisch, weil der Browser erkennt, dass Sie die Seite bereits besucht haben. 

&mute=1

oder

&mute=2

Dieser Parameter hat zwei Varianten:

a) Die Zahl 1 hinter dem Parameter startet den Streamabruf im Player mit abgeschalteter Audio-Ausgabe und einem auffälligen pulsierenden Lautsprecher Hinweis, dass der Ton aktiviert werden muss. 


b) Die Zahl 2 hinter dem Parameter startet den Streamabruf im Player ohne einen pulsierenden Lautsprecher Hinweis. 


Wichtig: Sind beide Parameter &autostart=1&mute=2 gesetzt, wird beim Autostart keine offensichtliche Meldung angezeigt, dass der Ton auf stumm geschaltet ist.

&startsekunde=5

Ein Dateistream startet an einer gewünschten Position innerhalb einer Videodatei. Dh. es wird automatisch zu der gewünschten Position "gespult" um beispielsweise per Link ein Schulungsvideo an einer gewünschten Position zu öffnen.
Hierüber lassen sich auch Kapitelmarken, etc. auf Ihrer Webseite realisieren.

Beispiel anschauen.

&sprachen=DE,EN

Wenn Sie Livestreams in verschiedenen Sprachen produzieren (z.B. mit Simultan-Dolmetscher) können Sie diese auch im selben Player abrufen und auswählbar machen.

Der Player lässt zeigt dann unten rechts einen "Sprachschalter" an. Beachten Sie dazu bitte folgende Anleitung: https://docs.video-stream-hosting.de/books/diverse-hilfestellungen/page/mehrsprachiger-livestream-mittels-verschiedener-livestream-slots 

Hinweis: Für mehrere Livestreams die Sie parallel senden, benötigen Sie weitere Livestream-Slots.


Parameter für Änderungen am Aussehen des Players: 

Funktions-Parameter:

Erklärung:

&bgcolor=ffffff Die Hintergrundfarbe des Players ist einstellbar. Dieser Wert entspricht einem hexadezimalen Farbcode und wird ohne Raute oder "0x" am Anfang eingetragen
&timelinecolor=ff0000 Hiermit können Sie die Farbe der Zeitleiste steuern. Dieser Wert entspricht einem hexadezimalen Farbcode und wird ohne Raute oder "0x" am Anfang eingetragen
Beispiel anschauen
&bgimage=https://domain.de/grafik.jpg Sie können eine Hintergrundgrafik für den Player vorgeben. Diese wird sichtbar wenn ein Dateistream noch nicht gestartet wurde, bzw. wenn ein Livestream nicht aktiv ist. 
&bgimagesendepause=19,7,http://domain.de/grafik.jpg Ein Bild wird von 19 bis 7 Uhr als Grafik angezeigt (kein Player).
&playbutton=https://domain.de/playbutton.png Überschreiben Sie den Playbutton mit einer anderen transparenten Grafik. 
&playbuttoncolor=FF0000

Hiermit können Sie die Farbe des Playbuttons steuern. Dieser Wert entspricht einem hexadezimalen Farbcode und wird ohne Raute oder "0x" am Anfang eingetragen

Beispiel anschauen

&playsinline=1  Kann auf 1 gesetzt werden. Video startet ohne Fullscreen unter iOS. Kann nützlich sein, wenn beispielsweise unter dem Livestream auf dem mobilen Gerät auch der Chat bedienbar bleiben soll. 
&ohneplaybutton=1 Versteckt den Playbutton in der Mitte dauerhaft. Video kann durchs klicken/tippen ins Bild gestartet werden. Wenn das Video spielt, gibt es die Steuerleiste unten zum Stoppen, etc.. 
&medialeisteNichtAusblenden=1 Die Steuerleiste unten wird nicht mehr automatisch ausgeblendet, während das Video spielt. 



Untertitel und Übersetzung (Subtitles, Captions)

Untertitel und auch die Anzeige einer Übersetzung sind für Dateistreaming in jedem unserer Streamingpakete möglich.

vsh-subtitles.png

Bitte beachten: wie bieten die technische Bereitstellung an. Die Übersetzung bzw. der Inhalt werden nicht von uns erbracht. Für eine Übersetzung in unbekannte Sprachen empfehlen wir den Google Übersetzer. Dieser ist nicht perfekt, aber von den automatischen Übersetzern einer der besten.

Sie erhalten gerne eine Vorlagen-Datei, in der die Texte/Untertitel eingetragen werden. Hier bestimmen Sie auch zu welcher Zeit der Text im Video erscheint und wieder verschwindet. Solche Dateien können Sie z.B. auf Ihrer Webseite ablegen (vergleichbar einer JPG-Grafikdatei) und dort jederzeit beliebig anpassen.

Wir arbeiten mit dem offiziellen HTML5 Standard. Hierdurch können alle aktuellen und verbreiteten Browser und Geräte damit umgehen (PCs, Smartphones, Tablets, ... Mac, Windows, Linux, Apple iOS, Android, etc.). Die Kompatibilität ist in allen gängigen Browsern gegeben: Chrome, Firefox, Safari, Edge, IE11, usw.

Bitte verwenden Sie VTT Dateien. SRT-Dateien lassen sich online auf diversen Webseiten automatisch in VTT konvertieren.

Ihre VTT-Dateien werden auf Ihrer Webseite hinterlegt. Per Player-Parameter wird die URL die zu Ihrer Datei führt angegeben. 

Bitte beachten Sie die zwei folgenden Player. Darunter befindet sich jeweils der Beispiel-Code.

Demoplayer Untertitel (Text in Originalsprache)

<iframe style="border: none;" width="830" height="467" referrerpolicy="strict-origin" allowfullscreen src="https://start.video-stream-hosting.de/player_videojs.html?serverip=62.113.210.2&serverapp=vsh-vod&smil=video-stream-hosting-testvideo.smil&bgimage=https://start.video-stream-hosting.de/video-stream-hosting-testvideo.jpg&untertitelDatei=https://www.blitzvideoserver.de/untertitel/untertitel-vsh.vtt&untertitelLand=de&untertitelAnzeige=Deutsch&untertitelAutoaktiv=1" ></iframe>

 


Demoplayer Übersetzung (in verschiedene Sprachen)

<iframe style="border: none;" width="830" height="467" referrerpolicy="strict-origin" allowfullscreen src="https://start.video-stream-hosting.de/player_videojs.html?serverip=62.113.210.2&serverapp=vsh-vod&smil=video-stream-hosting-testvideo.smil&bgimage=https://start.video-stream-hosting.de/video-stream-hosting-testvideo.jpg&uebersetzungDateiDE=https://www.blitzvideoserver.de/untertitel/translation-vsh-de.vtt&uebersetzungDateiEN=https://www.blitzvideoserver.de/untertitel/translation-vsh-en.vtt&uebersetzungDateiEN=https://www.blitzvideoserver.de/untertitel/translation-vsh-en.vtt&uebersetzungDateiFR=https://www.blitzvideoserver.de/untertitel/translation-vsh-fr.vtt&uebersetzungDateiES=https://www.blitzvideoserver.de/untertitel/translation-vsh-es.vtt&uebersetzungDateiIT=https://www.blitzvideoserver.de/untertitel/translation-vsh-it.vtt&uebersetzungDateiTR=https://www.blitzvideoserver.de/untertitel/translation-vsh-tr.vtt&uebersetzungDateiZH=https://www.blitzvideoserver.de/untertitel/translation-vsh-zh.vtt&untertitelAutoaktiv=1" ></iframe>

 

360 Grad Livestream und Dateistream

Rein technisch ist die Übertragung von einem 360° Video in Form der übertragenen Daten das selbe wie die Übertragung von jedem anderen Stream: Live- wie auch Dateistreaming. 

Gespeichert werden 360° Videos wie jedes andere Video als "rechteckiges Video". In diesem Format erfolgt auch die Übertragung an den Player. Erst der Player verzerrt (bzw. entzerrt) das Video und projiziert dies auf eine "Kugel" in der sich der Betrachter befindet und in eine Richtung schaut. Hierdurch steht der Eindruck einer 360° Umgebung.

Das untern folgende 360° Beispiel-Video hat eine Auflösung von 1280x720 Pixeln und eine Datenrate von ca. 2000 kbit/s. Hierdurch wird verdeutlicht, welche Auflösungen für 360 Grad Videos benötigt werden, bis ein scharfer Eindruck entsteht. diese 1280er Breite ist das absolute Minimum, welches wir empfehlen würden.
Durch die geringe Auflösung ist es jedoch auch für mobile Zuschauer einfach übertragbar. Zu empfehlen ist eine Erweiterung der Auflösung auf 4k oder 5K mit z.B. 8000 kbit/s Datenrate.

360 Grad Videos hat folgende Besonderheit bezogen auf die Auflösung: während bei der normalen Darstellung eines rechteckigen Videos (16:9 Format) mit z.B. 1280 Pixel Breite die volle Breite dargestellt wird, wird bei der 360 Grad Projektion nur grob ein Drittel angezeigt (360 / 3 = 120 Grad Sichtfeld) um dem Sichtfeld des menschlichen Auges zu entsprechen. Das Sichtfeld ist eigentlich größer, aber durch die gewählten 120 Grad entsteht ein realistischer Eindruck ohne Fischaugen-Effekt auf dem Monitor.
1280 volle Videobreite / 3 = 426 Pixel. Der Zuschauer sieht das Video real in einer Auflösung mit 426 Pixel Breite je Blickrichtung. Dies ist für den Eindruck eines scharfen HD-Video natürlich zu gering!
Daher ist für 360 Grad Video eine 4K oder 5K Auflösung zu empfehlen! Die 3840 Pixel der 4K Videobreite der Videodatei hat in der 360 Grad Darstellung dann 1280 Pixel in der Breite. Wenn über Ihre Kamera verfügbar, können Sie auch noch höhere Auflösungen übertragen.

Bitte achten Sie jedoch auf die maximale Datenrate von 8 Mbit/s. Wenn Sie mehr Datenrate benötigen, ist dies gegen Aufpreis möglich.

Einen 360 Grad Streaming-Player bieten wir so an, wie Sie ihn hier sehen. Ihr Videomaterial (ob Live oder als Datei) muss entsprechend aufbereitet gesendet bzw. als Datei hochgeladen werden. 180°/360° Streaming ist in jedem unserer Streamingpakete enthalten.

Den Player hierfür bieten wir an "wie er ist". Bei Kompatibilitätsproblemen mit manchen Browsern oder Mobilgeräten gibt es nicht in jedem Fall eine fertige Lösung für dieses Sonderformat. Auch die Kombination mit Zugriffsschutz, Kapitelmarken, usw. sollte im Vorfeld geprüft werden. 


Bitte testen Sie Ihre Anforderungen mit diesem 360° Beispiel Videostream:

 

Player-URL

Um Ihren bestehenden Player auf einen 360 Grad Player umzustellen, ändern Sie bitte die URL von regulär:
https://start.video-stream-hosting.de/player.html (...)
zu: 
https://start.video-stream-hosting.de/player360grad.html (...)

Responsive Player

Ein "responsives Design" erlaubt die automatische Anpassung der Größe einer Webseite.
Beispielsweise passt sich die Breite von Textspalten und die Position und Formatierung des Menüs an den verfügbaren Platz an. Beispielsweise soll die selbe Webseite auf einem Mobilgerät (mit wenig Platz auf dem Bildschirm), als auch auf einem PC mit großem Monitor und Browserfenster optimal angezeigt werden.

Durch ein "responsive" reagierendes Layout passen sich die verschiedenen Bausteine der Seite dynamisch an kleinere und größere Platzverhältnisse an. Beispielsweise wird das Menü einmal groß und einmal klein angezeigt. Innerhalb einer responsiven Webseite soll sich auch der Videoplayer an den verfügbaren Platz anpassen.

Technisch gesehen wird die Darstellung per CSS (und ggf. Javascript) dynamisch angepasst.
Hinweis: Ihre Webseite muss bereits responsive sein, wenn sich der Player in Ihrem Layout responsive verhalten soll.


Allgemeine Grundlagen für eine responsive Größenanpassung

a) Wird ein Textinhalt z.B. in einem DIV-Container auf einer herkömmlichen Webseite in der Breite verändert, passt sich die Testdarstellung dieser Breite automatisch an. Natürlich bleibt der Text inhaltlich der selbe und auch die Buchstabengröße bleibt unverändert. Wird der Textbereich jedoch schmaler, können weniger Worte je Zeile dargestellt werden, und somit wird sich der Platzbedarf des Text nach unten länger! Wird der Textbereich breiter, passen mehr Worte in jede Zeile, es werden weniger Zeilen benötigt und somit nimmt die Höhe des Textbereich ab. Technisch: ein umliegender DIV-Container wird sich entsprechend in der Höhe anpassen und die darunter folgenden Inhalte werden verschoben.

b) Wird nicht ein Text, sondern ein Foto eingefügt und in der Breite verändert, wird es ebenfalls automatisch angepasst - jedoch anders als Text! Wird die Anzeigebreite des Fotos schmaler eingestellt, wird dieses in der Anzeigehöhe nicht höher, sondern kleiner! Dies ist wichtig damit das Foto nicht verzerrt. Technisch: ein umliegender DIV-Container würde sich entsprechend anpassen.

Beim Verändern der Breite verhalten sich daher Textinhalte und Fotos entgegengesetzt.


Wie verhält sich die Breite und Höhe eines Videoplayer?

Beim Videoplayer erwarten wir optisch das selbe Verhalten wie bei einem Foto. Ein Video soll nicht verzerren und sich somit im selben Seitenverhältnis in der Größe anpassen.
Der HTML-Standard wird ein Video jedoch anders behandeln! Wird die Breite angepasst, bleibt die Höhe unverändert. Wird die Höhe angepasst, wird hierdurch die Breite nicht beeinflusst. Würde der Player z.B. breiter, aber die Höhe unverändert bleiben, dann wäre entweder das Videobild verzerrt oder es würden vom Videoplayer schwarze Balken eingefügt (der nicht verwendete Platz wird mit schwarz aufgefüllt).

Diese automatische Anpassung der Höhe hat im Browser einen wesentlichen Unterschied zu Fotos: bei Fotos "kennt" der Browser das passende Seitenverhältnis (aus der Fotodatei ausgelesen)! Dies ist bei Videos nicht der Fall!
Der Player weiß dies intern, aber nicht der Browser bei der Größenvorgabe für das iFrame. Der Player hat keinen Einfluss darauf, welche Einstellungen Ihre Webseite vorgibt. Der Player kann nur den verfügbaren Platz ausfüllen.

Das korrekte Seitenverhältnis wäre meistens 16:9 – aber könnte je nach Datei, Videokamera oder Videoschnitt genauso 4:3, 9:16 (Hochformat) oder komplett anders ausfallen. Dieses Seitenverhältnis wird dem Videoplayer im HTML-Code (iFrame) von Ihrer Webseite vorgegeben. 

Wie wird die Größe / Seitenverhältnis angegeben?

 

CSS-Code für den iFrame Player:

Sie fügen den Videoplayer an einer belieben Position auf Ihrer Webseite ein (z.B. in einen DIV-Container). 

Der Player besteht aus einem HTML-konformen iFrame. Sie können dieses iFrame wie jedes andere HTML-Element so anpassen wie Sie es benötigen. Der Player wird sich innerhalb des iFrame immer der von Ihnen gesteckten Breite und Höhe zu 100% anpassen. Der Player kann jedoch von sich aus keinen Einfluss auf die umliegende Webseite nehmen.

Vor der responsiven Anpassung des iFrame hat dieser eine feste Höhe und Breite:

<iframe width="640" height="360" style="border: none" referrerpolicy="strict-origin" allowfullscreen src="https://start.video-stream-hosting.de/player.html?serverip=62.113.210.1&serverapp=ihrAccount-live&streamname=livestream"></iframe>


Anpassungen:

So sollte der Player nun aussehen:

<div class="videodiv">
<iframe class="videoiframe" width="100%" height="100%" style="border: none" referrerpolicy="strict-origin" allowfullscreen src="https://start.video-stream-hosting.de/player.html?serverip=62.113.210.1&serverapp=ihrAccount-live&streamname=livestream"></iframe>
</div>

Hinzu kommt die Größensteuerung per CSS:

.videodiv {
 position: relative;
 padding-bottom: 56.25%;
 padding-top: 0px;
 height: 0;
}

.videoiframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

Wenn Ihnen Stichwörter wie "CSS" nichts sagen, hilft unser Support gerne weiter. Wichtig ist jedoch, dass Ihre Webseite bereits 'responsive' auf Größenveränderungen reagiert. Ist dies nicht der Fall, kann der Player sich auch nicht anders verhalten.