HTML5 <video/> Facts

I had to develop a video solution for my client. Having gone through hype in the market, I thought solution is simple i.e., just use HTML5 <video/> tag and my job is done. But that became about 5 days of strenous work. Everybody says – desktop browsers, Android, iPhone smart phones – they support HTML5. But that’s not true completely. There are few things you need to know and yet today *one solution does not fit all devices*. There are many javascript libraries out there – jwplayer, videojs, html5video, easyhtml5video and so on claim their solution is supported in all devices. But that is not true again.

We had to develop solution for IE8, Android and iPhone smarphones.

First we tried to play video using HTML5 <video/> with no luck.Then I used jwplayer to play the video, but again this did not satisfy the requirement.

– IE 8 does not support HTML5, so jwplayer embedded flash object to play the video and it was okay for us. jwplayer, also plays video well in MacBook Safari 5, Firefox 8.

– Android (Gingerbread) and iPhone (4S) support HTML5, but *not* HTML5 <video/> tag… we came to know this fact after some trials, however, many in the Internet say they are able to play videos using HTML5. That is clueless.

– Android ICS browser supports HTML5 <video/> tag very well, i.e., if you are able to play video on your desktop HTML5 supported browser then it would play in Android ICS browser.

– Now, we are looking for a solution for iPhone and Android (2.2+ OS).

– As Apple iPhone does not support Flash player we were left deserted hunting for solutions. Then, luckily we found that Apple has written a script to play videos in iPhone browser here. This is truly helpful. Just follow it.

– Android phones does support Flash, then why does jwplayer not able to play the video as it’s basic working mechanism is if browser supports <video/> tag it plays the enclosed video in <source/> tags, else it would fallback to <object/> video, if provided. jwplayer does all that for us… but still video does not play in Android phones. Then we discovered that, jwplayer was paralyzed by the assumption that as browser supports HTML5 it just tries to play the video using <video/> tag and stops thinking further. It could also be that Android phones before 3.0 does not play video over https, and our video was hosted on a https schema based server.

– Now, for Android phones to play the video, we have used classic HTML <object/> tags. Again it did not work straight… initially we had the problem of “no video only audio”. With some amount of googling I came to know that the video we have is having some problem playing in Android phones and to fix it we have to use Handbrake software to properly encode the video to Android compatible.

Hurray! we are done… now our video can be played in IE8, Android 2.2+, iPhone smart phones. But for that we have to implement 3 different solutions for three different devices, see how variant the market is!

jwplayer script to support Internet Explorer 8.

Apple Quicktime script to support iPhone.

<object/> to support Android.

Hope this helps someone in need. Post your comments and make this blog lively.

Let me know if some one needs a sample code and I will email them.

Android Drag-n-Drop List View

Eric Harlow has come up with a nice drag-n-drop widget that is cool and easy to understand. You can find more about it here.

I have customized it such that user can drag-n-drop an item from a list view only when user has pointed his finger/ stylus/… at the dragger object which is usually to the left of item. If user tries to drag the item by pointing his finger elsewhere, the drag won’t happen. You can find this updated source here. Play with it and extend it!

spring-social and linkedin

spring-social as detailed at spring-social team blog is programmed very well and is interesting to develop apps on top of it. Hence, I have downloaded the spring-social source code and samples from spring-social github project and started going over them. The samples work as they are, however, these are not compatible with latest version of spring-social-1.0.0.M2, so, I have started upgrading these samples and now finally I have working version of these samples. In the process I have made some changes and added some features as detailed follows:

  1. Added “Connect to LinkedIn” sample.
  2. Added ability to send links along with status updates to Facebook.
  3. and some fixes and small changes here and there.

Added “Connect to LinkedIn” sample: Adding ability to connect to linkedin is very similar to twitter/ facebook and simple i.e.,

  1. Add a show case controller, which can handle requests – LinkedinShowcaseController.java
  2. Add a linkedin.jsp which presents logged-in users linkedin details like: users linkedin public profile url, user name, users connections and so on.
  3. Add two linkedin files under /connect like: linkedinConnect.jsp and linkedinConnected.jsp as required by the Connect Framework.
  4. Under resources add linkedin connect image.

