Playing video using html5

                    Prior to HTML 5 it was difficult to write code for playing video. Developer used to write code based on browser types and OS. In HTML 5 new tag has been introduced to support videos. Its very straight forward to use not much of coding involved in using it.

<video id="myVideo" poster="start.jpg" autoplay="autoplay" width="100px" height="150px"
    audio="muted" loop="loop" controls="controls" src="video.mp4" preload="auto">
</video>

Attribute                                   Description

autoplay=autoplay                     If present, then the video will start playing as soon as it is ready

poster=url                                 URL of image which should be shown when video is not playing.

preload=auto/metadata/none     Video should be loaded when the page loads. This value is ignored if                                                       autoplay is true. auto: loads complete video,

                                                  metadata: only metadata of video gets loaded, none: nothing will be loaded.

src=url                                      Location of video file. Additional Source tag also can be used to specfiy the                                                   video source file.

                                                         <source src="video.mp4" type="video/mp4"/>

width=pixels                             Specifies the width of video player window.

height=<NUM>pixels               Specifies the height of video player window.

controls=controls                      Displays the different controls, like play button, previous, next controls.

audio=muted                             If muted value given means video will start in mute mode.

loop=loop                                Video will start over again, every time it is finished

<source src="video.mp4" type="video/mp4" />

src=url                                      Location of video file.

type:MIME Type                      Specify the MIME type of the video file. e.g. video/mp4 etc

  

<video id="myVideo" poster="start.jpg" autoplay="autoplay" width="100px" height="150px"
    audio="muted" loop="loop" controls="controls" preload="auto">
<source src="video.mp4" type="video/mp4" />   
</video>

Limitations:

1. Can only be played in Latest Browsers which supports html 5.

Browser Support:

Client Side performance Improvement Opportunities

Many of the web application face major challenge for performance. There are various ways to improve performance of the website. It can be Server Side Code Improvement (e.g. code analysis and refactoring, db side changes etc), Hardware Side (improve on hardware configuration, increasing number of servers etc) and Client Side. When  i say client side here i mean User Interface (such as Image, JS, css etc). I am going to explain in this article about various opportunities for performance improvements from Client side. This is not very exhaustive list but some of the items which can be controlled and taken care easily.

o Avoid complete page refresh wherever possible. You can use AJAX calls. This way we can reduce amount of the network data to be transferred and complete page refresh.

o Use "GET" for AJAX request where ever possible if data being transferred is not sensitive, amount of data is less, or you are getting data from server. Reason behind this is POST request creates two connections for single submit one for header and other for body. But GET does this task in single connection. Get performs better then POST request.

o Minify the JS/CSS file. This will reduce the JS/CSS file size, which will be downloaded faster from server. Minifying JS/CSS removes unnecessary blank lines, comments. Which helps in reducing the file size. Less file size means less data to be downloaded from server.

o Reduce the number of js/css file, combine them in single and use them. Less number of file mean fewer HTTP request to server for downloading them.

o Optimize the image file. This process will reduce the image file size by little compromise on quality of the image. Check in Google there are online image optimizer available e.g.  http://tools.dynamicdrive.com/imageoptimizer/

o Put css in top and java script at the bottom of the code.

o Specify dimensions that match those of the images themselves. Create image of required size and use them rather than fixing size using height and width attribute in <img height="100px" width="100px" /> tag. E.g. if your application needs 100X100 image and you have same image but of different height X width say 300X300 than don’t set height and width to 100X100 in image tag for your need. Create image of required size and use it. This is because browser still downloads bigger size image.

o Specifying a width and height for all images allows for faster rendering by eliminating the need for unnecessary reflows and repaints. But make sure above point is taken care when you specify the image height and width.

o Avoid empty image tag. E.g. <img src="" /> or var img=new Image(); img.src="";

o Use png image on top of gif images.

o Use pngcrush to optimize the image before using them. http://pmt.sourceforge.net/pngcrush/

o Avoid 404 errors, this means make sure there are no reference to missing files in your jsp.

o Use Image Sprite. Image Sprite is collection of many images into single image. This way only one server call will be made and many images can be downloaded. Using css we can render the images from sprite image. There are websites using which you can generate css for sprite images. e.g. http://www.spritebox.net/
below image is sprite image, where two images are combined in single image.

below css will split the image into two separate image.
img.im1{width:51px;height:32px;background-position:-1px -1px;background-repeat:no-repeat;background:url(sprites.JPG); }
img.im2{width:52px;height:33px;background-position:-54px -1px;background-repeat:no-repeat;background:url(sprites.JPG); }


