Monday, February 28, 2011

HTML5, Live streaming & Media server

             HTML5 come with media tags( <video> , <audio>)  for adding videos and audios in web pages. Using these tags, it is easy to render videos/audios without the help of a flash embeded player. Most of the modern browsers are now supporting HTML5. The HTML5 tags are fully depends on the browser, so the format of videos and audios are depends on the browser codecs (Refer Browser support). Since there is no standardization of the codecs(formats), multiple format of same video must me used for different browsers.

             Another fact around the HTML5 player is the live streaming. The live streaming must be supported by browser, not the HTML5 player. Most of the browsers now supports only progressive download. But only the Safari in Mac OS supports live streaming in RTSP protocol. According to other browsers team, they are in progress with this. Many flash palyers are available for media streaming based on RTMP protocol. Apple implemented a HTTP based media streming, "HTTP Live Streaming" for their IOS devices (iPhone, iPad and iPod) for HTML5 player. 

          If we need to develop a web application with media streaming, we have to use flash streaming player for normal browsers and HTML5 player for IOS devices. But both of the players supports different protocols. Hence we have to find a media server that handles both the protocols. The  Wowza media server (paid) is the best option for such an application. A testing vertion of Wowza media available, which serves only 10 concurrent requests at a time. Wowza supports only FLV (Flash Video), MP4 (QuickTime container - .mp4, .f4v, .mov, .m4v, .mp4a, .3gp, and .3g2) and MP3 (.mp3) formats, for other media format we have to convert or hint  the media to supported formats.There is no automatic trans-coding in Wowza server. We have to encode the media by using FFMPEG or VLC.

Note: This post is for my reference, donate me by clicking the adds.

Youtube API: HTML5 Chromeless Player (Using iframe API)

Now we can customize the appearance of html5 YouTube player as per our design. Like the AS3 flash player we can also create chromeless player for HTML5 in YouTube API. To embed the YouTube video uses the following script.

        <script>
              var myPlayer;
              function onYouTubePlayerAPIReady() {
                      myPlayer = new YT.Player('myVideo', {
                         height: '390',
                         width: '640',
                         videoId: 'u1zgFlCw8Aw',
                         playerVars: {
                             'start': 10
                        },
                        events: {
                             'onReady': callBack1,
                             'onStateChange':  callBack2
                        }
                   });
            }
        </script>

( The method of integratting the new iframe API or embeding HTML5 YouTube player is discussed in the session 'New YouTube API for both flash and HTML5'.) 

The above script will create a YouTube player with its-own controls. We can simply get a chromeless player adding " controls: '0' " in the player vars. ie,

<script>
              var myPlayer;
              function onYouTubePlayerAPIReady() {
                      myPlayer = new YT.Player('myVideo', {
                         height: '390',
                         width: '640',
                         videoId: 'u1zgFlCw8Aw',
                         playerVars: {
                             'start': 10,
                              controls: '0'
                        },
                        events: {
                             'onReady': callBack1,
                             'onStateChange':  callBack2
                        }
                   });
            }
        </script>

This script will add a chromeless player in the web pages.

we can also use the iframe tag method by adding a query string controls=0 in the src attribute ie,

 <iframe frameborder="0" title="YouTube video player" type="text/html" height="390" width="640" src="http://www.youtube.com/embed/JW5meKfy3fY?controls=0&enablejsapi=1&origin=http://mysite.com"></iframe>


Note: This post is for my reference, donate me by clicking the adds.

Friday, February 18, 2011

New YouTube API for both flash and HTML5

             On January last week YouTube introduce a new API for embedding videos on web pages.  To embed a video, use an iframe with YouTube video URL as its src attribute.  The URL form   http://www.youtube.com/embed/VIDEO_ID is used in iframe to load the video.  For more details and examples refer 'A New Way To Embed YouTube Videos' posted on JULY 22, 2010.

             Now a YouTube video can be embed in web pages without the support of flash, since it uses the HTML5 also. Now most of the browsers support HTML5. This API is compactable for IOS devices (iPhone, iPad) also.  The YouTube uses HTML5 player rather than flash for mobile devices.

How to integrate the the new iframe API.

  1) Include the javascript library 'IFrame Player API code'.

 <script>
      var tag = document.createElement('script');
      tag.src = "http://www.youtube.com/player_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
</script>

      This script will append the the API library to the head tag of the web page.

2) Add a container element to the web page, the iframe is is added to this      container element.

<div id=”myVideo” ></div>

3) Use the API script to create the iframe in the container element.

<script>
      var myPlayer;
      function onYouTubePlayerAPIReady() {
              myPlayer = new YT.Player('myVideo', {
                 height: '390',
                 width: '640',
                 videoId: 'u1zgFlCw8Aw',
                 playerVars: {
                     'start': 10
                },
                events: {
                     'onReady': callBack1,
                     'onStateChange':  callBack2
                }
           });
    }
</script>

The function onYouTubePlayerAPIReady is called by API while it is ready.  YT.Player  creates a javascript player object myPlayer and create an iframe inside the container element of specified id myVideo. It provides the options for customising iframe arrtibutes, player parameters   and  callback for Events from the player. we can use the js object myPlayer control the embed video throughout the js.
We can also embed video without a container element, include the iframe itself inthe webpage and use the API scrips. The element id is specified to the iframe.

<iframe id="myVideo" type="text/html" width="640" height="390"
  src="http://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1&origin=example.com"
  frameborder="0"></iframe>

                      Here we have to enable the API by specifing in the video url
 http://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1 &origin=example.com.

Here it solves the problems such as 'How to embed a YouTube video for iPad/iPhone ?' , 'YouTube API for iPad/iPhone', 'YouTube API for HTML5 player', YouTube API for mobile devices.  etc...



Reference

1.http://apiblog.youtube.com/2010/07/new-way-to-embed-youtube-videos.html
2.http://apiblog.youtube.com/2011/01/introducing-javascript-player-api-for.html
3.http://code.google.com/apis/youtube/iframe_api_reference.html
4.http://code.google.com/apis/youtube/js_api_reference.html
5.http://code.google.com/apis/youtube/player_parameters.html?playerVersion=AS3

Note: This post is for my reference, donate me by clicking the adds.