Video plane element properties

Introduction

The <videoplane> element is a Motorola variant of the <video> element which is defined in HTML 5. It only focuses on positioning the video surface relative to the graphics surface of the currently rendered page. Other features of the <video> element, such as media control, has been removed since this is solved differently in KreaTV.

The element behaves just like a regular HTML element would. You can set the height and width directly or, preferably, you can manipulate the tag through style sheets. For positioning just use standard HTML/CSS methods.

Attributes

Attribute Type Description
index integer This index can only be set once when the video plane is created.
Values:
0 : normal video plane (default)
1 : picture in picture video plane
x readonly Current horizontal position.
y readonly Current vertical position. This attribute is read-only.
width integer The width of the video surface.
height integer The height of the video surface.
clipX readonly The x position of upper left corner of the clip area.
clipY readonly The y position of upper left corner of the clip area.
clipWidth readonly The width of the clip area.
clipHeight readonly The height of the clip area.
transformX readonly The x position of upper left corner of the transform area.
transformY readonly The y position of upper left corner of the transform area.
transformWidth readonly The width of the transform area.
transformHeight readonly The height of the transform area.
subtitles boolean Show subtitles if true, hide subtitles if false (default).

Note! The default width and height of the video plane is zero. This means that the video plane is not visible until these values are set.

Note! Setting the CSS property that corresponds to height and width will override the element's attributes.

Note! It may be possible that certain video plane geometry configurations are not supported by the target hardware. In cases when setting such geometries, appropriate error messages will be displayed in the log.

Functions

Name Description
setVideoClip(integer x, integer y, integer width, integer height) Sets the shown clip area of the video. The clip area should be within video size, i.e. 0 <= x <= videoWidth, 0 <= y <= videoHeight, 0 <= width <= videoWidth - x, 0 <= height <= videoHeight - y. The default is (0, 0, videoWidth, videoHeight).
setVideoTransform(x, y, width, height) Selects the area in the videoplane coordinates the video clip area shall be transformed to. This should be within videoplane area, i.e. 0 <= x <= videoplane.width, 0 <= y <= videoplane.height, 0 <= width <= videoplane.width - x, 0 <= height <= videoplane.height - y. The default transformation is the entire video plane (0, 0, width, height).

Aspect ratio handling

If full screen video is shown (the video surface covers the entire screen), the adaptive video mode configuration decides how aspect ratio conversion shall be done. It can be configured to do pillar boxing, letter boxing, center cut, zoom or any other static aspect ratio conversion. It can not be configured to do dynamic conversion, like pan and scan.

If the portal developer wants to override the configuration from the video output service, this is done using the <videoplane> element. Also, when the video is not full screen and for the PiP <videoplane> element, there is no default handling of the aspect ratio for the video content. This means that proper aspect ratio handling (ie. pillar- and letterboxing) must be obtained by using the functions setVideoClip and setVideoTransform.

Video Overlaying

Video overlaying can be done by using the CSS z-index property. An element with greater z-index will be placed above elements with lower z-index.

Note! It is currently not possible to set the video plane semi transparent with the CSS opacity property. Other elements can however be semi transparent on top of the video element.

Examples

Positions the video surface on the screen with a height and width of 300X300 pixels. the z-axis.
<videoplane id="videoplane" style="position:absolute; 
                                      left:0; 
                                      top:0; 
                                      height: 300px; 
                                      width: 300px;"
></videoplane>
or
<videoplane id="videoplane" height=300 width=300></videoplane>
One way of doing full screen using style sheet attributes for the video plane tag.
<videoplane id="videoplane" style="position:absolute; 
                                      left:0; 
                                      top:0; 
                                      height: 100%; 
                                      width: 100%">
</videoplane>
Example of z-index positioning. The z-index is used for positioning the surface along the z-axis.
<videoplane style="z-index:10; 
                      position:absolute; 
                      top:200px; 
                      left:100px;">
</videoplane>

<div style="z-index: 2; 
               position:absolute; 
               top:250px; 
               left:50px;">
This is text with lower z-index
</div>

<div style="z-index: 20; 
               position:absolute; 
               top:300px; 
               left:50px;">
This is text with greater z-index
</div>

JavaScript Examples

Set subtitles with JavaScript
  videoplane = document.getElementById("videoplane");
  videoplane.subtitles = true; // Enable subtitles
  videoplane.subtitles = false; // Disable subtitles

Note! Before dealing with subtitles Information Service variables cfg.media.subtitling.* can be set in order to define automatic selection of subtitles type and language priorities.

Full screen with JavaScript:
  videoplane = document.getElementById("videoplane");
  videoplane.style.position = "fixed";
  videoplane.style.height = "100%";
  videoplane.style.width = "100%";

Aspect Ratio and Zoom Examples

576I 4:3 video with pillar box in a videoplane(width=640, height=360, 16:9).
  width = 720 * (360 / 576);
  x = (640 - width) / 2;
  videoplane.setVideoTransform(x, 0, width, 360);
720P 16:9 video with letter box in a videoplane(width=800, height=600, 4:3)
  height = 720 * (800 / 1280);
  y = (600 - height) / 2;
  videoplane.setVideoTransform(0, y, 800, height);
Zoom upper-left quarter of a video to whole videoplane area.
  videoplane.setVideoClip(0, 0, videoWidth/2 ,videoHeight/2);

Known Limitations

Setting CSS opacity of the video plane is not currently supported.