104 lines
3.8 KiB
HTML
104 lines
3.8 KiB
HTML
<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>></div>
|
|
<div id=videozoombutton class="videobutton videozoombutton videofadeout">+</div>
|
|
</div>
|
|
<script>initVideo();</script>
|