Tuesday 5 March 2013

Video Player(mp4,webm,ogg/ogv) using GWT in HTML5 Supported firefox Browser


Video Player(mp4,webm,ogg/ogv) using GWT in  HTML5 Supported firefox Browser

1. Add dependency and repository in your pom.xml if it is maven project

<dependency>
    <groupId>com.bramosystems.oss.player</groupId>
    <artifactId>bst-player-api</artifactId>
    <version>${appropriate-version}</version>
    <scope>provided</scope>
</dependency>
 
<dependency>
 <groupId>fr.hd3d.html5.video</groupId>
 <artifactId>video</artifactId>
 <version>1.0</version>
</dependency> 
 
 <repository>
        <id>bramosystems-releases</id>
        <name>Bramosystems Release Repository</name>
        <url>http://downloads.bramosystems.com/maven2/releases</url>
 </repository> 

2. Update your gwt.xml file to inherit

<inherits name='com.bramosystems.oss.player.core.Core'/>
 
<inherits name='fr.hd3d.html5.video.HTML5Video'/> 
 
3. Firefox does not support playing MP4 using HTML5, 
   So we have to play MP4 using Flash Player and webm 
    and ogg/ogv file using HTML5 Video Player
 
code snippets
 
 HorizontalPanel videoPanel=new HorizontalPanel();

 @Override 
 public void setVideoMediaContent(String description) {
  //spec display video
  if(description == null || description.equals(""))
   return;
  
  //get extension , If it is MP4 than play via flash player 
  //else play via HTML5 Player,will work for firefox
  
  String temp[]=description.split("/");
  
  String temp1[]=temp[temp.length-1].split("\\.");
 

                //check extension of video file
  if(temp1[1].equalsIgnoreCase("mp4"))
  {
   playViaFlashPlayer(description);
  }
  else
  {
   playViaHTML5Player(description);
  }
  
  
  //spec display video
  
 }
 
 public void playViaHTML5Player(String url)
 {
  videoPanel.clear();
   VideoWidget  videoPlayer = new VideoWidget(true, true, "");
    
    url=url + "?date=" + new Date().getTime();
    videoPlayer.addStyleName("videoBorder");
          List<VideoSource> sources = new ArrayList<VideoSource>();
        
          Log.info("setVideoMediaContent Video Source path" +url);
          
        
          sources.add(new VideoSource(url));
          videoPlayer.setSources(sources);
          videoPlayer.setPixelSize(110, 100);
         
          videoPanel.add(videoPlayer);
 }
 
 public void playViaFlashPlayer(String url)
 {
  videoPanel.clear();
   url=url + "?date=" + new Date().getTime();
  
       Log.info("Base URL :"+  GWT.getHostPageBaseURL());
         SimplePanel panel = new SimplePanel(); 
       // create panel to hold the player
                AbstractMediaPlayer player = null;
         try {
              // create the player, specifing URL of media
   player = new FlashMediaPlayer(GWT.getHostPageBaseURL()+url,true,"110px","200px");
            
              panel.setWidget(player); 
                  
              
             // add player to panel.
         } catch(LoadException e) {
              // catch loading exception and alert user
              Window.alert("An error occured while loading");
         } catch(PluginVersionException e) {
              // required plugin version is not available, alert user
              // possibly providing a link to the plugin download page.
      panel.setWidget(new HTML(".. some nice message telling the user to download plugin first .."));
         } catch(PluginNotFoundException e) {
              // catch PluginNotFoundException and display a friendly notice.
      panel.setWidget(PlayerUtil.getMissingPluginNotice(Plugin.FlashPlayer));
         }
         
         videoPanel.add(panel);
 } 

Author
Milan D Ashara

No comments:

Post a Comment