X4 Produktdokumentation
X4 Produktdokumentation
Breadcrumbs

Video

Mit <Video>-Controls können Sie Videos in Ihre Web App einbetten.

Hinweise zur Verwendung

Ein <Video>-Control wird mit dem Element <Video> erzeugt.

<Video>
...
</Video>

<Video>-Controls können in allen verfügbaren Layouttypen verwendet werden. Weitere Informationen finden Sie unter Layouts.

Attribute

Hinweis:

Es gibt eine Reihe von Standardattributen, die für alle Controls festgelegt werden können. Weitere Informationen zu den Standardattributen finden Sie unter Standardattribute.

Zusätzlich zu den Standardattributen können Sie die folgenden Attribute für <Video>-Controls definieren.

Attribut

Beschreibung

aspectRatioX
aspectRatioY

Definiert den X-Anteil bzw. den Y-Anteil des Seitenverhältnisses.

Für das Seitenverhältnis müssen sowohl aspectRatioX als auch aspectRatioY angegeben werden!

Wenn height und width angegeben werden, dann werden aspectRatioX und aspectRatioY ignoriert!

YouTube-Videos haben standardmäßig ein Seitenverhältnis von 16:9. Bei Videos vom Dateisystem wird das Seitenverhältnis der Datei übernommen.

autoplay

Definiert das Autoplay-Verhalten des Videos.

Hinweis:

Manche Browser/-einstellungen verhindern Autoplay.

Mögliche Werte:

  • true (Standard): Das Video startet, sobald die Seite geladen ist.

  • false: Das Video startet nicht automatisch.

​type

Erforderlich​

Definiert die Art des Videos, das eingebunden wird.

Mögliche Werte:

  • YouTube: Video von YouTube mit der Video-ID einbetten

  • File: Video vom Dateisystem einbinden (Data Binding möglich)

Hinweis:

  • Hierfür wird das HTML-Element <video> verwendet.

  • Der Browser muss den Dateityp des Videos unterstützen.

value

Erforderlich

Video, das eingebettet wird.

Mögliche Werte:

  • YouTube-ID des Videos (falls type="YouTube")

  • URI zu einer Videodatei (falls type="File"). Data Binding ist möglich.


Beispiele

Beispiel 1: Eingebundenes YouTube-Video

XML
<DetailComponent displayName="YouTube" path="YouTube" default="true">
    <FlowLayout>
        <Video type="YouTube" value="feY13KgCMow" />
    </FlowLayout>
</DetailComponent>

Beispiel 2: Eingebundene statische Ressource

XML
<DetailComponent displayName="Resource File" path="File">
    <FlowLayout>
        <Video type="File" value="video.mp4" />
    </FlowLayout>
</DetailComponent>

Beispiel 3: Eingebundenes Video vom Dateisystem mit Data Binding

XML
<DetailComponent displayName="Resource Binding" path="Binding">
    <Properties>
        <Property name="VideoPath" type="String" />
    </Properties>
    <FlowLayout>
        <ComboBox value="#VideoPath">
            <Option displayName="Video 1" value="video1.mp4" />
            <Option displayName="Video 2" value="video2.mp4" />
        </ComboBox>
        <Video value="#VideoPath" type="File" autoplay="true" aspectRatioX="16" aspectRatioY="9" />
    </FlowLayout>
</DetailComponent>

Beispiel 4: Video von einer externen URL

XML
<DetailComponent displayName="External Video" path="External" process="ExternalVideo.wrf">
    <Properties>
        <Property name="ExternalVideo" type="Video" />
    </Properties>
    <FlowLayout>
        <Video value="#ExternalVideo" type="File" aspectRatioX="4" aspectRatioY="3" />
    </FlowLayout>
</DetailComponent>

Hinweis:

Für das Datenelement, das durch den Technical Process bereitgestellt wird, muss mit dem Attribut type="external" festgelegt werden, dass eine externe URL verwendet wird. Ansonsten wird eine interne URL erwartet und es kommt zu einem Fehler.

XML
<Ok>
    <ExternalVideo type="external">
		<!-- Video URL -->
	</ExternalVideo>
</Ok>

Data Binding für value

Das Attribut value des Elements <Video> kann per Data Binding befüllt werden. Dafür muss die Property den Typ String, Base64 oder Video haben.

Wenn ein YouTube-Video (type="YouTube") eingebunden wird, dann muss per Data Binding immer eine gültige YouTube-Video-ID bereitgestellt werden.

Wenn Videodateien eingebunden werden (type="File"), dann werden folgende Inhalte unterstützt:

  • Property-Typ String: Die Property muss einen Dateipfad zu einer Videodatei enthalten. Die Videodatei muss direkt im Ordner Resources des Web App-Projekts liegen.

  • Property-Typ Base64: Die Property muss eine Base64-kodierte Videodatei enthalten. Der Medientyp des Videos muss im Datenelement definiert werden, das vom Technical Process als XML zurückgegeben wird.

    XML
    <MyVideo mediaType="video/mp4">
	<!-- Base64 -->
</MyVideo>

  • Property-Typ Video: Die Property kann entweder einen Dateipfad zu einer Videodatei, eine Base64-kodierte Videodatei oder eine externe URL enthalten. Was bereitgestellt wird, wird über das Attribut type im Datenelement des antwortenden Technical Processes definiert. Für type können die Werte resource (Standard), base64 oder external angegeben werden.

Hinweis:

  • Safari unterstützt keine Videos, die von Dateisystemen eingebunden werden. Verwenden Sie stattdessen externe URLs, die Buffering unterstützen.

  • Videos von Dateisystemen und Base64-kodierte Videos unterstützen kein Buffering, sondern werden auf einmal geladen. Verwenden Sie Videos von Dateisystemen und Base64-kodierte Videos daher nur bei kleinen Videos. Verwenden Sie für größere Videos externe URLs, die Buffering unterstützen.