Home | History | Annotate | Download | only in manual-tests 
      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>
    104