How to Embed HTML5 Video With Fallback

A common question with the rise of HTML5 becoming more and more common and the whole iGeneration (iPhones/iPads/iEtc) is “how can I embed a video on my site without using a flash player?”.

An option that really does work quite well is to use the JWPlayer and set it up to use HTML5.

The benefit of going this route is you can also tell it to have a fallback to flash if the browser is not HTML5 compatible, or even fall all the way back to downloading the video if all else fails.

Firstly, you will want to download the JWPlayer here.

Then set it up on your page(s).

<script type="text/javascript" src="/jwplayer/jwplayer.js"></script>

Then add a div container for the player to embed itself in.

<div id="myMediaPlayer"></div>

Then you will setup the actual code to make things happen!

<script type="text/javascript">
  jwplayer("myMediaPlayer").setup({
    "id": "playerID",
    "width": "480",
    "height": "270",
    "file": "/videos/someVideo.mp4",
    "image": "/thumbs/someVideoThumb.jpg",
    "modes": [
        {type: "html5"},
        {type: "flash", src: "player.swf"},
        {type: "download"}
    ]
  });
</script>

If you are looking for all the attributes you can take a sneak peak no the official setup wizard.