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:
Attribut | Beschreibung |
---|---|
type | Definiert die Art des Videos, das eingebunden wird. Mögliche Werte:
|
value | Video, das eingebettet wird. Mögliche Werte:
|
autoplay | Definiert das Autoplay-Verhalten des Videos. Mögliche Werte:
Manche Browser/-einstellungen verhindern Autoplay! |
aspectRatioX aspectRatioY | X-Anteil bzw. Y-Anteil des Seitenverhältnisses. Für das Seitenverhältnis müssen sowohl Wenn 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
<DetailComponent displayName="YouTube" path="YouTube" default="true">
<FlowLayout>
<Video type="YouTube" value="feY13KgCMow" />
</FlowLayout>
</DetailComponent>
Eingebundene statische Ressource
<DetailComponent displayName="Resource File" path="File">
<FlowLayout>
<Video type="File" value="video.mp4" />
</FlowLayout>
</DetailComponent>
Eingebundenes Video vom Dateisystem mit Data Binding
<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
<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.
<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ürtype
können die Werteresource
(Standard),base64
oderexternal
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.