Now, coming to XML configuration:

  1. Add org.springframework.social.linkedin.connect.LinkedInServiceProvider to connect.xml file.
  2. Add linkedin consumerKey and consumerSecret to properties.xml file. (To register your app at linkedin login to linked developer site and follow the process.)

That’s it! You are done. Compile, deploy and run the app and start connecting to linkedin through spring-social. Interesting isn’t it?

Sample Linkedin Authorization screen as you try to connect to linkedin:
Linkedin OAuth screen

Added ability to send links along with status updates to Facebook: following is the enhanced facebook post to wall entry form:
Facebook message with link post entry form

following is the facebook posting screen capture:
Facebook status update with link

That’s all for now! Enjoy developing apps on top of spring and spring-social frameworks.

Migrating Subversion

As in usual life at our place as well we have to deal with every sort of work with out considering any boundaries to our role or designation, only then we feel we are doing something productive (productive is the term that keeps any person alive🙂 , am I true?).

Generally, I like working with various departments, at various levels, doing various things (even not related to my mainstream development work in Java/ WebObjects… this is true… now-a-days am working in PHP as well, server-side work – I have been doing from so long and I like it very much🙂 )

Okay, coming to our main subject today, recently I have dealt with migrating Subversion from Microsoft Windows Exchange Server to Apple Mac OS X Tiger machine. Initially, I was worrying if I could do it. Luckily, I had one of my best colleague, Saju Cyriac, from my earlier company Effigent India Pvt Ltd., who gave me support in doing this.

Thanks a lot to Saju🙂

I just followed below steps to migrate Subversion from Windows machine to Apple Mac OS X machine:

1) Take a dump of Subversion in the windows system to a location in the system, by following below steps:

    a) Create folder in the C: drive, for eg: SubversionBackup

    b) Open Command prompt (Start -> Run -> type cmd in the box and press enter)

    c) Do you know the location of Subversion repository installed in Windows machine? If not, please try this: 

       c1) Execute svnservice -debug command in the Command Prompt.

       c2) Executing this command should output some debugging log to the console, here look for svnserve.exe word and capture the last argument of this svnserve.exe command, which should be the location of Subversion repository in this machine.

    d) Now, having location of Subversion repository (assume it is, C:\svnrepo), start taking the Subversion dump by executing following command in the Command Prompt:

svnadmin dump C:\svnrepo > C:\SubversionBackup\svnrepo_windows_dump.dumpfile

In few moments above command creates dump of Subversion repository in the C:\SubversionBackup\svnrepo_windows_dump.dumpfile file. Great!!!

2) Now, to load (migration of Subversion) the above Subversion repository dump to Apple Mac OS X machine, make sure you have installed and configured Subversion (http://subversion.tigris.org/). Ensuring Subversion is installed in the Mac machine, follow below steps to setup Subversion repository in the Mac machine, Open a Terminal to start:

  a) Create Repository: execute below command in the terminal, choose a name for the repository – 

   svnadmin create /svnrepo

  b) Create a Subversion User: 

   b1) vi /svnrepo/conf/svnserver.conf and add the below lines at appropriate location/ or if they exist already uncomment them:

    anon-access = none

    auth-access = write

    password-db = passwd

  b2) Create a password file:

    vi /svnrepo/conf/passwd

    In this file add a line for your user, in the following format:

   # add users in the format: user = password

    tony = mypassword

 c) Load your Subversion repository dump, execute the following command in the terminal: [before executing this step you should have transferred the Subversion repository dump file (compressed, for safety) from Windows machine to Mac machine]

  svnadmin load /svnrepo < /svnrepo_windows_dump.dumpfile

WOW!!! that is coool. You have migrated Subversion from one machine to another.

3) Start SVN server as daemon, execute below command in the terminal:

  svnserve -d

