Archive

Archive for May, 2010

Easily Embed HTML5 Video

May 13th, 2010 413 comments

If you’ve ever watched video on the Internet, chances are you’ve seen JW Flash Player, created by Jeroen Wijering at http://www.longtailvideo.com/.  The JW Flash Player is the most popular open-source video player on the Internet today.

Yesterday, Jeroen and his team at LongTail Video announced a public beta for the next evolution of their most popular player, JW Player for HTML5.

With a few lines of code, the JW Player for HTML5 allows you to easily embed, configure, and skin video players using the HTML5 standard.  If a user is using a browser that does not support HTML5, the embed code will automatically fallback to the original JW Flash Player.  HTML5 is widely supported in many modern browsers, including Safari, Chrome, Firefox and IE9 — but most importantly, mobile devices including the iPhone, Android and the iPad.

The JW Player for HTML5 is a fully skinnable and configurable player based on the new <video> tag found in HTML5. It is built using javascript (jQuery) and enables a seamless fallback to the popular JW Player for Flash. Currently, our HTML5 player is in Beta. Certain functionalities that we consider essential are missing in this Beta version, and will be included in the 1.0 release.

Source: http://www.longtailvideo.com

It’s that easy.  Jeroen has posted multiple examples of the player and is actively looking for feedback.  Just as a quick demo, the video below was embeded using the following lines of code and will play on your desktop, iPad, iPhone, or anything in between.

Thanks Jeroen!

HTML Code

Here is the code for this setup. Make sure to change all links to the scripts, player, image and video. They must refer to the correct files on your server.

First, place this code in the <head> of your page:

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

Second, place this code where you want the video to appear:

<video height="270" id="player" poster="/files/bunny.jpg"
  src="/files/bunny.mp4" width="480"></video>

<script type="text/javascript">
  $('#player').jwplayer({
    flashplayer:'/files/player.swf',
    skin:'/files/five.xml'
  });
</script>

Example

Categories: Project Rethink Tags: