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.
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.
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). |
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 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.
<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>
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%";
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);
Setting CSS opacity of the video plane is not currently supported.