<audio controls>
                  <source src="revolve.mp3" type="audio/mp4">
                  <source src="revolve.ogg" type="audio/ogg">
              </audio>
            

              <video controls poster="HelloWorld.png" width="500">
                  <source src="HelloWorld.mp4" type="video/mp4">
                  <source src="HelloWorld.webm" type="video/webm">
                  <source src="HelloWorld.ogv" type="video/ogg">
              </video>
            

• Rounded Corners
• Semi-transparent Border

      video {
        border-radius: 12px;
        border: 1px solid rgba(0, 0, 0, 0.2);
      }
            

      video {                         video, video:hover {
        height:    200px;               position: relative;
        padding:    10px;               border:   5px solid black;
        left:       50px;               transition-property: all;
        top:        50px;               transition-duration: 0.5s;
        background-color: white;        transition-timing-function: linear;
      }                               }
      video:hover {
         height:   250px;
         padding:   15px;
         left:      25px;
         top:       25px;
         background-color: black;
       }
            

              <video controls poster="HelloWorld.png" width="500">
                  <source src="HelloWorld.mp4" type="video/mp4">
                  <source src="HelloWorld.webm" type="video/webm">
                  <source src="HelloWorld.ogv" type="video/ogg">
                  Your browser does not support the <code>video</code> element.
                  <a href="HelloWorld.webm">Download it</a> instead.
              </video>
            

video = document.getElementsByTagName("video")[0];
stop  = document.getElementById("stop");
stop.addEventListener("click", restart, false);
function restart(evt) {
  video.pause();
  video.currentTime = 0;
}

<video controls height="270" width="480" >
  <source src="HelloWorld.mp4"  type="video/mp4">
  <source src="HelloWorld.webm" type="video/webm">
</video>
<canvas width="400" height="300" style="border: 1px solid black;">
</canvas>
<script>
  window.onload = function() {
    initCanvas();
  }
  var context;
  function initCanvas() {
    video = document.getElementsByTagName("video")[0];
    canvas = document.getElementsByTagName("canvas")[0];
    context = canvas.getContext("2d");
    video.addEventListener("timeupdate", paintFrame, false);
  }
  function paintFrame() {
    context.drawImage(video, 0, 0, 160, 80);
  }
</script>

        context.drawImage(video, 0, 0, w, h);
        frame = context.getImageData(0, 0, w, h);
        for (var i = 0; i < frame.data.length; i += 4) {
          r += frame.data[i];
          g += frame.data[i + 1];
          b += frame.data[i + 2];
        }
        ambience.style.backgroundColor = 'rgb('+r+','+g+','+b+')';
            

              rctxt.translate(0,160);
              rctxt.scale(1,-1);
              gradient = rctxt.createLinearGradient(0, 105, 0, 160);
              gradient.addColorStop(1, "rgba(255, 255, 255, 0.3)");
              gradient.addColorStop(0, "rgba(255, 255, 255, 1.0)");
              rctxt.fillStyle = gradient;
              rctxt.drawImage(video, 0, 0, 320, 160);
            

• Captions and Subtitles
• Text Descriptions
• Navigation

• WebVTT
• <track> element
• TextTrack API

WEBVTT FILE

1
00:00:08.124 --> 00:00:10.742
Workstations and high end personal computers have been able to

2
00:00:10.742 --> 00:00:14.749
manipulate digital audio pretty easily for about fifteen years now.

3
00:00:14.749 --> 00:00:17.470
It's only been about five years that a decent workstation's been able

4
00:00:17.470 --> 00:00:21.643
to handle raw video without a lot of expensive special purpose hardware.
            

<video src="media/sintel.ogv" poster="media/poster_sintel.png" controls width="50%">

  <track kind="subtitles" src="text/vid1-en.vtt" srclang="en" label="English" default>
  <track kind="subtitles" src="text/vid1-fr.vtt" srclang="fr" label="Français">
  <track kind="subtitles" src="text/vid1-de.vtt" srclang="de" label="Deutsch">

  <track kind="captions" src="text/vid1-cap.vtt" srclang="en" label="English">

  <track kind="descriptions" src="text/vid1-desc.vtt" srclang="en" label="English">

  <track kind="chapters" src="text/vid1-chap.vtt" srclang="en" label="English">

</video>
            

• Multitrack Media: sign language video, director's comments
• MediaStream Interface: real-time streaming
• Audio API: processing audio content

For the details, see my book:

              Silvia Pfeiffer
              blog.gingertech.net
              silviapfeiffer1@gmail.com
              @silviapfeiffer