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> 8var videoElement = document.getElementById("video"); 9var destCanvas2D = document.createElement("canvas"); 10var destCtx2D = destCanvas2D.getContext("2d"); 11 12function setSize(width, height) { 13 destCanvas2D.width = width; 14 destCanvas2D.height = height; 15} 16 17function 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 27function startVideo() { 28 // loop can emit this event again. 29 videoElement.removeEventListener("canplaythrough", startVideo, true); 30 videoElement.play(); 31} 32 33function 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 40function doRun() { 41 // draw Video 42 destCtx2D.drawImage(videoElement, 0, 0); 43} 44 45function 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 51window.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