X4 Produktdokumentation
X4 Produktdokumentation
Breadcrumbs

Video

<Video> controls can be used to integrate videos into a Web App.

Instructions for use

A <Video> control is created with the <Video> element.

<Video>
...
</Video>

<Video> controls can be used in all available layout types. For more information, see Layouts.

Attribute

Note:

There are a number of default attributes that can be set for all controls. For more information about the default attributes, see Default attributes.

In addition to the default attributes, you can define the following attributes for <Video> controls.

Attribute

Description

aspectRatioX
aspectRatioY

Defines the X portion or Y portion of the aspect ratio.

Both aspectRatioX and aspectRatioY must be specified for the aspect ratio!

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 taken over.

autoplay

Defines the autoplay behavior of the video.

Note:

Some browser/settings prevent autoplay.

Possible values:

  • true (default): The video starts when the page is loaded.

  • false: The video does not start automatically.

type

Required

Defines the type of video that will be included.

Possible values:

  • YouTube: Embed YouTube video with the Video ID

  • File: Integrate video from the file system (data binding possible)

Note:

  • The HTML element <video> is used for this.

  • The browser must support the file type of the video.

value

Required

Video that is embedded.

Possible values:

  • YouTube ID of the video (if type="YouTube")

  • URI to a video file (if type="File"). Data binding is possible.


Examples

Example 1: Embedded YouTube video

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

Example 2: Embedded static resource

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

Example 3: Embedded video from the file system with 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>

Example 4: Video from an external 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>

Note:

For the data element provided by the Technical Process, the attribute type="external" must be set to use an external URL. 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 using data binding. For this, the property must have the 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 embedded (type="File"), the following content is supported:

  • Property type String: The property must contain a file path to a video file. The graphic file must be located 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 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.

Note:

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

  • File system videos and Base64-encoded videos do not support buffering, but load them at once. Therefore, only use video from file systems and Base64-encoded videos for small videos. For larger videos, use external URLs that support buffering.