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 <canvas> 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> 88
