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> 24var videoElem; 25var playButton; 26var showProgress = true; 27var videoLargeSize = false; 28function startedPlaying() { 29 showProgress = false; 30 playButton.innerHTML = "||" 31 playButton.className = "videobutton videoplay videofadeout"; 32} 33function stoppedPlaying() { 34 playButton.innerHTML = ">" 35 playButton.className = "videobutton videoplay"; 36} 37function updateProgress(ev) { 38 if (!showProgress) 39 return; 40 playButton.innerHTML = "Loading..."; 41 playButton.className = "videobutton videoloading"; 42} 43function 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>></div> 101<div id=videozoombutton class="videobutton videozoombutton videofadeout">+</div> 102</div> 103<script>initVideo();</script> 104
