Javascript utility for improved MotionBox video embedding

I’ve been using MotionBox for video hosting for a month or so now, with good results. They support HD video, have fast rendering, and allow unlimited storage (and video length, and embeds) for a reasonable flat fee. Their flash player, while having a few warts, is pretty darn good. The video quality is really superb.

A killer feature (for me) is the ability to make a video private, but still embed it anywhere you choose. This subtle thing allows me to post my videos on my private-login family blog site, but without letting the world see them, and without requiring my viewers to log in to Motionbox. This and the frame-rate issue below are the main reasons I chose MotionBox over Vimeo last month.

One problem with any HD video streaming is that many computers can’t play it well yet. In an effort to alleviate this, Vimeo reduces your 30fps video to 24fps. This helps a little, at the cost of introducing some jitters in your video from the missing frames. But even with this, they provide a much-needed toggle button in the player that allows someone to turn off HD if they’re having problems playing the video.

Motionbox leaves your video at 30fps (yay!), so on newer computers it plays really smoothly. But, the player doesn’t provide a way to switch between HD and SD versions of your video. So viewers on slower computers have no way of choosing SD, unless you embed that version instead.

So with the inspiration of a gentleman named Art on the Motionbox support site, I wrote a simple little javascript utility to provide a really easy way embed videos, including an HD/SD switch.

Here it is in action:

To do this, first embed the following Javascript functions in your site:

function hdplayer(videoid, width, height) {
  width = width || 720;
  height = height || 405;
  var rstring = random();
  document.write("<div id='thevideo_"+ rstring +"' class='playerBox'>Wait...</div>");
  generatePlayer("thevideo_"+ rstring, videoid, width, height, 1, 1);
}
function sdplayer(videoid, width, height, switchable) {
  width = width || 640;
  height = height || 480;
  var rstring = random();
  document.write("<div id='thevideo_"+ rstring +"' class='playerBox'>Wait...</div>");
  generatePlayer("thevideo_"+ rstring, videoid, width, height, 0, switchable);
}
function generatePlayer(elementId, videoid, width, height, hd, switchable) {
  document.getElementById(elementId).innerHTML = '<embed src="http://www.motionbox.com/external/hd_player/type='
  + (hd ? 'hd' : 'sd') + ',video_uid=' + videoid
  + ',autoPlay=false" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" width="'
  + width + '" height="' + height + '" allowFullscreen="true"><div>'
  + (switchable ? '<div class="playerControl" onClick="generatePlayer(\'' 
  + elementId + '\',\''+ videoid +'\', ' + width + ',' + height + ',' 
  + (hd ? '0' : '1') + ',1);">' 
  + (hd ? '<b>HD is on</b>. Click here to turn it off.' : 'HD is off. Click here to turn it on.')
  + '</div>' : '')
  + '</div>';
}
function random(){
  var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
  var sRnd = '';
  for (i=0; i<5; i++) {
    var randomPoz = Math.floor(Math.random() * chars.length);
    sRnd += chars.substring(randomPoz,randomPoz+1);
  }
  return sRnd;
}

To make this look nice, you probably want to use the following CSS:

.playerBox {
  text-align: center;
}
.playerControl {
 display: inline;
 font-size: .8em;
 text-align: center;
 padding: 4px;
 margin: 5px;
 cursor: hand;
 cursor: pointer;
 color: #aeaeae;
}
.playerControl:hover {
 background-color: #aaaaaa;
 color: #000000;
}

Now, the easy part: Using it! Once your site contains the above Javascript and CSS code, embedding a video becomes extremely simple. Where you want the video, just call the hdplayer() or sdplayer() functions in a script tag.

<script>hdplayer('yourvideoid')</script>
or..
<script>sdplayer('yourvideoid')</script>

Optionally, you can specify your preferred size. The defaults are shown in the Javascript above.

<script>hdplayer('yourvideoid', 640, 480)</script>

Finally, a note on the sdplayer() function: By default it will not be switchable. If you want to embed an SD video and allow HD switching, just pass a 1 to the function, like so:

<script>sdplayer('yourvideoid', 640, 480, 1)</script>

The above working example uses the following code:

<script>hdplayer('a791d4ba151de22e', 601, 338)</script>

That’s it! I’m interested on others’ thoughts and improvements. Thanks again to Art for the inspiration.

By the way, I’m using this approach on my SmugMug sites with excellent results.

I love your comments. Don't be shy, reply!

There are 2 replies to “Javascript utility for improved MotionBox video embedding

  1. Mark

    Beautiful work on the javascript. I’m pretty novice on that level.

    I run a pair of wordpress blogs.

    Does all this code above go within the HTML of the blog post or do I have to mess with the site templates etc?

    If it goes within the post, any chance you can email me a sample HTML cut & paste from a blog, or do I just stick all the code at the top or bottom?

    Thanks

    Reply
  2. sebastian Post author

    You probably want to add the javascript into the site template. In my case, I put it in a new file called mbembed.js, uploaded that, and then just updated my site template to reference the the new file like this:

    <script type=”text/javascript” src=”scriptpath/mbembed.js”></script>

    The CSS is the second part, I put that right into my template because it’s small, but you could reference a new file just as easily.

    Doing this makes it really easy to use the utility. When it comes time, all you need to add is the line that looks liek this:

    <script>hdplayer(‘a791d4ba151de22e’, 601, 338)</script>

    Having said all that, I’m not familiar with wordpress. If you prefer, you could add it all directly to the template. In that case, you’ll want to wrap the javascript portion in <script> tags, and the CSS portion in <style> tags. Put it all within the <head> section of your page.

    Hope this helps.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

The "are you a human" quiz *