3 <title>drawing <video> to <canvas></title>
4 <script src=../http/tests/media/video-test.js></script>
11 { time:0, r:255, g:255, b:0 },
12 { time:2, r:8, g:0, b:226 },
13 { time:4, r:0, g:24, b:197 },
14 { time:6, r:0, g:46, b:166 },
15 { time:8, r:0, g:66, b:136 },
16 { time:10, r:0, g:85, b:112 },
25 var expected = results.values[results.current];
27 ctx.drawImage(video, 0, 0, width, height);
29 var frame = ctx.getImageData(0, 0, width, height);
30 r = frame.data[4 * 2 * width + 16 + 0];
31 g = frame.data[4 * 2 * width + 16 + 1];
32 b = frame.data[4 * 2 * width + 16 + 2];
34 testExpected("r", expected.r);
35 testExpected("g", expected.g);
36 testExpected("b", expected.b);
38 if (++results.current >= results.values.length)
41 setTimeout(testFrame, 0);
48 var expected = results.values[results.current];
50 run("video.currentTime = " + expected.time);
51 setTimeout(testPixel, 100);
54 function loadedmetadata()
56 width = video.videoWidth / 2;
57 height = video.videoHeight / 2;
59 ctx = canvas.getContext("2d");
60 ctx.fillStyle = 'yellow';
61 ctx.fillRect(0, 0, width, height);
68 canvas = document.getElementsByTagName('canvas')[0];
69 waitForEvent('loadedmetadata', loadedmetadata);
70 run("video.src = 'content/counting.mp4'");
75 <body onload="start()" >
78 <video controls></video>
79 <canvas width="160" height="120" ></canvas>
82 <p>Test <video> as a source for <canvas>.</p>