Zetakey HTML5 Browser - HTML5 Digital Signage Application Example

<!DOCTYPE html>

<html>
<head>
<title>Media Player Digital Signage</title>
<style type="text/css">
  html, body { width: 100%; height: 100%; margin: 0; background-color: black; }
  div { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }
  #videolayer { z-index: 100; }
  #imagelayer { z-index: 200; }
  #textlayer  { z-index: 300; width: 100%; height: 100%; }
  video { position:absolute; top: 0%; left: 0%; width: 100%; height: 100%; }
  img { position: absolute; opacity:0 }
  #img0 { top:  0px; left:  0px; width:  100%; }
  #img1 { top:  0px; left:  0px; height:  100%; }
  #img2 { bottom: 0px; left:  0px; width:  100%; }
  #img3 { top:  0px; right: 0px; height:  100%; }
marquee#text0 { position: fixed; top:  0px; left: 0px; width: 100%; color: white; background-color: blue; font-size: 30px; }
marquee#text1 { position: fixed; bottom: 0px; left: 0px; width: 100%; color: white; background-color: red;  font-size: 30px; }

</style>
<script type="text/javascript" src="script/jquery-1.6.2.min.js"></script>
<script type="text/javascript">

  $(document).ready(function() {
    var imageLoopTimer, textLoopTimer;

    <!--$('img').hide()-->;
    $("#text1").hide();

    $('video').bind('play', function() {
      console.log('video play');
      start();
    });
    $('video').bind('ended', function() {
      console.log('video ended');
      stop();
    });
    function start() {
      startImage();
      startText();
    };
    function stop() {
      stopImage();
      stopText();
    };
    function startImage() {
      var timer, t, max = 0;
      $('img').each(function(i) {
        t = Number($(this).attr('starttime')) * 1000;
        timer = window.setTimeout(function() {
          if(i % 2 == 0) {
            $('img').eq(i).hide().css("opacity","0.70").slideDown(2000);  
          } else{
            $('img').eq(i).hide().css("opacity","0.70").animate({width:'toggle'},2000);
          }
        }, t);
        $(this).attr('startTimer', timer);
        console.log('set ' + $(this).attr('id') + 
              ' startTimer to ' + timer);
        t += Number($(this).attr('displaytime')) * 1000;
        timer = window.setTimeout(function() {
          $('img').eq(i).animate({ opacity: 0 }, 1000);
        }, t);
        $(this).attr('stopTimer', timer);
        console.log('set ' + $(this).attr('id') +
              ' stopTimer to ' + timer);
        if (t > max) max = t;
      });
      imageLoopTimer = window.setTimeout(startImage, max);
      console.log('set imageLoopTimer to ' + imageLoopTimer);
    };
    function stopImage() {
      window.clearTimeout(imageLoopTimer);
      console.log('clear timeout of ' + imageLoopTimer);
      $('img').each(function(i) {
        window.clearTimeout($(this).attr('startTimer'));
        window.clearTimeout($(this).attr('stopTimer'));
        console.log('clear timeout of ' + $(this).attr('startTimer')
              + ' and ' + $(this).attr('stopTimer'));
        $(this).hide();
        console.log('hide ' + $(this).attr('id'));
      });
    };
    function startText() {
      var timer, t, max = 0;
      var dt;
      $('marquee').each(function(i) {
        t = Number($(this).attr('starttime')) * 1000;
        dt = Number($(this).attr('displaytime')) * 1000;
        timer = window.setTimeout(function() {
          $('marquee').eq(i).fadeIn(1000);
        }, t);
        $(this).attr('startTimer', timer);
        console.log('set ' + $(this).attr('id') +
              ' startTimer to ' + timer);
        t += Number($(this).attr('displaytime')) * 1000;
        timer = window.setTimeout(function() {
          $('marquee').eq(i).fadeOut(1000);
        }, t);
        $(this).attr('stopTimer', timer);
        console.log('set ' + $(this).attr('id') +
              ' stopTimer to ' + timer);
        if (t > max) max = t;
      });
      textLoopTimer = window.setTimeout(startText, max);
      console.log('set textLoopTimer to ' + textLoopTimer);
    };
    function stopText() {
      window.clearTimeout(textLoopTimer);
      console.log('clear timeout of ' + textLoopTimer);
      $('marquee').each(function(i) {
        window.clearTimeout($(this).attr('startTimer'));
        window.clearTimeout($(this).attr('stopTimer'));
        console.log('clear timeout of ' + $(this).attr('startTimer')
              + ' and ' + $(this).attr('stopTimer'));
        $(this).hide();
        console.log('hide ' + $(this).attr('id'));
      });
    };
  });

  <!--window.onload = initialize();-->
</script>
</head>

<body>
<div id="videolayer">
  <video autoplay>
    <source src="media/Video/background.mp4" />
    <p>Unsupported</p>
  </video>
</div>
<div id="imagelayer">
  <img id="img0" src="media/Banners/banner_top.jpg"  starttime="0"  displaytime="10" />
  <img id="img1" src="media/Banners/banner_left.jpg"   starttime="10" displaytime="10" />
  <img id="img2" src="media/Banners/banner_bottom.jpg" starttime="20" displaytime="10" />
  <img id="img3" src="media/Banners/banner_right.jpg"  starttime="15" displaytime="5"  />
</div>
<div id="textlayer">

  <marquee id="text0" behavior="scroll" loop="infinite" starttime="20" displaytime="30">
    This is the testing from remote site
  </marquee>
  <marquee id="text1" behavior="scroll" loop="infinite" starttime="15" displaytime="30">
    this is sample marquee text on BOTTOM
  </marquee>

</div>
</body>
</html>
HTML5 Web SQL

Signage Application
