Create a simple HTML .MOV player

This is how I added ui-icon to JQuery tabs

As a Ruby developer, I work quite a lot with their “special” plugins called gems. The nice fact about the gems is that they bring lots of functionality. By example, there’s a gem for paginating a collection who takes just few parameters and not only that finds out how many objects the collection has, but also how to split them, generating the corresponding links and serving to the original container (that used to show the entire collection) only the collection part that is representative in the context of current page and items per page.

Before someone new to a specific gem starts thinking to implement it, usually searches on the net for examples. The most important gems are described and exemplified in Railscasts.com. The content is excelent, the quality is good, sound is nice but the format chosen for movies is Apple’s .MOV proprietary format. There are few plugins to install for playing the files with MediaPlayer, but frankly I wanted a quicker solution than go on some obscure websites and getting from there a creepy .exe installer.

So I’ve created a simple .mov player that will replace the 33 MB of useless QuickTime Player (if you’re a Mac user, you have already this installed so you’ll not need my hack).

Go directly to the player >

So let’s see some code!

First, I decided to use the Object method in order to play mov files. Apple provides a .cab file, who is able to play this files in browser. More documentation on its parameters you can find in their Embedding tutorial.

Don’t forget to add a link to JQuery library!

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

The html code is shown below and it is pretty straight forward:

<body>
<div class="media">
  <div class="navigationTabs">
      <input type="text" id="txtURL" style="width:75%"/>
      <input type="button" id="btnPlayMov" value="Play"/>
      <input type="button" id="btnClearMov" value="Clear"/>
      </div>
      <div id="divPlayer">
          http://media.railscasts.com/videos/188_declarative_authorization.mov
  </div>
</div>
</body>

The JavaScript is a little bit trickier as it involves JQuery. For a newbie, it is pretty hard to debug, but after a while you’ll just feel it:

$(function() {
  // bind an onClick event for this second Flash container
  $("#btnPlayMov").click(function() {
    var _height = "306px";
    var _width = "400px";
    var _movie =  $('#txtURL').val();

   
    var _html = '';

    $("#divPlayer").html(_html);
  });
  
  $("#btnClearMov").click(function() {
    $("#divPlayer").html("http://media.railscasts.com/videos/188_declarative_authorization.mov");
  })
})

Not to mention that it works in all major browsers (IE 8, FireFox 3.6 and Chrome) !

Go directly to the player >

Radu Poenaru

Radu Poenaru

Create a simple HTML .MOV player

AUTHOR

Radu Poenaru