Sunday, March 23, 2014

gwt youtube player

Created GWT wrapper over YouTube Iframe player api refer

Usage

Inherit GWT module <inherits name="open.pandurang.gwt.youtube.YouTube" />
Before you start using YouTube iframe library one need to load them first, so as to load the library first you need make call to YouTubePlayer.loadYouTubeIframeApi();. This will ensure library is loaded, you can register to recieve event when library is loaded completely by using ApiReadyEventHandler for more details on the same refer YouTube documentation's geting started section. This ApiReadyEvent is equivalent to onYouTubeIframeAPIReady javascript callback.

// 3. This function creates an <iframe> (and YouTube player)
//    after the API code downloads.
   var player;
   function onYouTubeIframeAPIReady(){}


      YouTubePlayer.addApiReadyHandler(new ApiReadyEventHandler() {

            public void onApiReady(ApiReadyEvent event) {
              // Action you want take after api is loaded.
            }
      }

Note: Please make sure you load iframe library well in advance before using YouTube Player.
    public void onModuleLoad() {
        YouTubePlayer.loadYouTubeIframeApi();
        YouTubePlayer.addApiReadyHandler(new ApiReadyEventHandler() {

            public void onApiReady(ApiReadyEvent event) {
                PlayerConfiguration config = (PlayerConfiguration) PlayerConfiguration.createObject();
                config.setVideoId("M7lc1UVf-VE");
                config.setHeight("562.5");
                config.setWidth("1000");
                final YouTubePlayer player = new YouTubePlayer(config);
                player.addPlayerReadyHandler(new PlayerReadyEventHandler() {

                    public void onPlayerReady(PlayerReadyEvent event) {
                        GWT.log("First player is ready.");
                        GWT.log("First player state -> " + player.getPlayer().getPlayerState());
                    }
                });
                player.addStateChangedHandler(new StateChangeEventHandler() {

                    public void onStateChange(StateChangeEvent event) {
                        GWT.log("First player state changed => " + event.getPlayerEvent().getData());
                    }
                });
                RootPanel.get().add(player);
                Button btn = new Button("Stop");
                btn.addClickHandler(new ClickHandler() {

                    public void onClick(ClickEvent event) {
                        player.getPlayer().stopVideo();
                        GWT.log("First player state -> " + player.getPlayer().getPlayerState());
                    }
                });
                RootPanel.get().add(btn);
                config = (PlayerConfiguration) PlayerConfiguration.createObject();
                config.setVideoId("4biVZcgCn9A");
                PlayerVariables playerVars = (PlayerVariables) PlayerVariables.createObject();

                playerVars.setControls(0);
                playerVars.setRel(0);
                playerVars.setShowInfo(0);
                playerVars.setShowInfo(0);
                config.setPlayerVars(playerVars);
                final YouTubePlayer player1 = new YouTubePlayer(config);
                RootPanel.get().add(player1);

                Button btnCue = new Button("Cue");
                btnCue.addClickHandler(new ClickHandler() {

                    public void onClick(ClickEvent event) {
                        JsArrayString list = (JsArrayString) JsArrayString.createArray();
                        list.push("tQIBhsDlTxU");
                        list.push("4jGFreAGRI4");
                        player1.getPlayer().cuePlaylist(list);
                    }
                });
                RootPanel.get().add(btnCue);

            }
        });
    }

Fore more details refer test sample project

Maven Dependency
        <dependency>
            <groupId>open.pandurang.gwt</groupId>
            <artifactId>gwt-youtube-player</artifactId>
            <version>0.1</version>
            <scope>provided</scope>
        </dependency>

Maven Repository
   <repositories>
      <repository>
         <id>Pandurang repo</id>
         <url>https://github.com/pandurangpatil/pandurang-mvn-repo/raw/master/releases</url>
      </repository>
   </repositories>






3 comments:

  1. Giving this a shot, your post sells this as being quick and easy to get up and running. Any particular reason why you created this library vs using existing options like https://code.google.com/p/gwt-youtube-api/ ? Wondering if you tried any other solutions before creating your own lib.

    Personally the many jar dependencies listed for gwt-youtube-api link above scared me away (bloated software?) and likewise there's a bst player referenced here http://stackoverflow.com/questions/7185038/embedding-youtube-player-in-gwt-bst-player-api but checking out there site it looks to do more than I need (e.g. embedding divx players etc), by the way found your lib via your post on the stack overflow thread :)

    ReplyDelete
    Replies
    1. Yea I did tried using different libraries. But I fail to make them work. It didn't work as per their documentation. May be you need to do something more. I had a requirement to use multiple players on a page along with intercepting different events. I really didn't had time to debug what is wrong with those libraries. Instead I felt I can write my own more faster. Another problem I was facing is when I look at Google JavaScript document and corresponding api document one has to really think and correlate the purpose. If you look at this implementation I tried to keep the interface as possibly same as that of JavaScript Wrapper. Probably only event handling different than that of underlaying JavaScript library.

      Delete