Saturday, 2 August 2014

Play a Video and audio in Html5

In this article we are going to see how to play a video and audio file in HTML5. For this we are going to create a example like below one both are players one play video and another one plays audio.

Video


Audio




For play the video and audio file in Html5 we have two new tags, video and audio tag

In video tag supply the source in the childrens tag with alternate ones if first one failed to load , then next will load, default image can be displayed we can set the size of the control, to visible the options menu panel declare the control attribute on video tag

This plays the mp4 file in browsers supporting the mpeg-4 format. If the browser doesn't support mp4, the browser uses the ogg file. 

See also the list of media formats supported by the audio and video elements in different browsers.


  • audio/wave (preferred)
  • audio/wav
  • audio/x-wav
  • audio/x-pn-wav
  • video/webm
  • audio/webm
  • audio/ogg
  • video/ogg
  • application/ogg
  • video/mp4
Feature              Chrome             Firefox    Internet Explorer      Opera          Safari
Basic support3.03.5 (1.9.1)9.010.503.1
<audio>: PCM in WAVE(Yes)3.5 (1.9.1)Not supported10.503.1
<audio>: Vorbis in WebM(Yes)4.0 (2.0)Not supported10.603.1 (must be installed separately)
<audio>: Vorbis in Ogg(Yes)3.5 (1.9.1)Not supported10.503.1 (must be installed separately, e.g. XiphQT)
<audio>: MP3(Yes) (Not in Chromium)Partial (see below)9.0Not supported3.1
<audio>: MP3 in MP4





<audio>: AAC in MP4
(Yes) (Main only) (Not in Chromium)
Partial (see below)
9.0Not supported3.1
<audio>: Opus in Ogg27.015.0 (15.0)


<video>: VP8 and Vorbis in WebM6.04.0 (2.0)9.0 (must be installed separately, e.g. WebM MF)10.603.1 (must be installed separately, e.g. Perian)
<video>: VP9 and Opus in WebM29.028.0 (28.0)


<video>:  Theora and Vorbis in Ogg(Yes)3.5 (1.9.1)Not supported10.503.1 (must be installed separately, e.g. XiphQT)
<video>:  H.264 and MP3 in MP4
(Yes) (Not in Chromium)
Partial (see below)9.0Not supportedNot supported
<video>: H.264 and AAC in MP4
(Yes) (Not in Chromium)
Partial (see below)9.0Not supported3.1

Code:

    <video style="width: 500px;height: 500px" controls>
        <source src="Apple%20-%20Think%20Different%20Commercial.mp4" type="video/mp4">
        <source src="Apple%20-%20Think%20Different%20Commercial.ogg" type="video/ogg">
        Your Browser doesnt support the
        <code>video</code> element
    </video>




    <audio src="Apple%20-%20Think%20Different%20Commercial.mp4" style="width: 500px;height:               500px" controls>
     </audio>


From this article you can see how to load a video and audio files in HTML5.








Information about NeuroScience


Brain Controls whole human Body system :
        Human Brains are faster than the Super computers, If some one says they had did some work, it is ordered by brain to say like this,  still scientist are not uncovered the full extent of human brains. what are the things that human brain can do ? but they found what are the things that human brain can do , some are the following heart rate, emotion, learning memory, brain controls the immune system that fight against the disease.

It shapes our thoughts, Dreams , Imagination , Creating vision etc all the things are done only by the Brain,but how the some of the people goes in wrong way or speaking illegal words, for example if we take a scenario

now days more common spoken controversy topic is Gay and Lesbian. What is this a new kind of collaboration in humans Generation ? Actually while i am studying , there is nothing like this explained,in Human Anatomy subject, a topic is there sex reproduction system, relationship between the Men and women are explained, but not about this ! Then where it comes from ? It is not created in one generation , actually speaks it is a one kind of problem in Brain takes place in humans,This happens by two actions , 

1. By Birth itself some persons have a problem in brain, like hormones generation , because of that DNA problem they not standard in to one category.
2. By the Regular Habits, some of the persons become gay or lesbian because of the habits and the movies watched by them, turns the brain activity in improper way, we can find that persons because they keep on start to say about the same word to others like "That Person is gay or lesbian" like complaining others are gay or lesbian, That is a damaged brain which needs treatments. This is because of regular activity of watching porn films like that. It make a visual core effect on that brains.

