Ways to include different video formats in different browsers and mobile devices

Introduction:

First of all my hearty thanks to Corinne Ducusin, one of the reader of my Tip How to play multiple videos in a loop using HTML5 and JavaScript. She is the person, who anyway encouraged me to write this post.

Yesterday I received an email from her, which includes a query, “how can we include the different formats of same video file to play it in different browsers”.

We all know that all browsers do not support same media formats of videos. So it’s a best practice to include different formats of videos to play it in different kind of browsers and devices. The browser will detect the supported format automatically and play that video file.

Description:

As per that post, videos were declared in an array to play them in a loop using HTML5.
var videoSource = new Array();
videoSource[0]=’video/video.m4v’;
videoSource[1]=’video/BigBuck.m4v’;

So now the question is, how can we include the other formats for the same video? If we declare the array like below, will it work? Continue reading

Using WinJS.Promise.Join-Executing a task after others finishes

Introduction:
WinJS.Promise.join is a method being exposed by the Promise object to deal with multiple promise objects execution.

Scenario:
This is a live scenario when I have received a task which will call a set of web services and perform certain action after the completion of all web services execution in an asynchronous mode.

Solution:
HTML file content Continue reading

Start – Stop Magic in WinJS.Application Object

Introduction:
Start and Stop methods of WinJS.Application object explaining their functionality as by the names suggested.

Initial expectation:
These methods are responsible for the starting and stopping of the application, since we usually see them added to the default templates.

My experiment :
default.html file Content


  <body>
    <span id="deSpan" style="font-size:70px;"></span>
</body>

Continue reading

WinJS.Promise – My Experiment to create some delay using loop

Intoduction:
WinJS.Promise is a class, which supports the asynchronous programming model. Upon the execution, program control executes the promise class and proceeds to the subsequent statement to execute. But it keeps track of the execution point to which control needs to get back after the promised function finished its execution.
A question was banging my head, whether I can create my own delay to the promise object and invoke Then/Done.

Description:
I tried 2 kind of exercises. But in both the exercise I had the HTML page common.

Exercise #1
Used the below code to create a delay by executing a long loop in an external method and returning a promise object from it. So that on completion, I can call Then method to do some task. Continue reading

Few issues and solutions in iOS7 using Phonegap 2.6

Issue #1 : Status bar issue in ios7 using phonegap:

In Phonegap by default the apps are not with full screen.

But in iOS7, all the applications are running full screen so the status bar is overlapping with the top part of the webview/page.

Fix
Open MainViewController.m file (present inside classes folder)
Place the following code in (void)viewWillAppear:(BOOL)animated class.

if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) {
       CGRect viewBounds = [self.webView bounds];
       viewBounds.origin.y = 20;
       viewBounds.size.height = viewBounds.size.height - 20;
       self.webView.frame = viewBounds;
}

Continue reading

Canvas In Action in Windows Store App

The slides contains a brief demonstration on the Canvas and its use in Windows Store app. Also a small intro to the Inking. Continue reading

Writting on Canvas in Windows Store App

This video demonstrate the canvas in action with Windows Store app. We can write or make drawings using canvas. We can draw/write custom lines/letters using finger/mouse/pen on screen in Windows Store Apps. We are using Html5, CSS and JS to demonstrate the same.

Presented By: Nirmal Hota, Cross-Platform Mobile and Windows Phone Lead, Mindfire Solutions

Settings Flyout in Windows Store App

The video displays the use of settings flyout in the Windows Store apps. It is also displays the ways to open the system settings flyout as well as creating and consuming the custom settings flyout.

Presented By: Nirmal Hota, Cross-Platform Mobile and Windows Phone Lead, Mindfire Solutions

Drawing on screen by finger touch in Windows Store App

Introduction

In some mobile projects, Many times I have come across about the requirement of drawing some figure on a mobile screen in a specified area by using the finger touch. Below is an example of very simple drawing mechanism in WinRT environment.

Description

To begin with the example, we must think about the logic of implementing the same. So considering the idea of drawing on screen, the primary thought coming to mind is CANVAS.

Yes, we will use the canvas object here to draw the objects on screen. Continue reading

Detect input pointer device in Windows Store App

Introduction

The Windows Store Application can run in any Windows 8 supported devices. Such as in Win8 desktops, Surface Tablets, touch sensitive devices etc.

In the desktop environment, to perform operations like button clicks etc we need to use the MOUSE as the input pointer device.

In tablet or touch sensitive devices to perform such operation we need to use the FINGER TOUCH as the input pointer. Also we can use PENs to perform the touch operation.

Let’s assume a scenario where we need to program on basis of the pointer device used in the application. Below is one of the example to detect the pointer device.

Description

In the below example we are trying to sense the pointer device.

Html file contect


   <span class="spnTouch" id="spnDevice">Touch/Click Me</span>
  <img id="imgDevice" alt="" />

Continue reading