| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>video-with-alpha</title> |
| <style> |
| body { |
| background: white; |
| } |
| |
| #video { |
| position: absolute; |
| left: 0px; |
| top: 0px; |
| } |
| #spacer { |
| position: absolute; |
| left: 200px; |
| top: 0px; |
| background-color: red; |
| } |
| #canvas { |
| position: absolute; |
| left: 400px; |
| top: 0px; |
| } |
| </style> |
| <script src=media-file.js></script> |
| <script> |
| // Put a video element to the left, a spacer in the middle and a canvas to the right. The video element will |
| // play a transparent video, and a video frame will be copied into the canvas. |
| // As the video and the canvas are invisible, to visually check that the video element is really playing something, |
| // set the size of the spacer to the size of the video frames (200x200). |
| |
| var requirePixelDump = true; |
| |
| function seeked() { |
| let canvas = document.getElementById("canvas"); |
| context = canvas.getContext("2d"); |
| context.drawImage(video, 0, 0); |
| if (window.testRunner) |
| setTimeout("testRunner.notifyDone()", 0); |
| } |
| |
| function buffered() { |
| video.width = video.videoWidth; |
| video.height = video.videoHeight; |
| |
| let spacer = document.getElementById("spacer"); |
| spacer.style.width = video.width + "px"; |
| spacer.style.height = video.height + "px"; |
| |
| canvas.width = video.width; |
| canvas.height = video.height; |
| |
| video.currentTime = .5; |
| } |
| |
| function start() { |
| findMediaElement(); |
| video.src = "content/video-with-alpha.webm"; |
| video.addEventListener("seeked", seeked); |
| video.addEventListener("canplaythrough", buffered, false); |
| } |
| </script> |
| <script src=video-test.js></script> |
| </head> |
| |
| <body onload="start()"> |
| <video id="video"></video> |
| <div id="spacer"></div> |
| <canvas id="canvas"></canvas> |
| </body> |
| </html> |
