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

  1. Buat project baru dengan nama VideoYoutube
  2. Pilih API
  3. Pilih Empty Activity
  4. Finish

 

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:

  1. Buka salah satu video youtube. Lalu klik SHARE.
  2. Pada bagian share a link, klik embed.
  3. Copy kode embed yang muncul.
  4. 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>
  5. Buat method bernama muatVideo dengan parameter kode_youtube:String
    private void muatVideo(String kode_youtube) {
    
    }
  6. 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>";
        }
  7. 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>";
        }
  8. 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);
        }
  9. 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:

 

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.

Mungkin Anda juga menyukai

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *