content/test/data/media/blackwhite.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <style>
   5       body {
   6         color: white;
   7         background-color: black;
   8       }
   9
  10       #table { display: table; }
  11       #table > div { display: table-row; }
  12       #table > div > div { display: table-cell; }
  13     </style>
  14   </head>
  15   <body onload="main()">
  16     <div id="buttons"></div>
  17     <div id="table">
  18       <div>
  19         <div>Image</div>
  20         <div id="video_header"></div>
  21       </div>
  22       <div>
  23         <div><img src="blackwhite.png"></div>
  24         <div><video autoplay></video></div>
  25       </div>
  26     </div>
  27
  28     <p>
  29       TODO(scherkus): Expand this test to use &lt;canvas&gt; to verify
  30       pixel values. For now we only test playability.
  31     </p>
  32
  33     <script>
  34       function loadVideo(name) {
  35         var videoElem = document.querySelector('video');
  36         videoElem.src = 'blackwhite_' + name;
  37
  38         var headerElem = document.getElementById('video_header');
  39         headerElem.textContent = name;
  40       }
  41
  42       function onVideoEvent(e) {
  43         document.title = e.type.toUpperCase();
  44       }
  45
  46       function main() {
  47         // Programatically create buttons for each clip for manual testing.
  48         var buttonsElem = document.getElementById('buttons');
  49
  50         function createButton(name) {
  51           var buttonElem = document.createElement('button');
  52           buttonElem.textContent = name;
  53           buttonElem.addEventListener('click', function() {
  54             loadVideo(name);
  55           });
  56           buttonsElem.appendChild(buttonElem);
  57         }
  58
  59         var VIDEOS = [
  60           'yuv420p.ogv',
  61           'yuv422p.ogv',
  62           'yuv444p.ogv',
  63           'yuv420p.webm',
  64           'yuv420p.mp4',
  65           'yuvj420p.mp4',
  66           'yuv422p.mp4',
  67           'yuv444p.mp4',
  68           'yuv420p.avi'
  69         ];
  70
  71         for (var i = 0; i < VIDEOS.length; ++i) {
  72           createButton(VIDEOS[i]);
  73         }
  74
  75         // Video event handlers.
  76         var videoElem = document.querySelector('video');
  77         videoElem.addEventListener('error', onVideoEvent);
  78         videoElem.addEventListener('ended', onVideoEvent);
  79
  80         // Check if a query parameter was provided for automated tests.
  81         if (window.location.search.length > 1) {
  82           loadVideo(window.location.search.substr(1));
  83         }
  84       }
  85     </script>
  86   </body>
  87 </html>