52 lines
1.5 KiB
HTML
52 lines
1.5 KiB
HTML
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Drawing to canvas using video</title>
|
||
|
|
<script src=media-file.js></script>
|
||
|
|
<script>
|
||
|
|
var video;
|
||
|
|
var numberOfSeeks = 4;
|
||
|
|
var requirePixelDump = true;
|
||
|
|
|
||
|
|
if (window.testRunner) {
|
||
|
|
testRunner.dumpAsText(true);
|
||
|
|
testRunner.waitUntilDone();
|
||
|
|
}
|
||
|
|
|
||
|
|
function drawAndInsertFrame()
|
||
|
|
{
|
||
|
|
var canvas = document.createElement('canvas');
|
||
|
|
canvas.width = video.videoWidth / 2;
|
||
|
|
canvas.height = video.videoHeight / 2;
|
||
|
|
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
|
||
|
|
|
||
|
|
document.getElementById('canvases').appendChild(canvas);
|
||
|
|
|
||
|
|
if (--numberOfSeeks) {
|
||
|
|
video.currentTime += 1;
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
endTest();
|
||
|
|
}
|
||
|
|
|
||
|
|
function canplaythrough()
|
||
|
|
{
|
||
|
|
video.currentTime = 3;
|
||
|
|
}
|
||
|
|
|
||
|
|
function start()
|
||
|
|
{
|
||
|
|
findMediaElement();
|
||
|
|
waitForEvent('canplaythrough', canplaythrough);
|
||
|
|
waitForEvent('seeked', drawAndInsertFrame);
|
||
|
|
video.src = findMediaFile('video', 'content/counting');
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<script src=video-test.js></script>
|
||
|
|
</head>
|
||
|
|
<body onload="start()">
|
||
|
|
<video id="video"></video>
|
||
|
|
<div id="canvases"></div>
|
||
|
|
</body>
|
||
|
|
</html>
|