Skip to main content
Skip table of contents

Video

<Video>-Controls werden verwendet, um Videos einzubetten.

Neben den allgemeinen Attributen für Controls lassen sich folgende zusätzlichen Attribute für das Element  <Video>  definieren:

AttributBeschreibung
​type

​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)

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

    Der Browser muss den Dateityp des Videos unterstützen!

value

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.
autoplay

Definiert das Autoplay-Verhalten des Videos.

Mögliche Werte:

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

Manche Browser/-einstellungen verhindern Autoplay!

aspectRatioX
aspectRatioY

X-Anteil bzw. 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.


Beispiele

Eingebundenes YouTube-Video

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

Eingebundene statische Ressource

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

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>

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>

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 StringBase64 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.

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.

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.