you need to use these class in <img> tag as shown below:
<img class="im1" src="img_trans.gif"  width="1" height="1" />
<img class="im2" src="img_trans.gif" width="1" height="1" />
here src is one transparent image, this is required to be mentioned... below is snap how it comes in browser.

AJAX Integration with DOJO

 Dojo is an open source framework which provides various inbuilt functions for AJAX, Widgets, Events, and Effects etc. These functions make life easier for the developer. They provide complete abstraction from the complexity involved behind the scene. I am going to cover AJAX feature provided by Dojo in this article.

Normally when we code for AJAX we think of creating request, forming the data which needs to be sent to server, error handling, timeout scenarios, response handling etc. We can’t escape from any of these points when we write coding and due to this code becomes complex and cumbersome to understand and maintain. Dojo provides cleaner and easier approach to create a code for handling AJAX calls.

Dojo Basics:

Two types of request are sent to server for any AJAX request, Post and Get. Dojo provides two function for these two types dojo.xhrGet and dojo.xhrPost methods. These two functions have all the AJAX capabilities in built. It takes care of creating request, forming the data which needs to be sent to server, error handling, timeout scenarios, response handling etc.

dojo.xhrGet({

    url: "/pojoProj/ dojoCall.jsp",

    load: function(result) {

        alert(result);

     }

});

                There are various arguments available for these functions, I have shown below how to use them while coding and their description.

dojo.xhrGet({ // Function Name, this can be dojo.xhrGet/ dojo.xhrPost

// url, This is the Server URL to which AJAX request will go.

                url: "/pojoProj/search.jsp",

                // content, This is the parameter which will be passed to above URL,  to access these parameter use normal request.getParameter(“studentName”). Based on type POST/GET parameter will be send to server either as post data or url string.

                content: {                           

studentName: dojouser,

                                class: 12,

                },

//timeout, This value is milliseconds; request will wait for specified time than after that it will treat as failure.                               

                timeout: 10000,

                //

                form: dojo.byId(<<formName>>),

                //load is called after successful response.  This function will not be called in case of any error or exception.

load: function(resp) {

                                if(<<condition>>){

                                                <<actions>>

                                }else{

                                                <<actions>>

                                }

                },

                // The error handler, this function will be called in case of failure. You can use first argument to display error message if there are any.

                error: function(errorMessage) {

                                alert(errorMessage);

                },

// handle will be called always, in case of success and failure of the request.

                handle: function (response, ioArgs) {

                                alert("hello");

                }

});

Create web project and create two jsp for testing below code. Below example is only for plain text response, in coming blogs i will explain different ways of handling the response like JSON, XML...

Complete Code Sample:

Index.jsp:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<title>Insert title here</title>

<script language="javascript" src="js/dojo/dojo_uncompressed.js"></script>

<script>

function findStudent() {

                var stdName=dojo.byId("stdId").value;

                dojo.xhrGet({

                                url: "/dojo_json_sampleapp/dojoCall.jsp",

                                content: {

                                                stdname:stdName

                                },                                            

                                timeout: 10000,

                                load: function(resp) {

                                if(resp.trim() != ""){

                                                dojo.byId("respNode").innerHTML = stdName+" is in "+resp;

                                }else{

                                                dojo.byId("respNode").innerHTML = "Student detail is not available for "+stdName;

                                }

                                },

                                error: function(errorMessage) {

                                                alert(errorMessage);

                                }

                });

}

dojo.ready(function(){

                dojo.connect(dojo.byId("stdId"),"onkeyup",findStudent);

});

</script>

</head>

<body>

                Student Name: <input type="text" name="studentName" id="stdId" value="" />

                <p>Student Details: <span id="respNode"> </span></p>

</body>

</html>

Search.jsp

<%
if("pojo1".equals(request.getParameter("stdname"))){
      System.out.println(" 11111 ");
      out.print("4th standard");
}else if("pojo2".equals(request.getParameter("stdname"))){
      System.out.println(" 22222 ");
      out.print("5th standard");
}else{
      System.out.println(" 33333 ");
      out.print("");
}
%>

You can download the dojo js file from this url:  http://dojotoolkit.org/

Important Notes:
1. Use get method if you don't have large data to be submitted to server and if you are retrieving data from the server. As get creates only one connection to the server for complete request. Post creates two connection one for header and one for body. You will have better performance in Get.