Video Thumbnail

The VBrick WM Appliance and MPEG-4 appliance supports JPEG capture. Here is a simple web page you can use to show your video as a thumbnail, then click on the image to see the video.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Thumbnail Image</title>
<script type="text/javascript">
var i="true";

var t = 5;
image = "http://PATH TO THE JPG IMAGE";

function init()
{
tmp = new Date();
tmp = "?"+tmp.getTime()
document.images["image"].src = image+tmp
setTimeout("init()", t*1000)
}

function showVideo()
{
document.getElementById("video").style.visibility="visible";
document.getElementById("image").style.visibility="hidden";
document.getElementById("Player").URL="http://STREAMURL";
document.getElementById("Player").controls.Play();
i="false";
}

function hideVideo()
{
document.getElementById("video").style.visibility="hidden";
document.getElementById("image").style.visibility="visible";
document.getElementById("Player").controls.Stop();
i="true";
}

</script>
<style type="text/css">
.style1 {
   font-family: Arial;
   color: #999999;
}
.style2 {
   text-align: center;
}
</style>
</head>
<body onload="init()">
<img id="image" name="image" src="" height="240" width="320" onclick="showVideo()" style="visibility:visible"/>

<span class="style1"><strong>Click To View Video
</strong></span>

<div id="video" style="position:absolute; left: 3px; top: 12px; visibility:hidden; width: 328px; height: 319px;" class="style2">
<object classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6" id="Player" style="height: 280px; width: 326px;">
</object>

<input type="button" value="Image" onclick="hideVideo()" />
</div>
<script type="text/javascript">
</script>
</body>
</html>