1 <!DOCTYPE html> 2 <html> 3 <body> 4 <video id="video" loop></video> 5 <script src="../resources/runner.js"></script> 6 <script src="resources/canvas_runner.js"></script> 7 <script> 8 var videoElement = document.getElementById("video"); 9 var destCanvas2D = document.createElement("canvas"); 10 var destCtx2D = destCanvas2D.getContext("2d"); 11 12 function setSize(width, height) { 13 destCanvas2D.width = width; 14 destCanvas2D.height = height; 15 } 16 17 function addPlayCallback(videoElement) { 18 // This logic makes sure this perf test starts after playing the video. 19 videoElement.addEventListener("canplaythrough", startVideo, true); 20 videoElement.addEventListener("play", startPerfTest, true); 21 videoElement.addEventListener('error', function(ev) { 22 CanvasRunner.logFatalError("\nmp4 codec is not supported on this platform. Received error event:" + ev.target.error.code + "\n"); 23 }, false); 24 videoElement.src = "../resources/bear-1280x720.mp4"; 25 } 26 27 function startVideo() { 28 // loop can emit this event again. 29 videoElement.removeEventListener("canplaythrough", startVideo, true); 30 videoElement.play(); 31 } 32 33 function startPerfTest() { 34 CanvasRunner.start({ 35 description: "This bench test checks the speed on drawing Video element to HW accelerated Canvas2D(1024x1024).", 36 doRun: doRun, 37 ensureComplete: ensureComplete}); 38 } 39 40 function doRun() { 41 // draw Video 42 destCtx2D.drawImage(videoElement, 0, 0); 43 } 44 45 function ensureComplete() { 46 // Calling getImageData() is just to flush out the content when 47 // accelerated 2D canvas is in use. The cost of reading 1x1 pixels is low. 48 destCtx2D.getImageData(0, 0, 1, 1); 49 } 50 51 window.onload = function () { 52 // It should use setMinimumAccelerated2dCanvasSize() to enable accelerated Canvas for a specified size 53 // but this API is not available in JS or WebPage. Assume the threshold size is 256x257 54 // and the dest canvas is HW accelerated Canvas when setting its size to 1024x1024. 55 setSize(1024, 1024); 56 addPlayCallback(videoElement); 57 } 58 59 </script> 60 </body> 61 </html> 62
