--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/WebCore/manual-tests/video-player.html	Fri Sep 17 09:02:29 2010 +0300
@@ -0,0 +1,103 @@
+<style>
+#videoelem { width: 100%; height: 100%; position: absolute; } 
+#videocontainer { position: relative; width: 400px; height:230px;-webkit-user-select:none; -webkit-transition-duration:0.2s}
+.videobutton { 
+    line-height: 40pt;
+    border: 3px solid white; 
+    -webkit-border-radius: 20px;
+    opacity: 0.5;
+    position: absolute;
+    font-size: 40pt;
+    color: white;
+    background-color: gray;
+    cursor: pointer;
+    text-align: center; 
+    z-index: 1;
+}
+.videozoombutton { bottom:10px;right:10px;width:1.1em;height:1.1em;font-size:15pt; line-height: 15pt; border:2px solid white; -webkit-border-radius: 8px;}
+.videoloading { top: 0; bottom: 0; margin:auto; left:0; right:0; width: 7em; height: 1.2em; cursor:default;}
+.videofadeout { -webkit-transition: 1.5s; opacity:0; }
+#videocontainer:hover .videofadeout { opacity: 0.5; }
+.videoplay { top: 0; bottom: 0; margin:auto; left:0; right:0; width: 1.2em; height: 1.2em;}
+</style>
+<script>
+var videoElem;
+var playButton;
+var showProgress = true;
+var videoLargeSize = false;
+function startedPlaying() {
+    showProgress = false;
+    playButton.innerHTML = "||"
+    playButton.className = "videobutton videoplay videofadeout";
+}
+function stoppedPlaying() {
+    playButton.innerHTML = ">"
+    playButton.className = "videobutton videoplay";
+}
+function updateProgress(ev) {
+    if (!showProgress)
+       return;
+    playButton.innerHTML = "Loading...";
+    playButton.className = "videobutton videoloading";
+}
+function initVideo() {
+    videoElem = document.getElementById("videoelem");
+    playButton = document.getElementById("videoplaybutton");
+    videoZoomButton = document.getElementById("videozoombutton");
+    if (!videoElem.play) {
+       playButton.style.display = "none";
+       videoZoomButton.style.display = "none";
+       return;
+    }
+    videoElem.addEventListener("play", startedPlaying);
+    videoElem.addEventListener("pause", stoppedPlaying);
+    videoElem.addEventListener("ended", function () {
+        if (!videoElem.paused)
+            videoElem.pause();
+        stoppedPlaying();
+    });
+    videoElem.addEventListener("progress", updateProgress);
+    videoElem.addEventListener("begin", updateProgress);
+    videoElem.addEventListener("canplaythrough", function () {
+         videoElem.play();
+    });
+    videoElem.addEventListener("error", function() {
+        playButton.innerHTML = "Load failed";
+    });
+    videoElem.addEventListener("dataunavailable", function () {
+         if (!showProgress) {
+             showProgress = true;
+             playButton.innerHTML = "Loading...";
+             playButton.className = "videobutton videoloading";
+         }
+    });
+    videoZoomButton.addEventListener("click", function () {
+        var container = document.getElementById("videocontainer");
+        videoLargeSize = !videoLargeSize;
+        if (videoLargeSize) {
+            container.style.width = "640px";
+            container.style.height = "360px";
+            videoZoomButton.innerHTML = "-";
+        } else {
+            container.style.width = "400px";
+            container.style.height = "225px";
+            videoZoomButton.innerHTML = "+";
+        }
+    });
+    playButton.addEventListener("click", function () {
+        if (videoElem.paused) {
+            if (!videoElem.src)
+                videoElem.src = "http://movies.apple.com/movies/us/apple/ipoditunes/2007/touch/ads/apple_ipodtouch_touch_r640-9cie.mov";
+            videoElem.play();
+        } else
+            videoElem.pause();
+    } );
+}
+</script>
+<div id=videocontainer>
+<video id=videoelem poster="resources/touch-poster.png">
+<b style="font-size:15pt">This is fallback content. If you had video support you would see some here!</b></video>
+<div class="videobutton videoplay" id=videoplaybutton>&gt;</div>
+<div id=videozoombutton class="videobutton videozoombutton videofadeout">+</div>
+</div>
+<script>initVideo();</script>