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>

    24 var videoElem;

    25 var playButton;

    26 var showProgress = true;

    27 var videoLargeSize = false;

    28 function startedPlaying() {

    29     showProgress = false;

    30     playButton.innerHTML = "||"

    31     playButton.className = "videobutton videoplay videofadeout";

    32 }

    33 function stoppedPlaying() {

    34     playButton.innerHTML = ">"

    35     playButton.className = "videobutton videoplay";

    36 }

    37 function updateProgress(ev) {

    38     if (!showProgress)

    39        return;

    40     playButton.innerHTML = "Loading...";

    41     playButton.className = "videobutton videoloading";

    42 }

    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";

    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>&gt;</div>

   101 <div id=videozoombutton class="videobutton videozoombutton videofadeout">+</div>

   102 </div>

   103 <script>initVideo();</script>