การเล่นวิดีโอ Youtube ใน android โดยใช้ YouTubePlayerFragment

การเล่นวิดีโอ Youtube ใน android โดยใช้ YouTubePlayerFragment

ในการเขียนโปรแกรม android นั้นบ้างครั้งเราก็ต้องการเล่นวิด๊โอคลิปจาก youtube จะเขียนโดยใช้ Web intent มาเล่นมันก็ไม่ใช่ทาง google เลยมีการพัฒนา youtube api สำหรับ android ขึ้นมาแต่ปัญหาคือมันมีข้อจำกัดบ้างประการอยู่ คือในเครื่องที่รัน application ต้องมี youtube app อยู่แล้วและก็ต้องรันบน api target 11 โดยประมาณก็ 3.0 ขึ้นไป และข้อจำกัดอีกอย่างคือเวลา test ก็ต้องลองใน android device จริงไม่สามารถ test ใน emulator ได้ เพราะฉะนั้นจะบอกว่าไม่มี มือถือ android แล้ว develop app ไม่ได้แล้วนะครับ

เอาละเรามาเริ่มกันเลย ขั้นแรกสร้างโปรแกรม android ขึ้นมาก่อนเลย

เขียน android

โดยผมตั้งชื่อโปรเจ็คว่า YoutubePlayer รันตั้งแต่ Froyo ถึง Jelly Bean ครับเมื่อทำการสร้างโปรเจ็คเสร็จแล้วก็ให้ทำการ download youtube api จากลิงค์นี้ครับ

youtube api

เมื่อโหลดเสร็จแล้วให้ทำการแตกไฟล์ จะได้ folder ดังรูปให้เข้าไปที่ folder lib

เขียน android

แล้วทำการ copy file YoutubeAndroidPlayerApi.jar เอาไปไว้ที่ folder lib ในโปรเจ็ค android ที่เราสร้างขึ้น

เขียน android

เขียน android

เมื่อทำการ copy file api เสร็จแล้วเราก็เริ่มกันที่ layout โดย ไปที่ไฟล์ activity_main.xml แล้วแก้โค้ดดังนี้

[sourcecode language=”xml”]

[/sourcecode]

จากไฟล์จะเห็นว่ามีการใช้ fragment ซึ่งเป็นตัว component ใน youtube api ที่ชื่อว่า YoutubePlayerFragment หลังจากนั้นเราก็ต้องสร้าง class ที่เกี่ยวข้องกับการทำงานของ youtube api ซึ่ง class แรกที่จะสร้างคือ DeveloperKey ซึ่งมันทำหน้าที่ในการเก็บค่า api key การที่สร้างเป็น class ก็เพื่อให้ class อื่นๆๆง่ายต่อการใช้งานและอ้างถึงนั้นเอง โดยมีโค้ดดังนี้

[sourcecode language=”java”]

package com.thaicoding.youtubeplayer;

public class DeveloperKey {

/**
* Please replace this with a valid API key which is enabled for the
* YouTube Data API v3 service. Go to the
* Google APIs Console to
* register a new developer key.
*/
public static final String DEVELOPER_KEY = “AIzaSyCDDWkEPE9aHGRH6-b_FnFZrJPyPhSETOI”;

}
[/sourcecode]

สังเกตว่าจะไม่มีอะไรเลยในคลาสนี้ ต่อมาจะเป็น abstract class ที่มีชื่อว่า YouTubeFailureRecoveryActivity ซึ่งมันจะสือทอดมาจาก YouTubeBaseActivity ใน api โดยที่ใน abstract class นี้เราสามารถกำหนดข้อบังคับ เพื่อให้ application ของเราทำงานตามแบบที่เรากำหนดไว้ครับโดยมีโค้ดดังนี้

[sourcecode language=”java”]

package com.thaicoding.youtubeplayer;

import android.content.Intent;
import android.widget.Toast;

import com.google.android.youtube.player.YouTubeBaseActivity;
import com.google.android.youtube.player.YouTubeInitializationResult;
import com.google.android.youtube.player.YouTubePlayer;

public abstract class YouTubeFailureRecoveryActivity extends
YouTubeBaseActivity implements YouTubePlayer.OnInitializedListener {

private static final int RECOVERY_DIALOG_REQUEST = 1;

@Override
public void onInitializationFailure(YouTubePlayer.Provider provider,
YouTubeInitializationResult errorReason) {
if (errorReason.isUserRecoverableError()) {
errorReason.getErrorDialog(this, RECOVERY_DIALOG_REQUEST).show();
} else {
String errorMessage = String.format(“Player Error”,
errorReason.toString());
Toast.makeText(this, errorMessage, Toast.LENGTH_LONG).show();
}
}

@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
if (requestCode == RECOVERY_DIALOG_REQUEST) {
// Retry initialization if user performed a recovery action
getYouTubePlayerProvider().initialize(DeveloperKey.DEVELOPER_KEY,
this);
}
}

