Syncing Content With HTML5 Video

Embedding Video

This is old news. Embedding video in a document is as easy as adding a <video> element and pointing it to the source video. Adding a controls attribute gives you native controls:

1 <video src="chris.ogv" controls></video>

This is the theory, though. In the real world of intellectual property, corporate competition and device-specific solutions, we as developers have to jump through a few hoops:

01 <video controls="true" height="295" width="480">
02 <!-- hello iOS, Safari and IE9 -->
03 <source src="chris.mp4" type="video/mp4">
04 <!-- Hello Chrome and Firefox (and Opera?) -->
05 <source src="chris.webm" type="video/webm">
06 <!-- Hello Firefox and Opera -->
07 <source src="chris.ogv" type="video/ogg">
08 <!-- Hello legacy -->
09 Your browser does not support the video tag,
11 check the video on YouTube
12 </a>.
13 </video>

This shows how we need to deliver video in three formats in order to satisfy all of the different browsers out there. There are a few ways to accomplish this. Here’s what I do…

Convert Video With Miro Video Converter

Miro Video Converter is an open-source tool for Mac that makes converting videos dead easy. Simply drag the video to the tool, select WebM as the output format, and watch the progress. A few other converters for Windows and Linux are available, too.

Miro in Syncing Content With HTML5 Video


3 Comments to “Syncing Content With HTML5 Video”

  • PolishPokeyPimp August 20, 2013 at 1:26 pm

    I need a video converter, one thats fast, thanks! choosing best answer

  • Matthew October 20, 2013 at 6:08 am

    I recently got a Mac and am pretty tired of clicking on videos only to see that my computer doesn’t support them because they require Flash player. Is there a way to filter my search results to show only HTML5 videos? I’ve had a look around the settings but can’t see anything obvious that allows me to do this.

  • Melanie October 28, 2013 at 4:54 am

    Can anyone copy the source code of a HTML5/JavaScript mobile application packaged into native applications with one of frameworks like PhoneGap or Appcelator? Thank you.