slanted W3C logo
Cover page images (keys)

Video in the Open Web Platform

April 2013 HTML5 Developer Conference

Philippe Le Hégaret, mailto:plh@w3.org, @plhw3org

Interaction Domain Lead, W3C

Today

Everything about Video!

The World Wide Web Consortium (W3C)

Working Group meeting

How does W3C work?

How can you participate?

Let's dive

HTML5 <video>

<video controls preload="auto" poster="poster.png">
 <source src="trailer.mp4" type='video/mp4'>
 <source src="trailer.webm" type='video/webm'>
 <track kind='subtitles' src='brave.en'
           srclang='en' label="English">
 <track kind='captions' src=brave_bis.en.vtt'
           srclang='en' label="English for the Hard of Hearing">
 <track kind='subtitles' src='brave.fr.vtt'
           srclang='fr' label="Français">
 <p>Your user agent does not support the HTML5 Video element.

</video>

Basic APIs

videoElement.currentTime
videoElement.play()
videoElement.pause()
videoElement.addEventListener("ended", ...);
video.audioTracks[1].enabled = true;

See HTML5 Video Events and API

vc

HTML Media Groups

link multiple media elements together

  <video src="movie.vid#track=Video&amp;track=English"
            mediagroup=movie controls id=v1>
  </video>
  <video src="movie.vid#track=sign"
            mediagroup=movie>
  </video>
  <script>
   v1.controller.play();
  </script>

Fragment URI

Book
http://www.example.com/example.mp4#xywh=160,120,320,240
http://www.example.com/example.webm?t=10,20

Codecs and formats

Chrome Firefox Internet Explorer Opera Safari
video/mp4
video/ogg
video/webm

CSS

CSS properties: opacity, background (multiple), resize, border-radius

Canvas: ctx2D.drawImage(video, 0, 0)

See also ctx3D.texImage(target, level, internalformat, format, type, video)

SVG

(By Paul Irish - 2010)

HTML/SVG video player

Captioning

Timed Text (TTML)

WebVTT

Captioning Considerations

Fullscreen

API and CSS pseudo selectors for fullscreen support

myElement.requestFullscreen();

document.exitFullscreen();
document.fullscreenEnabled;

section:fullscreen {
  border: none;
}

Media Accessibility

User Requirements

Media Capture

Local audio and video access

 function start() {
   navigator.getUserMedia({audio:true, video:true}, gotStream);
   startBtn.disabled = true;
 }
 function gotStream(stream) {
    video.src = URL.createObjectURL(stream);
    video.onerror = function () {
      stream.stop();
    };
   stream.onended = function () {
     startBtn.disabled = false;
   };
 }

See getUserMedia example

Media Source Extensions

Encrypted Media Extensions

Real Time Communications

Performance

Navigation Timing

client-side latency measurements within applications

function onPlay() {
  var now = new Date().getTime();
  alert("User-perceived autoplay loading time: "
        + now - performance.timing.navigationStart);
}
video.addEventListener("play", onPlay, false);

fetchStart, requestStart, responseEnd, etc.

Page Visibility

Determine the current visibility of a page

document.hidden
document.addEventListener('visibilitychange', ...);

function onvisibilitychange() {
  if (document.hidden)
   video.pause();
  else 
   video.play();
}

requestAnimationFrame

Script-based animations where the user agent is in control of limiting the update rate of the animation

function animate(time) {
  if (!document.hidden) {
    // if visible, draw
    canvas.drawImage(myVideoElement, 0, 0);
  }
  window.requestAnimationFrame(animate);
}
function start() {
  window.requestAnimationFrame(animate);
}

Questions?