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):
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>
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);
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:
<iframe width="464" height="261" src="https://www.youtube.com/embed/cKv6x7HrLgo" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
private void muatVideo(String kode_youtube) { }
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>"; }
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>"; }
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); }
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"); } }
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 (Run) aplikasi kita. Apabila anda belum tahu cara menjalankan aplikasi, ikuti tutorial berikut:
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.
Pengantar USB Debugging Tutorial berikut akan menjelaskan bagaimana cara menjalankan project yang kita buat di…
Produksi Minyak Sawit/CPO Indonesia Minyak sawit merupakan salah satu komoditi ekspor unggulan Indonesia, hal tersebut…
Alat/Mesin Pengayakan Pada Industri Kimia Screening atau proses pemisahan adalah proses melewatkan material umpan pada suatu…
Apa itu fuel cell? Semakin terbatasnya bahan bakar fosil dan meningkatnya tuntutan lingkungan menjadi lebih…
Pengantar Berdasarkan catatan CisSecurity, aktivitas malware terus meningkat hingga 61% pada tahun 2019. Artinya bahwa…
Latar Belakang Setiap desa memiliki potensi bebeda-beda. Desa Binoh memiliki produksi jagung melimpah, akan tetapi…