Projekktor optionally mounts itself onto HTML5 <audio> and <video> tags. This will work with any standard conform HTML5 media mark-up, regardless if the browser itself supports it. Since V0.8.0 you can pump Projekktor also into any blocked DOM container which makes things much easier from time to time.

The benefit of using HTML5 tags with Projekktor anyway is the fact that you will be able to add and remove Projekktor whenever you want and without the need to alter your HTML at any time.

The most basic approach to embed e.g. a video via HTML5 is the following mark-up:

<video class="projekktor" width="640" height="360" poster="poster.jpg">
  <source src="myvideo.mp4" />
  <source src="myvideo.webm" />
  <source src="myvideo.ogv" />
</video>

The mark-up above does not do much but will bring up a video player of 640 pixel width and of 360 pixels height. The player will initialize bringing up a preview image filed as poster.jpg. If the user hits play “myvideo” is played back. This is not that spectacular at all but works very well.

Of course this will also do without the use of Projekktor. Feel free to try it with and without Projekktor included in order to learn the difference.

You might wonder why there are three video sources given in the example above. The reason is simple: Not every browser (or device) is able to play back every video format. The story behind is a long one to be told later. For now it´s important for you to know that you should consider to provide multiple formats of the same video depending on the platforms you want your videos to be played back on.

Anyhow Projekktor features an intelligent Flash fallback. That way you will - by today - reach the most platforms by providing just an “h264/mp4” file which will played back either using Flash or native media capabilities where available (which is always preferred). Thanks to this you can evaporate the mark-up down to the following - if you want to:

<video class="projekktor" width="640" height="360" source="myvideo.mp4" poster="poster.jpg"></video>

Nevertheless you should consider to provide at least a WEBM alternative to get the best results and a more Flash-less user experience at all.