Video element properties

Introduction

The <video> element is a replacement of <videoplane> tag in Webkit browser. Here we will focus on positioning the video surface relative to the graphics surface of the currently rendered page.

To know how to port from a html portal to svg portal, see Porting from HTML Portal to SVG Portal

The <video> 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.

The <clipRectangle> element is a rectangle window which is responsible for showing the video.

Attributes

Element	Attribute	Type	Description
video	x	integer	horizontal position for video plane (upper-left corner).
	y	integer	vertical position for video plane (upper-left corner).
	width	integer	The width of the video surface.
	height	integer	The height of the video surface.
	ekioh:colourKey	integer	sample:#ff000000
	overlay	enum	video zone will be on the topest of the window if the value is top.
	preserveAspectRatio	enum	the value could be [defer][x[Min|Mid|Max][Y[Min|Mid|Max]][slice] or none. example:xMidYMid, none, deferxMidYMid, deferxMidYMidslice.
	clip-path	string	set video source for a clip window. example:url(#videoClip)
clipRectangle	x, y, width, height	integer	the position and size of the clip window.

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.

Functions

Name	Description
setAttribute(string name, string value)	Set the attribute with value
setAttributeNS(string namespace, string name, string value)	Set the attribute with value in namespace

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 attribute "preserveAspectRatio" of the <video> element.

Video Overlaying

To make the video element overlay the other content, set the overlay attribute to top.

Examples

Positions the video surface on the screen with a width and height of 320X240 pixels. And the video zone is on the topest of the window.

<video>
    id="video"
    visibility="visible"
    focusable="true"
    overlay="top"
    x="10" y="30"
    width="320" height="240"
    begin="indefinite"
</video>

JavaScript Examples

Create video plane and set it to full screen mode with JavaScript:

   //create video plane
   video = document.createElement("video");
   video.setAttribute("id","video");
   video.setAttribute("visibility","visible");
   video.setAttribute("focusable","true");
   video.setAttribute("overlay","none");
   video.setAttribute("x",x);
   video.setAttribute("y",y);
   video.setAttribute("width",width);
   video.setAttribute("height",height);
   video.setAttribute("begin","indefinite");
   video.setAttribute("ekioh:colourKey","#ff000000");
   video.setAttributeNS(gXLINKNS,"href","");
   video.setAttribute("preserveAspectRatio","xMidYMid");

   //make the video full screen.
   video.setAttribute("overlay","top");
   video.setAttribute("x",0);
   video.setAttribute("y",0);
   var w=720;
   var h=576;
   //get the screen size from viewBox object.
   var viewboxstring = document.documentElement.getAttributeNS(null, "viewBox");
   if (null != viewboxstring && "" != viewboxstring) {
      var vbArray = viewboxstring.split(" ");
      if (vbArray.length >= 4) {
         w=vbArray[2];
         h=vbArray[3];
      }
   }
   video.setAttribute("width",w);
   video.setAttribute("height",h);

Aspect Ratio and Zoom Examples

576I 4:3 video in a videoplane(width=640, height=360, 16:9).

  video.setAttribute("x",x);
  video.setAttribute("y",y);
  video.setAttribute("width",640);
  video.setAttribute("height",360);
  video.setAttribute("preserveAspectRatio","xMidYMid");

720P 16:9 video in a videoplane(width=800, height=600, 4:3)

  video.setAttribute("x",x);
  video.setAttribute("y",y);
  video.setAttribute("width",800);
  video.setAttribute("height",600);
  video.setAttribute("preserveAspectRatio","xMidYMid");

Zoom upper-left quarter of a video to whole videoplane area.

  //enlarge the video firstly
  video.setAttribute("x",x);
  video.setAttribute("y",y);
  video.setAttribute("width",width*2);
  video.setAttribute("height",height*2);
  //only show part of the video in the rectangle
  var rect = document.getElementById("clipRectangle");
  if (null != rect) {
    rect.setAttribute("x", x);
    rect.setAttribute("y", y);
    rect.setAttribute("width", width);
    rect.setAttribute("height", height);

    if (video.getAttribute("clip-path") != null) {
      //Needed to make the new clip path appear.
      video.removeAttribute("clip-path");
    }

    video.setAttribute("clip-path", "url(#videoClip)");
  }