If you want to test the brain activity, whether brain make the works automatic with out u'r control, it can be check in easy way.

Try to wake up early in the Morning 4 or 4.30am continuously two to three weeks , with out any interception at the same time correctly by setting the alarm clock , then after that week don't set the alarm to wake up, but you will see one thing you will sharply wake up at the same time with out any notifications, even the Time also be the same, how the person sleeping knew's the Time correctly ? just check by ur self, It is yours activity.

Neuro Scientists specialize in the study of brain and the nervous system , they are trying to understand how the brains  billion nerve cells are connect.they are trying to find how this circuits make humans to read and speak. 

Brain's Work:
   More than 1500 disorders of the brain and nervous system results in various problems like stroke, vision loss, weakness, cancer, mental health , addiction disorders etc.

Then how the solution will be given for this , because the brain is the central core part of humans, some disease can improved by surgery, medicines , physical therapy. mostly even after the surgery or medicines they have to take physical therapy because even physical movement of body makes trigger brain.

Many doctors suggest to do yoga for any problem nowdays, why means all problems starts from the Brain
Every individual persons are different from each others, because every medicine is not works for every person each person brain have different levels, some of them have a extra ordinary ability also now days , you can see in Television super humans. It is because of Brain only, it resist all kind of activities, For example now days many of them dying in Cancer, A person with out smoking, drinking etc also dying in this . Why it is happen ? It is simple the food intake by them not suit for there body activities, some it stimulates more white bloods, correct level of WBC protect human body , if it excess kills the Human body, that is applicable for things , anything which is excessive gives problems for human health. 

Importantly a Good Environment also a Big role in the Brain Activities. see many peoples are commenting other people with out any reason, some of them teasing, some of them Fighting , some of them live a life in illegal way, all including all things are exposure of Brains Purely, Still many of the human brains activites are not found, when they found which is responsible for all speaking , writing and running, they will give solution for many neuro problems.

Some of the list of brain disorders

Acoustic Neuroma
Acquired Brain Injury
Agenesis Corpus Callosum
Alzheimer's Disease
Amyotrophic Lateral Diseases
Aneurysm
Aphasia
Arteriovenous Malformation

Batten Disease
Behcet's Disease
Blepharospasm
Brain Tumour and Brain Cancer

Cerebral Lupus
Cerebral Palsy
Cervical Dystonia
Charcot-Marie-Tooth Disorder
Chiari Malformation
Chronic Inflammatory Demyelinated Polyneuropathy
Coma
Concussion
Creutzfedlt-Jakob Disease

Dementia (non-Alzheimer type)
Down Syndrome
Dysautonomia
Dyslexia
Dyspraxia
Dystonia

Encephalitis
Epilepsy
Essential Tremor

Friedreich's Ataxia

Gaucher Disease
Guillain-Barre Sydrome

Huntington's Disease
Hydrocephalus
Intracranial Hypertension
Leukodystrophy
Locked-in Syndrome (LiS)

Meniere's Disease
Meningitis
Meningococcal Disease
Migraine
Minimally Conscious State
Motor Neurone Disease
Multiple Sclerosis
Multiple System Atrophy
Muscular Dystrophy
Myasthenia Gravis

Narcolepsy

Parkinson's Disease
Peripheral Neuropathy
Prader-Willi Sydnrome
Progressive Supranuclear Palsy

Restless Legs Syndrome
Rett Syndrome

Shy Drager Syndrome
Sleep Disorders
Spasmodic Dysphonia
Stroke
Subarachnoid Haemorrhage
Sydenham's Chorea

Tay-Sachs Disease
Tourette Syndrome
Transient Ischaemic Attack
Transverse Myelitis
Traumatic Brain Injury (TBI)
Trigeminal Neuroalgia
Tuberous Sclerosis

Von-Hippel-Lindau Syndrome
Vegetative State

Functions of Brain:
The Nervous system is your body's decision and communication center, the central nervous system is made of the brain , spinal cord and peripheral nervous system , Together they control the every part of the daily life.


