Monday, February 28, 2011

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.

6 comments:

  1. Thanks for the tip about how to get the controls out using parameter! :D cheers!

    ReplyDelete
  2. Hi Basheer,
    we are working in a device which will integrate a YouTube client ,thinks for you ariticl, i have a question:
    1. How can i pass my videoId to the onYouTubePlayerAPIReady function.
    2. How can get the parameter videoId ?
    thanks

    ReplyDelete
    Replies
    1. Declare a global variable, just like how myPlayer used in onYouTubePlayerAPIReady function

      Delete
  3. Excellent day Riyas, what happens next friend!

    I have developed a project in which I pretend streamming with youtube api in javascript using swfobject and pulls excellent but with this the desire to be in mobile ipad and failed by swfoject obviously, could help to replace swfobject by html5, I'll let the league http://www.turicuntv.com so you know what I mean.

    ReplyDelete
  4. Good work Riyas !
    What about the view count ? Does it work with this API ?

    ReplyDelete
  5. Hi friends, This is Victoria from Chennai. I am a technology freak. I have read your blog. It was really a wonderful article and I was really impressed by reading this blog. Thanks for sharing this informative blog. I did HTML Training in Chennai at FITA academy, Its really useful for me to make a bright future.

    ReplyDelete