Introduction
This document describes a method to make the video pane on the H200 to appear as if it exists between 2 static graphics panes.
Use case explanation
We would like to build a webpage on the H200 with 2 graphics panes, E1 which stays under the video pane V, and E2 which sits on top of video pane V.
Proposed solution
By default the video pane stay under the graphics layers, therefore in order to make it to appear to sit on top of E1, assuming E1 is a PNG image it is possible to make the overlapping area transparent.
For example the top-right hand corner of the PNG image below is made transparent.
Therefore it is possible to set the video pane at the transparent area, so that it appears as if it is sitting on top of the image above.
To demostrate the solution we have an webpage example below, which uses the image above and we similate E2 with some text that sits on top of the video pane.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=1920, user-scalable=no" />
<style>
body {
margin: 0px;
width: 1920px;
height: 1080px;
background-image: url(./videoBg.png);
background-repeat: no-repeat;
}
.txt {
margin-top: 54px;
margin-left: 96px;
font-size: 34px;
color: white;
position: absolute;
right: 50px;
background-color: red;
}
</style>
</head>
<body>
<div class="txt">
<p>Hi Welcome!</p>
<p>Text go here</p>
</div>
<script type="text/javascript">
let player = new ENABLE.player();
player.setSource("https://cmafref.akamaized.net/cmaf/live-ull/2006350/akambr/out.mpd");
player.setVideoRect(960, 0, 960, 540);
</script>
</html>
The webpage should look like the following image,