March 27, 2010: Afternoon Hands-on session: Video player FAQ

Why OGG and MPEG 4?

At the moment, Mozilla/Firefox and Opera only support the OGG format for video. Apple/Safari supports MPEG 4 (and may support OGG if you install the Quicktime extension). Google/Chrome supports OGG and MPEG 4. It is rumored that IE9 will support MPEG 4.

Which video format is recommended by W3C?

At the moment, HTML 5, a work in progress, does not recommend a specific video format. This issue may be reopened in the HTML Working Group in the future. See also Supported video formats for more details.

How do I convert a video in MPEG 4 and OGG?

You can use the MiroVideoConverter (Mac and Windows) to convert almost any video to MP4, Ogg Theora, or a specific phone or iPod.

What should I do if the HTML 5 video element isn't supported?

You need to provide a fallback in case the browser does not support the video format or the HTML 5 video element. See html5 video fallbacks with markup.

How do I attach an event listener to an element?

Here is a sample code:

<button id='button'>Play</button>

<script>
  // get the button element
  var myButton = document.getElementById("button");
  
  // define the function to be activated when clicked.
  function click(e) {
    alert("play");
  }

  // attach the function to the "click" event
  myButton.addEventListener("click", click, false);

</script>

An alternative approach is:

<script>
  // define the function to be activated when clicked.
  function click() {
    alert("play");
  }
</script>

<button onclick='click();'>Play</button>

How do I change the text of an HTML button?

Here is a sample code:

<button id='button'>Play</button>

<script>
  // get the button element
  var myButton = document.getElementById("button");
  
  // change the text
  myButton.textContent = "Stop";

</script>

What shoud I use to edit SVG?

See Software and support in applications to find several editors. Inkscape is a free cross-platform SVG editor.

Note that most commonly available tools, including traditional vector graphics editors, support the design of interactive interfaces in SVG, so you need to go into the code in order to attach events, do advanced CSS, etc.

How do I display/hide an SVG shape?

Change the value of the CSS property display:

<script>
   var play = document.getElementById("playButton");
   // hide it
   play.style.setProperty("display","none", "");
   // display it
   play.style.setProperty("display","inline", "");
</script>