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>