[CSS Regions] Selection dragged from a region paints its background
[WebKit-https.git] / ManualTests / video-player.html
1 <style>
2 #videoelem { width: 100%; height: 100%; position: absolute; } 
3 #videocontainer { position: relative; width: 400px; height:230px;-webkit-user-select:none; -webkit-transition-duration:0.2s}
4 .videobutton { 
5     line-height: 40pt;
6     border: 3px solid white; 
7     -webkit-border-radius: 20px;
8     opacity: 0.5;
9     position: absolute;
10     font-size: 40pt;
11     color: white;
12     background-color: gray;
13     cursor: pointer;
14     text-align: center; 
15     z-index: 1;
16 }
17 .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;}
18 .videoloading { top: 0; bottom: 0; margin:auto; left:0; right:0; width: 7em; height: 1.2em; cursor:default;}
19 .videofadeout { -webkit-transition: 1.5s; opacity:0; }
20 #videocontainer:hover .videofadeout { opacity: 0.5; }
21 .videoplay { top: 0; bottom: 0; margin:auto; left:0; right:0; width: 1.2em; height: 1.2em;}
22 </style>
23 <script>
24 var videoElem;
25 var playButton;
26 var showProgress = true;
27 var videoLargeSize = false;
28 function startedPlaying() {
29     showProgress = false;
30     playButton.innerHTML = "||"
31     playButton.className = "videobutton videoplay videofadeout";
32 }
33 function stoppedPlaying() {
34     playButton.innerHTML = ">"
35     playButton.className = "videobutton videoplay";
36 }
37 function updateProgress(ev) {
38     if (!showProgress)
39        return;
40     playButton.innerHTML = "Loading...";
41     playButton.className = "videobutton videoloading";
42 }
43 function initVideo() {
44     videoElem = document.getElementById("videoelem");
45     playButton = document.getElementById("videoplaybutton");
46     videoZoomButton = document.getElementById("videozoombutton");
47     if (!videoElem.play) {
48        playButton.style.display = "none";
49        videoZoomButton.style.display = "none";
50        return;
51     }
52     videoElem.addEventListener("play", startedPlaying);
53     videoElem.addEventListener("pause", stoppedPlaying);
54     videoElem.addEventListener("ended", function () {
55         if (!videoElem.paused)
56             videoElem.pause();
57         stoppedPlaying();
58     });
59     videoElem.addEventListener("progress", updateProgress);
60     videoElem.addEventListener("begin", updateProgress);
61     videoElem.addEventListener("canplaythrough", function () {
62          videoElem.play();
63     });
64     videoElem.addEventListener("error", function() {
65         playButton.innerHTML = "Load failed";
66     });
67     videoElem.addEventListener("dataunavailable", function () {
68          if (!showProgress) {
69              showProgress = true;
70              playButton.innerHTML = "Loading...";
71              playButton.className = "videobutton videoloading";
72          }
73     });
74     videoZoomButton.addEventListener("click", function () {
75         var container = document.getElementById("videocontainer");
76         videoLargeSize = !videoLargeSize;
77         if (videoLargeSize) {
78             container.style.width = "640px";
79             container.style.height = "360px";
80             videoZoomButton.innerHTML = "-";
81         } else {
82             container.style.width = "400px";
83             container.style.height = "225px";
84             videoZoomButton.innerHTML = "+";
85         }
86     });
87     playButton.addEventListener("click", function () {
88         if (videoElem.paused) {
89             if (!videoElem.src)
90                 videoElem.src = "http://movies.apple.com/movies/us/apple/ipoditunes/2007/touch/ads/apple_ipodtouch_touch_r640-9cie.mov";
91             videoElem.play();
92         } else
93             videoElem.pause();
94     } );
95 }
96 </script>
97 <div id=videocontainer>
98 <video id=videoelem poster="resources/touch-poster.png">
99 <b style="font-size:15pt">This is fallback content. If you had video support you would see some here!</b></video>
100 <div class="videobutton videoplay" id=videoplaybutton>&gt;</div>
101 <div id=videozoombutton class="videobutton videozoombutton videofadeout">+</div>
102 </div>
103 <script>initVideo();</script>