GWT‎ > ‎

GWT Youtube API

公式: http://code.google.com/p/gwt-youtube-api/


GWT Youtube APIを使うと、GWTアプリにYoutubeプレイヤーや、Youtubeの検索結果を埋め込むことができます。
また、Youtubeプレイヤーを、再生・停止・移動したりできます。

GWT Youtube APIを導入

私が試した段階では、1.0.2が最新版でした。ソースコード的にはもう少し進んでいるようです

このページを参考に
リストされているjarをすべてインストールします。

あとは、gwt.xmlに以下を追加すれば使えます。
<inherits name="com.google.gdata.YouTubeAPI"/>

気がついたこと

プレイヤー触るなら以下必須
youTubeEmbeddedPlayer.setEnableJSAPI(true);


シークできる時間がとても曖昧です。1秒単位でシーク(再生位置を移動)は不可能
せいぜい、最短で3秒ぐらいじゃないですかね。

Youtube 動画を開く場合のURLは、http://www.youtube.com/v/"+videoId
getPlayer().loadMedia(url);
http://www.youtube.com/watch?のURLを使う場合は、以下コードでやってるよう変換処理が必要、将来のバージョンで改善されるみたいですが

プレイヤーのaddStateChangedHandlerの動かし方がよくわからなかった。

ユーザー少なそう。他の閉鎖されたプロジェクト見る限り、そのうちAPI、クローズされても不思議じゃない気がした。

使用例

Chrome Web AppのループVideoプレイヤーですと以下のようになります。

YoutubeTest.java

/*
 * Copyright (C) 2011 aki@akjava.com
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

package com.akjava.gwt.youtube.client;

import com.akjava.gwt.html5.client.HTML5InputRange;
import com.akjava.gwt.html5.client.HTML5InputRange.HTML5InputRangeListener;
import com.akjava.gwt.html5.client.extra.HTML5Builder;
import com.akjava.gwt.lib.client.LogUtils;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.Timer;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.google.youtube.client.YouTubeEmbeddedPlayer;
import com.google.youtube.client.event.YouTubeStateChangedEvent;
import com.google.youtube.client.event.handler.YouTubeStateChangedHandler;

/**
 * Entry point classes define <code>onModuleLoad()</code>.
 */
