Videos

This topic contains information about how you can reference videos from your HTML or XML documents.

Warning:

Tip: To process large video files, you need to increase the available memory (e.g. 3.5Gb of memory for a 2Gb video).

For HTML, the <video> tag can be used without any other styling in your CSS files:

...
<video data="path/to/video.mp4" format="mp4" width="480" height="270">
    <source src="path/to/video.mp4"/>
</video>
...

Note: It is recommended to use absolute paths for @data and @src values like this: src="file:/C:/absolute/path/to/video.mp4".

For XML, you must add CSS rules that pick up the content of an attribute and use it as a source for the video:

...
<para>Like shown in this video: <video src="files/earth.mp4"/>.</para>
...

For example, the CSS rules may look like this:

video {
  display: inline;
}
video[src] {
  content: attr(src, url);
}

Note: It is important to use the url keyword when retrieving the attribute value. It signals that the value is a pointer to an external image.

Change the Video Size

If your XML contains additional attributes such as @width or @height, you can complete the CSS:

video[width] {
  width: attr(width, length);
}
video[height] {
  height: attr(height, length);
}

Notes:

It is also possible to set both @width and @height attributes directly on the video <object>.
If no values are set for width/height (neither from the CSS nor attributes), the extracted video size will be used.

By default, a placeholder is displayed in place of the video. When clicked, this placeholder will launch the video.

It is possible to change this placeholder with a custom one by using the -oxy-video-cover property:

video {
  -oxy-video-cover: url("files/cover.png");
}