Tutorial Muat Video Youtube ke Aplikasi Android! (Android Studio)
Apakah anda memiliki video di youtube namun belum tahu cara memasukkan video tersebut? Atau anda ingin memasukkan video namun ukuran video terlalu bersar?
Cara Kerja
Pada dasarnya, cara yang akan kita gunakan adalah menyisipkan script dari video youtube ke file html. File HTML ini nantinya akan dimuat di aplikasi menggunakan WebView. Nah, akhirnya video kita akan muncul selayaknya embed video di halaman web.
Pada tutorial ini, kita juga akan membuat method yang reuseable (dapat digunakan kembali) pada kode program. Maanfaat dari tutorial ini, anda bisa menyimpan video berukuran besar di youtube, kemudian membuka video tersebut di aplikasi. Sehingga, ukuran aplikasi akan tetap kecil karena video diakses secara online.
Berikut video aplikasi yang akan kita buat:
Sebelum anda mengikuti tutorial ini, saya sarankan anda membaca tutorial berikut: Tutorial Android WebView (Load HTML internal, URL eksternal, dan tanpa layout) di Android Studio
Langkah-langkah (apabila gambar kurang jelas, klik untuk memperbesar):
Persiapan
Membuat Layout
Buat layout dengan isi WebView dan 3 buah button seperti berikut:
Hasil Kode XML:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".MainActivity"> <WebView android:id="@+id/webViewSaya" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="1" /> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="1" android:gravity="center_vertical" android:orientation="horizontal"> <Button android:id="@+id/btnVideo1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="Video 1" /> <Button android:id="@+id/btnVideo2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="Video 2" /> <Button android:id="@+id/btnVideo3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="Video 3" /> </LinearLayout> </LinearLayout>
Membuat Kode
WebView
Aplikasi yang kita buat menggunakan webView sebagai media untuk menampilkan video youtube. Pada layout XML, WebView kita panggil di MainActivity. Mulanya kita inisialisasi dahulu agar WebView bisa diakses oleh kelas.
WebView webViewSaya;
Lalu pada onCreate (setelah setContentView) tuliskan:
webViewSaya = (WebView) findViewById(R.id.webViewSaya);
Agar Video Youtube dapat berjalan dengan lancar, maka kita perlu setting WebView agar bisa menjalaskan javascript dan sebagainya. Tambahkan kode dibawahnya:
// setting webViewSaya.setWebViewClient(new WebViewClient()); webViewSaya.setWebChromeClient(new WebChromeClient()); webViewSaya.getSettings().setJavaScriptCanOpenWindowsAutomatically(true); webViewSaya.getSettings().setJavaScriptEnabled(true); webViewSaya.getSettings().setPluginState(WebSettings.PluginState.ON); webViewSaya.getSettings().setDefaultFontSize(18);
Fungsi memuat video youtube dengan input kode
Pada tahap ini, kita akan membuat kode html sederhana yang berisi kode embed video. Untuk itu kita perlu kode embed dari youtube. Cara mendapatkan kode embed di youtube adalah sebagai berikut:
- Buka salah satu video youtube. Lalu klik SHARE.
- Pada bagian share a link, klik embed.
- Copy kode embed yang muncul.
- Kita mendapatkan kode berikut:
<iframe width=”560” height=”315” src=”https://www.youtube.com/embed/cKv6x7HrLgo” frameborder=”0″ allow=”autoplay; encrypted-media” allowfullscreen></iframe>
Teks berwarna merah adalah ukuran video dalam pixels. Rasio video tersebut adalah 1.7, namun saya merasa ukuran video tersebut agak kebesaran. Semula 560 x 315 saya ubah menjadi 464 x 261. (Rasio 16:9 dan 1.7 lain dapat dilihat melalui Skala 1.77.)<iframe width="464" height="261" src="https://www.youtube.com/embed/cKv6x7HrLgo" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
- Buat method bernama muatVideo dengan parameter kode_youtube:String
private void muatVideo(String kode_youtube) { }
- Buat string berisi kode html sederhana
private void muatVideo(String kode_youtube) { String kodeHTML = "<head></head><body>" + "<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/" + "cKv6x7HrLgo" + "\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" allowfullscreen></iframe>" + "</body>"; }
- Modifikasi kode agar dapat mengikuti nilai input method
private void muatVideo(String kode_youtube) { String kodeHTML = "<head></head><body>" + "<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/" + kode_youtube + "\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" allowfullscreen></iframe>" + "</body>"; }
- Load String kita di WebView
private void muatVideo(String kode_youtube) { String kodeHTML = "<head></head><body>" + "<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/" + kode_youtube + "\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" allowfullscreen></iframe>" + "</body>"; webViewSaya.loadData(kodeHTML,"text/html; charset=utf-8",null); }
- Selesai
Panggil method muatVideo
Sekarang kita akan membuat fungsi onClick yang akan berjalan ketika tombol diklik. Format panggil method muatVideo seperti ini:
muatKode("KODE_VIDEO_YOUTUBE");
KODE_VIDEO_YOUTUBE adalah kode yang kita dapat di url video. Sebagai contoh kita punya url https://www.youtube.com/watch?v=cKv6x7HrLgo. Maka kita akan menggunakan cKv6x7HrLgo saja.
Buat 3 method baru untuk tiap video:
public void Video1(View view) { muatVideo("cKv6x7HrLgo"); } public void Video2(View view) { muatVideo("Rc2dG7uMlhA"); } public void Video3(View view) { muatVideo("QH2-TGUlwu4"); }
Pada layout, panggil method tadi sesuai tombol yang sudah dibuat. Klik tombol, lalu pada onClick (kotak merah) pilih nama method sesuai tombol. Apabila tidak ada onClick. Klik kotak kuning seperti dibawah:
Catatan
Selain pakai muatVideo di xml, alternatifnya Anda juga bisa menggunakan metode .setOnClickListener{…} pada MainActivity
contoh: btnVideo1.setOnClickListener {
… // boilerplate
muatVideo(“QH2-TGUlwu4”)
…
}
Hasil lengkap MainActivity:
package com.muhaaz.videoyoutube; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.webkit.WebChromeClient; import android.webkit.WebSettings; import android.webkit.WebView; import android.webkit.WebViewClient; public class MainActivity extends AppCompatActivity { WebView webViewSaya; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // cari id di layout webViewSaya = (WebView) findViewById(R.id.webViewSaya); // setting webViewSaya.setWebViewClient(new WebViewClient()); webViewSaya.setWebChromeClient(new WebChromeClient()); webViewSaya.getSettings().setJavaScriptCanOpenWindowsAutomatically(true); webViewSaya.getSettings().setJavaScriptEnabled(true); webViewSaya.getSettings().setPluginState(WebSettings.PluginState.ON); webViewSaya.getSettings().setDefaultFontSize(18); } private void muatVideo(String kode_youtube) { String kodeHTML = "<head></head><body>" + "<iframe width=\"464\" height=\"261\" src=\"https://www.youtube.com/embed/" + kode_youtube + "\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" allowfullscreen></iframe>" + "</body>"; webViewSaya.loadData(kodeHTML,"text/html; charset=utf-8",null); } public void Video1(View view) { muatVideo("cKv6x7HrLgo"); } public void Video2(View view) { muatVideo("Rc2dG7uMlhA"); } public void Video3(View view) { muatVideo("QH2-TGUlwu4"); } }
Ubah Manifest
Buka AndroidManifest.xml melalui panel sebelah kiri.
Dikarenakan aplikasi kita akan memuat video youtube, jadi pastinya perlu akses internet. Tambahkan kode permission internet di atas <application
<uses-permission android:name="android.permission.INTERNET" />
Jika disatukan maka akan menjadi seperti di bawah:
<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.muhaaz.videoyoutube"> <uses-permission android:name="android.permission.INTERNET" /> <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:roundIcon="@mipmap/ic_launcher_round" android:supportsRtl="true" android:theme="@style/AppTheme"> <activity android:name=".MainActivity"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> </manifest>
Jalankan Aplikasi
Jalankan (Run) aplikasi kita. Apabila anda belum tahu cara menjalankan aplikasi, ikuti tutorial berikut:
- Tutorial Membuat Emulator Android Virtual Device (AVD) di Android Studio
- Tutorial Menjalankan Aplikasi ke HP Android di Android Studio (USB Debungging)
Selesai. Anda bisa mengembangkan sendiri program anda berdasarkan langkah-langkah tersebut.
Sekian untuk tutorial memasukkan video youtube ke aplikasi android. Apabila anda memiliki kritik, saran, atau pertanyaan anda dapat meninggalkan pesan melalui komentar di bawah.
Terima kasih.