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.








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.