Video element properties

Introduction

The <video> element is a new tag which is defined in HTML5. Here, only the specifics of the implementation is listed. For more information, please refer to the HTML5 standard.

The "controls" attribute of the HTML5 video tag is not supported.

The HTML5 video tag can be used in two ways. If <video src="..."> is used then the HTML5 video tag controls will be effective. If <video src="toi://"> is used then the KreaTV TOI media player controls will be effective.

There are two usage scenarios for the video element: one is to create main video element, the other is to create a PiP(Picture in Picture) video element. In each scenario, only the last created video element takes effect, even though multi-video elements are created! That means no two PiP or two main video elements can take effect at the meantime!

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.

Examples

Positions the video surface on the screen with a height and width of 300x300 pixels.

<video id="video" style="position:absolute;
                  height: 300px;
                  width: 300px;">

  <source src="movie.mp4"/>
</video>

or

<video id="video" height=300 width=300>
  <source src="movie.mp4"/>
</video>

One way of doing full screen using style sheet attributes for the video tag.

<video id="video" style="position:absolute; 
                  left:0; 
                  top:0; 
                  height: 100%; 
                  width: 100%">
                  
  <source src="movie.mp4"/>
</video>

Example of z-index positioning. The z-index is used for positioning the surface along the z-axis.

<video style="z-index:10; 
              position:absolute; 
              top:200px; 
              left:100px;">

  <source src="movie.mp4"/>
</video>

<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>

Example of doing an autoplay as soon as the video is ready

<video id="video" autoplay="autoplay">
  <source src="movie.mp4"/>
</video>

Example of loop playing the video

<video id="video" loop="loop">
  <source src="movie.mp4"/>
</video>

JavaScript Examples

Full screen with JavaScript

  video = document.getElementById("video");
  video.style.position = "fixed";
  video.style.height = "100%";
  video.style.width = "100%";

Volume control

The video tag has a volume attribute. Setting the volume attribute will control volume by calling ToiAudioOutputService.setMasterVolume().

Video aspect ratio

Video aspect ratio is by default preserved using AVM. The video tag CSS property "object-fit" is by default set to "fill" to make the video follow the size of the video tag.

Hole-punching

The video element can also be used for hole-punching and transparency control in a multi-app environment. See here for more info.