Timani » Blog http://timani.net Seattle based Drupal, Wordpress, CSS3, HTML5 and Android Sun, 29 Jan 2012 04:22:17 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Varnish Cache – A simple explanation (Video) http://timani.net/2012/01/varnish-cache-a-simple-explanation-video/ http://timani.net/2012/01/varnish-cache-a-simple-explanation-video/#comments Thu, 05 Jan 2012 04:14:25 +0000 timani http://timani.net/?p=1105

Looking got an easy simple explanation of what Varnish Cache is, and how you it can work for you? This is a good starter for anyone looking to optimize improve the performance of your service,server, or site.

]]> http://timani.net/2012/01/varnish-cache-a-simple-explanation-video/feed/ 0 A simple Backbone.js walkthrough of Models and Views (Video – Part 2/2) http://timani.net/2011/12/a-simple-backbone-js-walkthrough-of-models-and-views-video-part-22/ http://timani.net/2011/12/a-simple-backbone-js-walkthrough-of-models-and-views-video-part-22/#comments Thu, 29 Dec 2011 03:52:36 +0000 timani http://timani.net/?p=1096

The second in the Backbone.js model and view walkthrough series. A little more detail in this tutorial about how Basic Auth tokens and custom http headers are sent to the RoR backend

]]> http://timani.net/2011/12/a-simple-backbone-js-walkthrough-of-models-and-views-video-part-22/feed/ 0 A simple Backbone.js walkthrough of Models and Views (Video – Part 1/2) http://timani.net/2011/12/a-simple-backbone-js-walkthrough-of-models-and-views-video-part-12/ http://timani.net/2011/12/a-simple-backbone-js-walkthrough-of-models-and-views-video-part-12/#comments Thu, 01 Dec 2011 03:42:48 +0000 timani http://timani.net/?p=1092

This example introduces two new Model actions (swap and delete), illustrating how such actions can be handled within a Model’s View.

This is an extension of the example found here: http://arturadib.com/hello-backbonejs/docs/5.html

]]> http://timani.net/2011/12/a-simple-backbone-js-walkthrough-of-models-and-views-video-part-12/feed/ 0 Easily add a simple HTML5 video player for your media using VideoJS – with demo http://timani.net/2011/04/easily-add-a-simple-html5-video-player-for-your-media-using-videojs/ http://timani.net/2011/04/easily-add-a-simple-html5-video-player-for-your-media-using-videojs/#comments Sun, 17 Apr 2011 20:46:07 +0000 timani http://timani.net/?p=1050 Continue reading →]]>

HTML5 is growing in popularity, and one of the best things about it is the video capabilities. There are a slew of benefits in contrast to flash (which I won’t get into now) and its good to see some great projects like VideoJS.  This is a simple and easy to use JavaScript library that you can easily embed and customize to get a lightweight alternative to bulky, complicated flash that may not display on all mobile devices.

Who?

Plugin Name:  VideoJS
Plugin URL:  http://videojs.com/
Author: Zencoder

What?

So what does this plugin do? I think the best thing is to give the description given by the author:

VideoJS is an HTML5 Video Player with 3 core parts: An embed code (Video for Everybody), a JavaScript library (video.js), and a pure HTML/CSS skin (video-js.css).

Using Video for Everybody as the embed code means you know it’s compatible with many devices (including ones without JavaScript).

One of the best thing about this plug-in was its flexibility as well the impressive list of extensions, that makes it very portable and easy to use on almost any web project.

To add to that the video quality was crisp, and there was also the ability degrade gracefully and fall-back to flash in cases where HTML5 was not supported and default when flash was not present.

However, the fact that you can also freely change the appearance of the player using CSS alone means that this is the thing that really give it great appeal. This can be done using “Skins” and they allow you to make the player look like Youtube, Vimeo, hulu or any other high-end player by simply including a style sheet and modifying a line of code.

*Demo*

Below is a working example of what the video player and feels looks like but be sure to check out the other demo’s on the main VideoJS site.
[video mp4="http://video-js.zencoder.com/oceans-clip.mp4" ogg="http://video-js.zencoder.com/oceans-clip.ogg" webm="http://video-js.zencoder.com/oceans-clip.webm" poster="http://video-js.zencoder.com/oceans-clip.png" preload="true" width="560" height="280"]