4) Now, try checkout code from new Subversion repository, for eg, execute below command in the terminal:

 svn co svn://<New Subversion machine IPAddress>/svnrepo/MyProject

Since we set anon-access to none you should be prompted for username and password which you created in the file /svnrepos/conf/passwd.

 5) To configure Subversion to restart automatically upon Mac OS X Tiger machine reboot, follow below steps: [below content taken from http://www.kashum.com/blog/1217783696%5D

So, to start svnserve automatically, create the file/Library/LaunchAgents/org.tigris.subversion.svnserve.plist, and put the following in it:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
  <key>Disabled</key>
  <false/>
  <key>Label</key>
  <string>org.tigris.subversion.svnserve</string>
  <key>ProgramArguments</key>
  <array>
      <string>/usr/local/bin/svnserve</string>
      <string>--inetd</string>
      <string>--root=/Users/defaultuser/svn</string>
  </array>
  <key>ServiceDescription</key>
  <string>Subversion Standalone Server</string>
  <key>Sockets</key>
  <dict>
    <key>Listeners</key>
    <array>
      <dict>
        <key>SockFamily</key>
        <string>IPv4</string>
        <key>SockServiceName</key>
        <string>svn</string>
        <key>SockType</key>
        <string>stream</string>
      </dict>
      <dict>
        <key>SockFamily</key>
        <string>IPv6</string>
        <key>SockServiceName</key>
        <string>svn</string>
        <key>SockType</key>
        <string>stream</string>
      </dict>
    </array>
  </dict>
<key>inetdCompatibility</key>
  <dict>
    <key>Wait</key>
    <false/>
  </dict>
</dict>
</plist>

This automatically starts the server when it boots. It also switches it from a standalone daemon to running under inetd, but it makes no real difference. There are a lot of different versions of this plist out there, but this is the only one I got to work.

DONE. You have successfully migrated Subversion and configured it to restart automatically upon server reboot.

‘N’joy🙂

Online Image Editor

I was looking for a image editor which can manipulate images such that add background colors to image, crop the image,… and I found  pixlr to be nice online tool – http://www.pixlr.com/editor/ – try it out!!!

Alternatively, I have also experienced that Microsoft Paint does most of basic image editing work. So, MS Paint may be your first image editing tool and then look for others…

Multiple instances of Firefox

I had come across an interesting article, of how to manage multiple instances of Firefox, below links are helpful, as of the date of this post:

Multiple Firefox instances : http://www.mouserunner.com/FF_Tips_Multiple_Fx.html

Profile Manager : http://www.mouserunner.com/FF_Tips_Profile_Folder.html

Ever worried how to separate personal browsing from official work. Above is the wonderful way. Try it out. ‘N’joy…🙂

Javascript

A quick code snippet that helps to identify the height, width of browser and also we have functions here that give us top and left of scroll.

function f_clientWidth() {
return f_filterResults (
window.innerWidth ? window.innerWidth : 0,
document.documentElement ? document.documentElement.clientWidth : 0,
document.body ? document.body.clientWidth : 0
);
}
function f_clientHeight() {
return f_filterResults (
window.innerHeight ? window.innerHeight : 0,
document.documentElement ? document.documentElement.clientHeight : 0,
document.body ? document.body.clientHeight : 0
);
}
function f_scrollLeft() {
return f_filterResults (
window.pageXOffset ? window.pageXOffset : 0,
document.documentElement ? document.documentElement.scrollLeft : 0,
document.body ? document.body.scrollLeft : 0
);
}
function f_scrollTop() {
return f_filterResults (
window.pageYOffset ? window.pageYOffset : 0,
document.documentElement ? document.documentElement.scrollTop : 0,
document.body ? document.body.scrollTop : 0
);
}

//this function is internal to above functions.
function f_filterResults(n_win, n_docel, n_body) {
var n_result = n_win ? n_win : 0;
if (n_docel && (!n_result || (n_result > n_docel)))
n_result = n_docel;
return n_body && (!n_result || (n_result > n_body)) ? n_body : n_result;
}