public class YoutubeTest implements EntryPoint {

private int loopDuration=5;
private int playIndex;
private boolean paused=true;
private YouTubeEmbeddedPlayer youTubeEmbeddedPlayer;
private Label loopLabel;
private Timer loopTimer;
//int time;
@Override
public void onModuleLoad() {
VerticalPanel panel=new VerticalPanel();
RootPanel.get("main").add(panel);
HorizontalPanel loader=new HorizontalPanel();
panel.add(loader);
final TextBox url=new TextBox();
url.setWidth("400px");
loader.add(url);
Button loadBt=new Button("Load");
loader.add(loadBt);
loadBt.addClickHandler(new ClickHandler() {
@Override
public void onClick(ClickEvent event) {
doLoad(url.getText());
}
});
url.setText("http://www.youtube.com/watch?v=pLFkxTI9fVs");
youTubeEmbeddedPlayer = new YouTubeEmbeddedPlayer("pLFkxTI9fVs");
youTubeEmbeddedPlayer.setWidth("640px");
youTubeEmbeddedPlayer.setHeight("384px");
youTubeEmbeddedPlayer.setLoop(true);//avoid stop

youTubeEmbeddedPlayer.setEnableJSAPI(true);
youTubeEmbeddedPlayer.setPlayerAPIId("myplayer");
panel.add(youTubeEmbeddedPlayer);
HorizontalPanel hpanel=new HorizontalPanel();
hpanel.setVerticalAlignment(HorizontalPanel.ALIGN_MIDDLE);
panel.add(hpanel);
/*
* cant back
*/
Button prev=new Button("Prev");
hpanel.add(prev);
prev.addClickHandler(new ClickHandler() {
@Override
public void onClick(ClickEvent event) {
playIndex--;
if(playIndex<0){
playIndex=0;
}
int time=playIndex*loopDuration;
int d=youTubeEmbeddedPlayer.getPlayer().getMediaDuration();
LogUtils.log("time:"+time);
LogUtils.log("duration:"+d);
if(time>d){//too over
int mv=d/loopDuration;
playIndex=mv-1;
time=playIndex*loopDuration;
}
youTubeEmbeddedPlayer.getPlayer().setPlayPosition(playIndex*loopDuration);
youTubeEmbeddedPlayer.getPlayer().pauseMedia();
updateLoopLabel();
}
});
Button next=new Button("Next");
hpanel.add(next);
next.addClickHandler(new ClickHandler() {
@Override
public void onClick(ClickEvent event) {
playIndex++;
int time=playIndex*loopDuration;
int d=youTubeEmbeddedPlayer.getPlayer().getMediaDuration();
if(time>d){
playIndex--;
time=playIndex*loopDuration;
 
if(time>d){//too over
int mv=d/loopDuration;
playIndex=mv-1;
time=playIndex*loopDuration;
}
}
youTubeEmbeddedPlayer.getPlayer().setPlayPosition(time);
youTubeEmbeddedPlayer.getPlayer().pauseMedia();
updateLoopLabel();
}
});
Button playButton=new Button("Loop Play");
hpanel.add(playButton);
playButton.addClickHandler(new ClickHandler() {
@Override
public void onClick(ClickEvent event) {
startLoop();
}
});
Button pauseButton=new Button("Pause");
hpanel.add(pauseButton);
pauseButton.addClickHandler(new ClickHandler() {
@Override
public void onClick(ClickEvent event) {
pauseLoop();
}
});
Timer timer=new Timer(){
public void run(){//catching time is fine
int position=youTubeEmbeddedPlayer.getPlayer().getPlayPosition();
LogUtils.log("current:"+position);
}
};
loopLabel = new Label("00:00-"+secToTime(loopDuration));
loopLabel.setWidth("100px");
hpanel.add(loopLabel);

HTML5InputRange range=new HTML5InputRange(1,120,5);
hpanel.add(HTML5Builder.createRangeLabel("Loop:", range));
hpanel.add(range);
range.addListener(new HTML5InputRangeListener() {
@Override
public void changed(int newValue) {
loopDuration=newValue;
updateLoopLabel();
}
});
}
protected void doLoad(String text) {
if(text.isEmpty()){
return;
}
String url=null;
if(text.startsWith("http://www.youtube.com/v/")){
url=text;//dont check parameter
}else if(text.startsWith("http://www.youtube.com/watch?")){
String videoId=null;
String p=text.substring("http://www.youtube.com/watch?".length());
String[] params=p.split("&");
for(int i=0;i<params.length;i++){
String key_value[]=params[i].split("=");
if(key_value.length==2){
if(key_value[0].equals("v")){
videoId=key_value[1];
break;
}
}
}
if(videoId!=null){
url="http://www.youtube.com/v/"+videoId;
}
}
if(url!=null){
youTubeEmbeddedPlayer.getPlayer().loadMedia(url);
}else{
Window.alert("URL must be start with http://www.youtube.com/watch?v=");
}
}
private void updateLoopLabel(){
loopLabel.setText(secToTime(playIndex*loopDuration)+"-"+secToTime((playIndex+1)*loopDuration));
}
private String secToTime(int second){
int m=second/60;
int s=second%60;
String mv=""+m;
if(mv.length()<2){
mv="0"+mv;
}
String sv=""+s;
if(sv.length()<2){
sv="0"+sv;
}
return mv+":"+sv;
}
public void pauseLoop(){
paused=true;
if(loopTimer!=null){
loopTimer.cancel();
}
final int time=playIndex*loopDuration;
youTubeEmbeddedPlayer.getPlayer().setPlayPosition(time);
youTubeEmbeddedPlayer.getPlayer().pauseMedia();
}
public void startLoop(){
paused=false;
final int time=playIndex*loopDuration;
LogUtils.log("start:"+time);
youTubeEmbeddedPlayer.getPlayer().setPlayPosition(time);
youTubeEmbeddedPlayer.getPlayer().playMedia();
if(loopTimer!=null){
loopTimer.cancel();
}
loopTimer = new Timer(){
public void run(){
if(!paused){

youTubeEmbeddedPlayer.getPlayer().setPlayPosition(time);
youTubeEmbeddedPlayer.getPlayer().playMedia();
startLoop();
}
}
};
loopTimer.schedule(loopDuration*1000);
}
}




ċ
YoutubeTest.java
(7k)
aki akj,
2012/01/24 6:37
v.1
Comments