Features

  1. Free & Open Source
  2. Lightweight. NO IMAGES USED
  3. 100% skinnable using CSS
  4. Library independent
  5. Easy to use
  6. Easy to understand & extend
  7. Consistent look between browsers
  8. Supports Multiple Browsers: Firefox, Safari, Chrome, Opera, IE9
  9. Fall-back for older Browsers: IE6, IE7, IE8
  10. Support for Mobile devices: Android, ipad, iphone, ipod
  11. Full Screen & Full Window Modes
  12. Volume Control
  13. Forced fall-back to Flash (even when there is an unsupported source)
  14. jQuery plugin
  15. CMS plugins/modules: Drupal, Joomla, WordPress, Umbraco

Bonus Feature: Embed Builder

Adding the needed embed code is not always a piece of cake, so fortunately VideoJS has a nifty tool that you have use to easily generate the markup that you need.

How?

1. Download the VideoJS library files and include the needed css and js file

 <head>
  ...
    <script src="video.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" href="video-js.css" type="text/css" media="screen" title="Video JS" charset="utf-8">
  ...
  </head>

2. With the JavaScript and style sheet loaded add in the code to initialize the video player.

  <script type="text/javascript" charset="utf-8">
    // Add VideoJS to all video tags on the page when the DOM is ready
    VideoJS.setupAllWhenReady();
  </script>

3. Finally add in the markup for the plug-in. It is not that hard but fortunately there is the Embed Builder where you can easily, cut, paste and click to get the sample code below.

  <!-- Begin VideoJS -->
  <div class="video-js-box">
    <!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->
    <video class="video-js" width="640" height="264" controls preload poster="http://video-js.zencoder.com/oceans-clip.png">
      <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
      <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"' />
      <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg; codecs="theora, vorbis"' />
      <!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
      <object class="vjs-flash-fallback" width="640" height="264" type="application/x-shockwave-flash"
        data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
        <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
        <param name="allowfullscreen" value="true" />
        <param name="flashvars" value='config={"playlist":["http://video-js.zencoder.com/oceans-clip.png", {"url": "http://video-js.zencoder.com/oceans-clip.mp4","autoPlay":false,"autoBuffering":true}]}' />
        <!-- Image Fallback. Typically the same as the poster image. -->
        <img src="http://video-js.zencoder.com/oceans-clip.png" width="640" height="264" alt="Poster Image"
          title="No video playback capabilities." />
      </object>
    </video>
    <!-- Download links provided for devices that can't play video in the browser. -->
    <p class="vjs-no-video"><strong>Download Video:</strong>
      <a href="http://video-js.zencoder.com/oceans-clip.mp4">MP4</a>,
      <a href="http://video-js.zencoder.com/oceans-clip.webm">WebM</a>,
      <a href="http://video-js.zencoder.com/oceans-clip.ogv">Ogg</a><br>
      <!-- Support VideoJS by keeping this link. -->
      <a href="http://videojs.com">HTML5 Video Player</a> by VideoJS
    </p>
  </div>
  <!-- End VideoJS -->

Conclusion

In three steps you can easily add an HTML5 video player to your website or blog. If you are looking to create a dynamic application or mere have a more cross browser, and mobile friendly video player then VideoJs is definitely worth a look.

Anyone who has ever had to embed any of the popular open source and commercial players know changing the look and feel may not be all that easy, and also costly in some cases. There are also restrictions in exactly how much control you would have on the interface of the flash and so give this a try.

]]> http://timani.net/2011/04/easily-add-a-simple-html5-video-player-for-your-media-using-videojs/feed/ 6 A simple introduction to mongodb (video) http://timani.net/2011/01/a-simple-introduction-to-mongodb-video/ http://timani.net/2011/01/a-simple-introduction-to-mongodb-video/#comments Sat, 08 Jan 2011 03:34:20 +0000 timani http://timani.net/?p=1087

MongoDB — from “”humongous”" — is an open source, non-relational, document-oriented database. Trading off a few traditional features of databases (notably joins and transactions) in order to achieve much better performance, MongoDB is fast, scalable, and designed for web development.

]]> http://timani.net/2011/01/a-simple-introduction-to-mongodb-video/feed/ 0