ARRIS Enterprises, Inc. Confidential Information

Simple Video Player Example

This example shows how to make a video player and how to set its controls attribute dynamically.


<html>
<head>
<script language="Javascript">

/**
 * VideoTag widget.
 * @param {posX} X position in pixels.
 * @param {posY} Y position in pixels.
 * @param {width} width in pixels.
 * @param {height} height in pixels.
 * @param {posZ} z-value.
 * @param {autoplay} video tag attribute.
 * @param {src} video tag attribute.
 */
function VideoTag(posX, posY, width, height, posZ,
                  parentObject, autoplay, src)
{
  var mainVideoTag = document.createElement("video");
  mainVideoTag.width = width;
  mainVideoTag.height = height;
  if (autoplay) {
    mainVideoTag.autoplay = "autoplay";
  }
  mainVideoTag.src = src;

  mainVideoTag.style.left = posX;
  mainVideoTag.style.top = posY;
  mainVideoTag.style.zIndex = posZ;
  mainVideoTag.style.position = "absolute";

  this.parentObject = parentObject;
  this.parentObject.appendChild(mainVideoTag);

  this.setControls = function(controls)
  {
    if (controls) {
      mainVideoTag.controls = "controls";
    }
  }
}

function onLoad()
{
  videoX = 100;
  videoY = 100;
  videotag = new VideoTag(videoX, videoY, 400, 300, 20,
                          document.body, true, "udp://224.5.5.1:11111");
  videotag.setControls(true);
}
</script>
</head>
<body onLoad="onLoad();">
</body>
</html>