protected abstract YouTubePlayer.Provider getYouTubePlayerProvider();

}
[/sourcecode]

โค้ดในส่วนนี้สังเกต method onInitializationFailure จะมีการจัดการในกรณีที่ไม่สามารถเล่นคลิปวิดีโอจาก youtube ได้ แล้วในส่วน method onActivityResult นั้นจะเป็นการกำหนดค่าในกรณีที่คลิปสามารถเล่นได้สำเร็จ

ส่วน Developer Key หรือ Api Key ไปสมัครกันได้ที่นี้ครับ https://code.google.com/apis/console แต่ในตัวอย่างนี้ใช้ simple api ครับหากใครอยากลองลูกเล่นอื่นๆเพิ่มก็เข้าไปสมัครและลองใช้งานกันดูได้ครับ

ไฟล์สุดท้ายจะเป็นไฟล์ MainActivity ครับมีโค้ดดังนี้

[sourcecode language=”java”]

package com.thaicoding.youtubeplayer;

import com.google.android.youtube.player.YouTubePlayer;
import com.google.android.youtube.player.YouTubePlayer.Provider;
import com.google.android.youtube.player.YouTubePlayerFragment;

import android.os.Bundle;
import android.annotation.TargetApi;

@TargetApi(11)
public class MainActivity extends YouTubeFailureRecoveryActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

YouTubePlayerFragment youTubePlayerFragement = (YouTubePlayerFragment) getFragmentManager().findFragmentById(R.id.youtube_fragment);
youTubePlayerFragement.initialize(DeveloperKey.DEVELOPER_KEY, this);
}

@Override
public void onInitializationSuccess(Provider provider, YouTubePlayer player,
boolean wasRestored) {
if(!wasRestored){
player.cueVideo(“t3pApPaeokE”);
}

}

@Override
protected Provider getYouTubePlayerProvider() {
// TODO Auto-generated method stub
return (YouTubePlayerFragment)getFragmentManager().findFragmentById(R.id.youtube_fragment);
}

}
[/sourcecode]

จากโค้ดของ MainActivity ใน method onCreate ซึ่งเป็น method เริ่มแรกในการทำงานนั้นจะมีการสร้าง YouTubePlayerFragment และกำหนดค่า developer key เข้าไปแค่นั้นเอง แต่จะเริ่มแสดงคลิปวิดีโอเมื่อทำการ initital เสร็จแล้วมันจะไปทำงานที่ onInitializationSuccess ซึ่งจะมีการกำหนด v id ของ youtube ซึ่งดูได้จาก url ของ youtube ครับ

youtube

จากรูปจะได้ v id เป็น t3pApPaeokE นั้นเองครับ เมื่อเขียนโค้ดเสร็จแล้วเราก็มา add permission เพื่อให้ application ของเราสามารถใช้ internet ได้ครับ

ไปที่ไฟล์ AndroidManifest.xml แล้วก็เพิ่ม

<uses-permission android:name=”android.permission.INTERNET”/>

เข้าไปครับก็เป็นอันเสร็จแล้วที่นี้เรามาลองรันใน emulator ดูครับ

android emulator

จะเห็นว่าเมื่อ test ใน emulator จะไม่สามารถรันได้เพราะไม่มี youtube app และมันก็ไม่สามารถลงเพิ่มได้ด้วยซิทางออกที่ง่ายสุดคือให้ไปตั้งค่า Run as ซะเพื่อที่จะเลือกรันทดสอบบนอุปกรณ์นั้นเองซึ่งในตัวอุปกรณ์นั้นน่าจะมีการลง youtube app อยู่ครับ

run as

เมื่อลองรันดูในมือถือของผมผลที่ได้จะเป็นดังรูปครับ

result

ซึ่งมันก็สามารถเล่นได้ครับ จะเห็นว่า api ชุดนี้ทำให้ application ของเราเล่น video จาก youtube ได้ดีและง่ายขึ้นแต่ก็มีข้อจำกัดเรื่อง version ต้อง 11 ขึ้นไปและทดสอบบน emulator ยากครับ ลืมบอกไปในไฟล์ MainActivity ต้องใส่คำสั่ง @TargetApi(11) ไว้บนชื่อ class สังเกตจากไฟล์ตัวอย่างได้ครับไม่นั้นมันจะขึ้นแจก error เพราะ application เราลองรับตั้ง 2.2 ขึ่นไปแต่ api ชุดนี้จะลองรับประมาณเวอร์ชั่น 4 ครับ

 Download SourceCode

Leave a Reply

Your email address will not be published. Required fields are marked *