Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

104 lines (103 sloc) 3.894 kb
<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>
Jump to Line
Something went wrong with that request. Please try again.