Nervous reach from brain to the Face, ears, nose, and spinal cord , through spinal cord flows to the rest of the body.

Sensory nervous gather information from the environment , send that info to the spinal cord, which then speed the message to the brain.  then brain make sense of that message and trigger the response for that message.

Motor neuron deliver the instruction from the brain to the rest of the body.The brain is made of three main parts : the forebrain consists of Cerebrum, thalamus and hypothalamus. mid brain consists of tectum and tegmentum . the hindbrain is madeod cerebellum , pons and medulla.


The Cerebrum or Cortex is the largest part of the brain, cortex is divided in to four lobes.
Frontal Lobe,Pariental Lobe, occipital Lobe, Temporal Lobe

What do each of theses lobes do ?

  1. Front Lobe : Reasoning, Planning , parts of speech, movement, emotions and problem solving
  2. Pariental Lobe: Movement, orientation, recognition
  3. Occipital Lobe: Visaul Processing
  4. Temporal Lobe: Perception and Recognition of auditory, memory and speech


The Cerebellum is a little brain has two hemispheres , this is associated with  the regulation and coordination of movement posture and balance

To Live a Long Life protect the Brain by Live the life in healthy way, make core part in safe way, it makes you to protect from disease.

Wednesday, 30 July 2014

Creating a Star Control as element Tag or Attribute in HTML using Angular Js

In this article we are going to see how to create a Star Rating control in the HTML as Element or as Attribute using the Angular js. To do this we are going to take create the Directive in Angular js, First Let we see what kind of element or Attribute we are going to create and what kind of output it will give ?

Below Code Snippet is we trying to do



Output:




From the Code we can render a Star Control, using the some of the properties it will have some  behavior change.

custom-rating is the act as element or attribute for render a star control, it have few options
readonly : set true for this attribute if you want the star control as readonly
max : set the number of star you want to render
star-size : size of the star control
rating-value : specify the rating value of a control
on event is there to trigger for the change in the star value when user clicked, then use the 
on-rating-changed with a function passing parameter in the name of rating , which consists the value, now you can trigger the value to the server.

Now we start to build the directive.

Add the following jquery in the HTML.


    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>

    <script type="text/javascript" src="js/angular.min.js"></script>

Then start writing coding in Angular.

Create a Module and controller

First step is create a module in separate js file and include in the HTML.

        var myApp = angular.module('myApp', []);

        myApp.controller('BlogController', function ($scope, $window) {
            $scope.sample = 'Blog Testing';

            $scope.rating = 5;
            $scope.rating2 = 1;

            $scope.saveRating = function (rating) {
                console.log('Rating selected ' + rating);
            };

            $scope.Sample = function (rating) {
                console.log('sample ' + rating);
            };

        });


Create a Directive

        myApp.directive('customRating', function () {
            return {
                restrict: 'AE',
                template: '<ul class="rating">' +
                         '<li ng-repeat="star in stars"  ng-class="star" ng-                                                click="toggle($index)">\u2605</li>' +
                         '</ul>',
                scope:
                {
                    ratingValue: '=',
                    max: '=',
                    readonly: '@',
                    starSize: '=',
                    onRatingChanged: '&'
                },
                link: function (scope, element, attrs) {

                   
                    var updateStars = function () {
                        scope.stars = [];
                        for (var i = 0; i < scope.max; i++) {
                            scope.stars.push({ filled: i < scope.ratingValue });
                        }
                    };

                    element.css('font-size', scope.starSize);

                   
                    scope.toggle = function (index) {
                        if (scope.readonly && scope.readonly === 'true') {
                            return;
                        }
                        scope.ratingValue = index + 1;

                        scope.onRatingChanged({ rating: index + 1 });
                    };

                   
                    scope.$watch('ratingValue', function (oldval, newval) {
                        if (newval) {
                            updateStars();
                        }
                    })

                }

            }
        });



So now when include the custom js in the Html, we can able to render the Star control .Now when ever user change the value in one star it affects others because of binding, at the same time we are trigger the changes to the server.

From this article you can learn how to render a star control tag in Html using Angular Js.