Skip to content

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>
Code language: HTML, XML (xml)

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

<div id="myMediaPlayer"></div>
Code language: HTML, XML (xml)

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>
Code language: HTML, XML (xml)

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

See also  How to Make a Java Jar File Executable
Notify of
Inline Feedbacks
View all comments
Would love your thoughts, please comment.x