www/tv.html

   1 <!DOCTYPE html>\r
   2 <html>\r
   3 \r
   4 <head>\r
   5 <meta charset="utf-8" />\r
   6 \r
   7 <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>\r
   8 <script src="js/effects.core.js" type="text/javascript"></script>\r
   9 <script src="js/effects.blind.js" type="text/javascript"></script>\r
  10 <script src="js/effects.slide.js" type="text/javascript"></script>\r
  11 <script src="js/jcarousel/lib/jquery.jcarousel.pack.js" type="text/javascript"></script>\r
  12 <script src="js/contentPanel.js" type="text/javascript"></script>\r
  13 \r
  14 <script src="jquery.sync.js" type="text/javascript"></script>\r
  15 <script src="html5tv.js" type="text/javascript"></script>\r
  16 <link rel="stylesheet" type="text/css" href="hcalendar.css" />\r
  17 \r
  18 <link rel="stylesheet" type="text/css" href="js/jcarousel/lib/jquery.jcarousel.css" />\r
  19 <link rel="stylesheet" type="text/css" href="js/jcarousel/skins/ie7/skin.css" />\r
  20 \r
  21 <script src="media/_editing/video.js" type="text/javascript"></script>\r
  22 <link href="media/_editing/video.css" rel="stylesheet" type="text/css" />\r
  23 \r
  24 <title>{title} | HTML5TV</title>\r
  25 \r
  26 </head>\r
  27 \r
  28 <body>\r
  29 \r
  30 <div id="content">\r
  31 \r
  32 <div id="videoAndMoreInformation">\r
  33 \r
  34         <div id="videoContainer">\r
  35                 <video id="vid" x-autoplay="autoplay" controls="controls">\r
  36                         <source src="media/_editing/video.ogv" />\r
  37 <!--\r
  38                         <source src="RDTV_ep2_5min.mov" />\r
  39 -->\r
  40                         <p id="videoElementWarning">Viewing these demos requires a browser capable of rendering the HTML 5 video element.<br />Please install a current version of <a href="http://www.mozilla.com">Firefox</a>, <a href="http://www.apple.com/safari">Safari</a> or <a href="http://www.google.com/chrome">Google&nbsp;Chrome</a>.</p>\r
  41                 </video>\r
  42                 <div id="subtitle"></div>\r
  43         </div> <!-- videoContainer -->\r
  44 \r
  45         <div id="slide" style="display: inline">\r
  46                 <img src="media/_editing/s/bars.png">\r
  47         </div>\r
  48         <div id="additional_video" style="display: inline">\r
  49                 {video_tags}\r
  50         </div>\r
  51 \r
  52 </div> <!-- videoAndMoreInformation -->\r
  53 \r
  54 <h1>{title}</h1>\r
  55 \r
  56 <h2 class="toggleContentPanel carouselContainer">Presentation</h2>\r
  57 \r
  58 <div id="carouselContainer">\r
  59         <ul id="carousel" class="jcarousel-skin-ie7">\r
  60                 <!-- Content loaded dynamically -->\r
  61         </ul>\r
  62 </div> <!-- carouselContainer -->\r
  63 \r
  64 <h2>Subtitles</h2>\r
  65 \r
  66 {subtitles_table}\r
  67 \r
  68 <h2>Info</h2>\r
  69 \r
  70 <div id="hcalendar">\r
  71 {hcalendar}\r
  72 </div>\r
  73 \r
  74 \r
  75 </div> <!-- content -->\r
  76 \r
  77 <div id="credits">\r
  78 \r
  79 This web interface is based on BBC R&amp;D TV\r
  80 <a href="http://www.bbc.co.uk/blogs/rad/2009/08/html5.html">HTML 5 and timed media</a> from the RAD blog</p>\r
  81 and metadata is done using <a href="http://microformats.org/wiki/hcalendar-cheatsheet">hCalendar</a> microformat.\r
  82 \r
  83 </div>\r
  84 \r
  85 </body>\r
  86 \r
  87 </html>\r