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}
6 border: 3px solid white;
7 -webkit-border-radius: 20px;
12 background-color: gray;
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;}
26 var showProgress = true;
27 var videoLargeSize = false;
28 function startedPlaying() {
30 playButton.innerHTML = "||"
31 playButton.className = "videobutton videoplay videofadeout";
33 function stoppedPlaying() {
34 playButton.innerHTML = ">"
35 playButton.className = "videobutton videoplay";
37 function updateProgress(ev) {
40 playButton.innerHTML = "Loading...";
41 playButton.className = "videobutton videoloading";
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";
52 videoElem.addEventListener("play", startedPlaying);
53 videoElem.addEventListener("pause", stoppedPlaying);
54 videoElem.addEventListener("ended", function () {
55 if (!videoElem.paused)
59 videoElem.addEventListener("progress", updateProgress);
60 videoElem.addEventListener("begin", updateProgress);
61 videoElem.addEventListener("canplaythrough", function () {
64 videoElem.addEventListener("error", function() {
65 playButton.innerHTML = "Load failed";
67 videoElem.addEventListener("dataunavailable", function () {
70 playButton.innerHTML = "Loading...";
71 playButton.className = "videobutton videoloading";
74 videoZoomButton.addEventListener("click", function () {
75 var container = document.getElementById("videocontainer");
76 videoLargeSize = !videoLargeSize;
78 container.style.width = "640px";
79 container.style.height = "360px";
80 videoZoomButton.innerHTML = "-";
82 container.style.width = "400px";
83 container.style.height = "225px";
84 videoZoomButton.innerHTML = "+";
87 playButton.addEventListener("click", function () {
88 if (videoElem.paused) {
90 videoElem.src = "http://movies.apple.com/movies/us/apple/ipoditunes/2007/touch/ads/apple_ipodtouch_touch_r640-9cie.mov";
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>></div>
101 <div id=videozoombutton class="videobutton videozoombutton videofadeout">+</div>
103 <script>initVideo();</script>