Video

<Video> controls are used to embed videos.

In addition to the standard attributes for controls, the following attributes are available for the element <Video:

Attribute	Description
​type	Defines the type of the embedded video. Possible values: YouTube: Embed video using the video ID from YouTube File: Embed video from the file system (data binding possible) The HTML element <video> is used for this. The browser must support the file type of the video!
value	Embedded video Possible values: YouTube ID of the video (if type="YouTube") URI to a video file (if type="File"). Data binding is possible.
autoplay	Defines the auto-play behavior of the video. Possible values: true (default): The video starts as soon as the page is loaded. false: The video doesn't start automatically. Some browsers or browser settings prevent auto-play!
aspectRatioX aspectRatioY	X-part or Y-part of the aspect ratio. For the aspect ratio, both aspectRatioX and aspectRatioY must be specified! If height and width are specified, then aspectRatioX and aspectRatioY are ignored! By default, YouTube videos have an aspect ratio of 16:9. For videos from the file system, the aspect ratio of the file is applied.

Examples

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

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

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

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

For the data element provided by the Technical Process, the attribute type="external" must be used to specify that an external URL is used. Otherwise, an internal URL is expected and an error occurs.

XML

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

Data Binding for value

The value attribute of the <video> element can be filled via data binding. For this, the property must be of type String, Base64 or Video.

If a YouTube video (type="YouTube") is embedded, then a valid YouTube video ID must always be provided via data binding.

If video files are included (type="File"), then the following content is supported:

• Property type String: The property must contain a file path to a video file. The video file must be located directly in the Resources folder of the Web App project.

• Property type Base64: The property must contain a Base64-encoded video file. The media type of the video must be defined in the data element that is returned by the Technical Process as XML.

  XML

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

• Property type Video: The property can contain either a file path to a video file, a Base64-encoded video file or an external URL. What is provided is defined by the type attribute in the data element of the responding Technical Process. For type the values resource (default), base64 or external can be specified.

Safari does not support videos that are included by file systems. Use external URLs that support buffering instead!

File system videos and Base64-encoded videos do not support buffering, but are loaded all at once. Therefore, use file system videos and Base64-encoded videos only for small videos. For larger videos, use external URLs that support buffering.