ManualTests/video-player.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>&gt;</div>
<div id=videozoombutton class="videobutton videozoombutton videofadeout">+</div>
</div>
<script>initVideo();</script>