Isi

• Cara menyematkan video YouTube di aplikasi Android Anda
• Mengambil ID video YouTube
• Dapatkan sidik jari SHA-1 proyek Anda
• Daftar dengan Google API Console
• Unduh YouTube Android Player API
• Perbarui Manifestasi Anda
• Membangun tata letak YouTube Player
• Menerapkan Pemutar YouTube
• 1. Perpanjang YouTubeBaseActivity
• 2. Inisialisasi Pemutar YouTube
• 3. Terapkan onInitializationSuccess dan onInisialisasi Kegagalan
• Memutar video YouTube: Kode lengkap
• Menguji YouTube Android Player API
• Tampilkan konten Dailymotion di WebView
• Dapatkan ID video Dailymotion
• Menambahkan SDK Dailymotion
• Meminta akses Internet
• Menambahkan widget PlayerWebView Dailymotion
• Mengonfigurasi PlayerWebView Dailymotion kami
• Menyematkan video Vimeo
• Memperbarui Manifes
• Menambahkan WebView ke UI kami
• Pilih video Anda
• Menampilkan halaman web di aplikasi Android Anda
• Menguji aplikasi Vimeo Anda
• Membungkus

Setelah MediaController terlihat di layar, Anda dapat memutar, menjeda, memundurkan dan memajukan video, dan melompat ke titik mana pun dalam klip dengan menyeret bilah kemajuan MediaController.

Cara menyematkan video YouTube di aplikasi Android Anda

Menyematkan file video ke dalam aplikasi Anda adalah cara yang bagus untuk memastikan bahwa video selalu tersedia, terlepas dari koneksi Internet perangkat. Namun, menyematkan banyak video beresolusi besar di aplikasi Anda juga merupakan cara yang bagus untuk meningkatkan ukuran APK Anda!

Jika Anda khawatir tentang ukuran APK, atau aplikasi Anda menyertakan video yang ditambahkan ekstra bagus, maka Anda mungkin ingin mempublikasikan video-video itu ke platform online dan kemudian streaming melalui aplikasi Anda saat runtime.

Ketika datang untuk mempublikasikan video secara online, ada satu situs web yang langsung muncul dalam pikiran, jadi di bagian ini saya akan menunjukkan kepada Anda cara menanamkan apa saja Video YouTube di aplikasi Anda, menggunakan perpustakaan klien YouTube Android Player API.

Mengambil ID video YouTube

Untuk memulai, Anda harus memutuskan video YouTube mana yang ingin Anda tampilkan, dan kemudian mengambil ID video uniknya.

Anda dapat menggunakan video YouTube apa pun tetapi saya memilih untuk "Teknologi Favorit 2018." Muat video yang Anda pilih dan lihat URL-nya di bilah alamat browser Anda, misalnya URL untuk video tersebut adalah:

youtube.com/watch?v=hJLBcViaX8Q

ID adalah bagian dari URL yang secara unik mengidentifikasi video ini, yang merupakan rangkaian karakter di akhir URL (pada dasarnya, semuanya setelah simbol “=”). ID video untuk video tersebut adalah:

hJLBcViaX8Q

Catat ID video Anda, karena kami akan menggunakannya nanti.

Dapatkan sidik jari SHA-1 proyek Anda

Untuk mengakses YouTube Android Player API, Anda harus membuat kunci API dengan batasan Android. Ini melibatkan menautkan kunci API ke nama paket unik Anda dan sidik jari sertifikat (SHA-1).

Anda dapat mengambil sidik jari SHA-1 proyek Anda, melalui Gradle Console:

• Pilih tab Gradle di sepanjang sisi kanan jendela Android Studio.
• Pilih modul "aplikasi", diikuti oleh "Tugas> Android> signReport."

• Buka tab Gradle Console yang muncul di kanan bawah layar.
• Konsol Gradle akan terbuka secara otomatis. Temukan nilai SHA-1 di jendela ini, dan catat.

Kami menggunakan sidik jari sertifikat debug, yang hanya cocok untuk menguji aplikasi. Sebelum menerbitkan aplikasi, Anda harus selalu membuat kunci API baru berdasarkan sertifikat rilis aplikasi itu.

Daftar dengan Google API Console

Sebelum Anda dapat menggunakan YouTube Android Player API, Anda harus mendaftarkan aplikasi Anda di Google API Console:

• Pergilah ke Konsol API.
  Di header, pilih nama proyek Anda saat ini (di mana kursor diposisikan di tangkapan layar berikut).

• Di jendela berikutnya, pilih "Proyek baru."
• Beri nama proyek Anda, lalu klik "Buat."
• Di menu sebelah kiri, pilih "Kredensial."
• Beri tombol biru "Buat kredensial" klik, lalu pilih "Kunci API."
• Kunci API Anda sekarang akan muncul dalam sembulan, yang mencakup permintaan untuk membatasi kunci API ini. Kunci yang dibatasi lebih aman, jadi kecuali Anda secara spesifik memerlukan kunci API yang tidak dibatasi, pilih "Kunci terbatas".
• Di layar berikutnya, beri kunci API Anda nama yang khas.
• Pilih tombol radio "Aplikasi Android".
• Klik "Tambahkan nama paket dan sidik jari."
• Salin / rekatkan sidik jari SHA-1 proyek Anda ke bagian berikutnya, dan kemudian masukkan nama paket proyek Anda (yang muncul di bagian atas setiap file kelas Java dan dalam Manifest proyek Anda).
• Saat Anda senang dengan informasi yang Anda masukkan, klik "Simpan."

Unduh YouTube Android Player API

Selanjutnya, Anda harus mengunduh pustaka klien YouTube Android Player API. Saat menggunakan perpustakaan ini, Anda disarankan untuk mengaktifkan ProGuard, untuk membantu menjaga APK agar seringan mungkin.

Untuk menambahkan perpustakaan YouTube ke proyek Anda:

• Buka situs web YouTube Android Player, dan unduh versi terbaru.
• Buka zip file zip berikutnya.
• Buka folder yang baru dibuka ritsletingnya dan navigasikan ke subfolder "libs" - itu harus berisi file "YouTubeAndroidPlayerApi.jar".
• Di Android Studio, beralihlah ke tampilan "Project".
• Untuk memastikan perpustakaan YouTube disertakan dalam jalur pembangunan Anda, Anda harus mengimpor .jar ke dalam proyek Anda “direktori / libs ”. Buka folder "app / libs" proyek Anda, lalu seret dan jatuhkan .jar ke posisi.

• Buka file build.gradle Anda dan tambahkan perpustakaan YouTube sebagai ketergantungan proyek:

dependencies {implementasi fileTree (dir: libs, termasuk:) implementasi com.android.support:appcompat-v7:28.0.0 implementasi com.android.support:design:28.0.0 implementasi com.android.support.constraint: constraint-layout : 1.1.3 testImplementation junit: junit: 4.12 androidTestImplementation com.android.support.test: runner: 1.0.2 // Tambahkan file implementasi // berikut (libs / YouTubeAndroidPlayerApi.jar)}

• Saat diminta, sinkronkan file Gradle Anda.

Perbarui Manifestasi Anda

Jika aplikasi Anda akan ditampilkan apa saja konten video online, maka itu akan memerlukan akses ke Internet.

Buka Manifest proyek Anda dan tambahkan izin Internet:

Untuk memberi pengguna pengalaman sinematik, layar lebar, saya juga menetapkan MainActivity untuk diluncurkan dalam mode lansekap:

Membangun tata letak YouTube Player

Anda dapat menampilkan video YouTube, menggunakan:

• YouTubePlayerView. Jika Anda ingin menggunakan YouTubePlayerView di tata letak Anda, maka Anda perlu memperluas YouTubeBaseActivity di kelas Aktivitas terkait tata letak itu.
• YouTubePlayerFragment. Ini adalah fragmen yang berisi YouTubePlayerView. Jika Anda memilih untuk menerapkan YouTubePlayerFragment, maka Anda biasa harus diperluas dari YouTubeBaseActivity.

Saya akan menggunakan YouTubePlayerView, jadi buka file "activity_main.xml" proyek Anda, dan tambahkan widget YouTubePlayerView:

Menerapkan Pemutar YouTube

Selanjutnya, buka MainActivity Anda dan selesaikan tugas-tugas berikut:

1. Perpanjang YouTubeBaseActivity

Karena kami menggunakan YouTubePlayerView dalam tata letak kami, kami perlu memperluas YouTubeBaseActivity:

MainActivity kelas publik memperluas YouTubeBaseActivity {

2. Inisialisasi Pemutar YouTube

Kami menginisialisasi Pemutar YouTube dengan memanggil inisialisasi () dan meneruskan kunci API yang kami buat sebelumnya:

YouTubePlayerView youTubePlayerView = (YouTubePlayerView) findViewById (R.id.YouTubePlayer); youTubePlayerView.initialize (YOUR_API_KEY, YouTubePlayer.OnInitializedListener () baru {) {

3. Terapkan onInitializationSuccess dan onInisialisasi Kegagalan

Akhirnya, kita perlu menentukan bagaimana aplikasi kita harus bereaksi, tergantung pada apakah inisialisasi sukses atau gagal. Jika YouTube Player berhasil diinisialisasi, maka kami dapat memuat video kami, dengan mengirimkan ID video unik:

public void onInitializationSuccess (YouTubePlayer.Provider provider, YouTubePlayer youTubePlayer, boolean b) {// Tentukan ID video // youTubePlayer.loadVideo ("hJLBcViaX8Q");

Selanjutnya, kita perlu memberi tahu aplikasi kita bagaimana seharusnya menangani inisialisasi yang gagal. Saya akan menampilkan Toast:

public void onInitializationFailure (penyedia YouTubePlayer.Provider, YouTubeInitializationResult youTubeInitializationResult) {Toast.makeText (MainActivity.this, "Terjadi kesalahan", Toast.LENGTH_SHORT) .show (); }

Memutar video YouTube: Kode lengkap

Tambahkan semua hal di atas ke MainActivity Anda, dan Anda akan berakhir dengan sesuatu seperti ini:

impor android.os.Bundle; impor android.widget.Toast; import com.google.android.youtube.player.YouTubeBaseActivity; import com.google.android.youtube.player.YouTubeInitializationResult; import com.google.android.youtube.player.YouTubePlayer; import com.google.android.youtube.player.YouTubePlayerView; // Perpanjang YouTubeBaseActivity // MainActivity kelas publik memperluas YouTubeBaseActivity {// Jangan lupa untuk menggantinya dengan kunci API Anda sendiri yang unik // String public static final YOUR_API_KEY = "YOUR_API_KEY_HERE"; @Override void onCreate yang dilindungi (Bundle saverInstanceState) {super.onCreate (saverInstanceState); setContentView (R.layout.activity_main); YouTubePlayerView youTubePlayerView = (YouTubePlayerView) findViewById (R.id.YouTubePlayer); // Inisialisasi Pemutar YouTube // youTubePlayerView.initialize (YOUR_API_KEY, YouTubePlayer baru. PadaInitialitialListener () {@Override // Jika YouTube Player berhasil diinisialisasi ... // public void onInitializationSuccess (YouTubePlayer.Penyedia penyedia, YouTubePlayer, penyedia YouTube, Player YouTube, boolean b) {//..kemudian mulai memutar video berikut // youTubePlayer.loadVideo ("hJLBcViaX8Q");} @Override // Jika inisialisasi gagal ... // public void onInisialisasi Kegagalan (YouTubePlayer. Penyedia penyedia, YouTubeInitializationResult youTubeInitializationResult) {//...kemudian menampilkan roti panggang // Toast.makeText (MainActivity.this, "Terjadi kesalahan", Toast.LENGTH_SHORT) .show ();}}); }}

Menguji YouTube Android Player API

Anda dapat menguji aplikasi ini di smartphone atau tablet Android fisik, atau AVD. Jika Anda menggunakan AVD, maka pastikan Anda menggunakan gambar sistem yang menyertakan layanan Google Play. Aplikasi YouTube juga harus diinstal pada AVD atau perangkat Android fisik, karena API YouTube bergantung pada layanan yang didistribusikan sebagai bagian dari aplikasi YouTube untuk Android.

Instal proyek di perangkat Anda, dan video YouTube akan mulai diputar secara otomatis, segera setelah aplikasi dimuat. Jika Anda mengetuk video, maka Anda akan memiliki akses ke semua kontrol YouTube yang Anda kenal yang dapat Anda gunakan untuk menjeda, memutar, mempercepat, dan memundurkan video.

Tampilkan konten Dailymotion di WebView

Ketika menanamkan video di aplikasi Android Anda, ada berbagai platform berbagi video yang dapat Anda pilih, dan beberapa platform bahkan menghasilkan SDK yang didedikasikan untuk membantu Anda berinteraksi dengan konten mereka - termasuk Dailymotion.

The Dailymotion Player SDK untuk Android menyediakan pembungkus tipis di sekitar komponen WebView Android, yang membuatnya lebih mudah untuk menanamkan video Dailymotion di aplikasi Anda.

Di bagian ini, saya akan menunjukkan kepada Anda bagaimana melakukan streaming video dari situs web Dailymotion, menggunakan SDK Dailymotion Player pihak ketiga.

Dapatkan ID video Dailymotion

Pertama, pergilah ke Dailymotion, cari video yang ingin Anda tampilkan, dan kemudian ambil ID videonya.

Saya akan menggunakan video time lapse kabut ini, yang memiliki URL berikut:

www.dailymotion.com/video/x71jlg3

ID video adalah string karakter unik di akhir URL-nya, jadi ID video saya adalah: x71jlg3.

Menambahkan SDK Dailymotion

Karena kita menggunakan SDK Dailymotion, kita perlu mendeklarasikannya sebagai ketergantungan proyek. Buka file build.gradle proyek Anda, dan tambahkan berikut ini:

dependencies {implementasi fileTree (dir: libs, termasuk:) // Tambahkan berikut // implementasi com.dailymotion.dailymotion-sdk-android: sdk: 0,1 implementasi implementasi com.android.support:appcompat-v7:28.0.0 implementasi com.android.support:design:28.0.0 implementasi com.android.support.constraint: constraint-layout: 1.1.3 testImplementation junit: junit: 4.12 androidTestImplementation com.android.support.test: runner: 1.0.2}

Saat diminta, pilih "Sinkronkan Proyek dengan File Gradle."

Perhatikan bahwa secara default Dailymotion SDK hanya memberi Anda akses ke data publik Dailymotion, seperti judul dan deskripsi video.Anda dapat melakukan beberapa tugas tambahan dengan mendaftarkan aplikasi Anda dengan platform Dailymotion, tetapi karena kami hanya ingin menyematkan video, kami tidak perlu khawatir untuk mendaftarkan aplikasi kami.

Jika Anda tertarik untuk menambahkan lebih banyak fungsionalitas Dailymotion ke aplikasi Anda, maka Anda dapat mempelajari lebih lanjut tentang mendaftarkan aplikasi Anda dengan Dailymotion, di dokumen resmi.

Meminta akses Internet

Sekali lagi, kami mengalirkan konten dari World Wide Web, sehingga proyek kami memerlukan izin Internet:

Setiap Kegiatan yang menampilkan konten Dailymotion harus memiliki atribut "android: configChanges", jadi tambahkan yang berikut ini ke MainActivity Anda:

Menambahkan widget PlayerWebView Dailymotion

Komponen utama dari Dailymotion SDK adalah elemen UI PlayerWebView, yang menyediakan pembungkus tipis di sekitar komponen WebView Android.

Kami akan menjelajahi WebViews secara lebih rinci di bagian berikut, tetapi WebViews pada dasarnya memberi Anda cara untuk menyematkan laman web di aplikasi Anda. Jika kita tidak menggunakan PlayerWebView khusus SDK, maka kita mungkin menggunakan komponen WebView vanilla Android untuk menampilkan seluruh halaman web Dailymotion dalam aplikasi kita.

Sebaliknya, mari kita tambahkan PlayerWebView ke tata letak kami:

Mengonfigurasi PlayerWebView Dailymotion kami

Sekarang kami telah menerapkan widget PlayerWebView, kami perlu mengonfigurasi pemain di kelas Aktivitas kami yang sesuai.

Buka MainActivity Anda, dan mulailah dengan mendapatkan referensi ke PlayerWebView:

dailyMotionPlayer = (PlayerWebView) findViewById (R.id.dailymotionPlayer);

Lalu, panggil "dailyMotionPlayer.load" dan berikan ID video yang kami ambil sebelumnya:

dailyMotionPlayer.load ("x71jlg3");

Ini memberi kita yang berikut:

impor android.support.v7.app.AppCompatActivity; impor android.os.Bundle; impor com.dailymotion.android.player.sdk.PlayerWebView; import java.util.HashMap; import java.util.Map; MainActivity kelas publik memperluas AppCompatActivity {private PlayerWebView dailyMotionPlayer; @Override void onCreate yang dilindungi (Bundle saverInstanceState) {super.onCreate (saverInstanceState); setContentView (R.layout.activity_main); // Ambil PlayerWebView kami // dailyMotionPlayer = (PlayerWebView) findViewById (R.id.dailymotionPlayer); Peta playerParams = HashMap baru <> (); // Muat video dengan parameter kami // playerParams.put ("key", "value"); // Lulus ID video // dailyMotionPlayer.load ("x71jlg3"); }}

Instal proyek Anda pada perangkat Android fisik atau emulator, dan video Dailymotion Anda akan mulai diputar secara otomatis.

Menyematkan video Vimeo

Ketika menanamkan konten video, Anda biasanya ingin menggunakan API khusus platform atau SDK khusus platform sedapat mungkin. Tetapi, bagaimana jika tidak ada SDK atau API yang tersedia, untuk platform berbagi video yang ada dalam pikiran Anda?

Dalam skenario ini, Anda dapat menggunakan komponen WebView Android untuk menampilkan video sebagai halaman web yang tertanam di tata letak Aktivitas Anda. Di bagian akhir ini, saya akan menunjukkan kepada Anda cara menanamkan video dari platform Vimeo yang populer, menggunakan WebView.

Selain menampilkan konten video, WebViews dapat berguna dalam sejumlah skenario lainnya. Misalnya, bayangkan Anda memiliki beberapa konten yang perlu diperbarui secara berkala; hosting konten itu secara online dan kemudian menampilkannya di aplikasi Anda melalui WebView memberi Anda fleksibilitas untuk mengubah konten itu online kapan saja, tanpa harus menerbitkan versi baru aplikasi Anda. Namun, berhati-hatilah saat menggunakan WebViews karena mereka tidak mendukung banyak fitur yang biasanya Anda harapkan dari browser web yang berdiri sendiri. Secara khusus, WebViews tidak memiliki bilah alamat atau kontrol navigasi, yang dapat membuat konten mereka sulit untuk berinteraksi dengan pengguna.

Sebelum menggunakan WebView, Anda harus selalu mempertimbangkan apakah solusi alternatif mungkin lebih tepat, misalnya Anda dapat memuat konten ke browser web default perangkat, atau menerapkan Chrome Custom Tabs.

Memperbarui Manifes

Karena kami streaming video dari Internet, kami perlu menambahkan izin Internet untuk Manifest kami:

Saya juga akan meluncurkan MainActivity dalam mode lansekap:

Menambahkan WebView ke UI kami

Selanjutnya, mari tambahkan WebView ke aplikasi kami. Kami dapat menambahkan WebView ke tata letak Aktivitas kami, atau mengubah seluruh Aktivitas menjadi WebView, dengan menerapkannya dalam metode onCreate () aplikasi kami.

Saya akan menambahkan WebView ke tata letak aplikasi kami:

Pilih video Anda

Sekali lagi, kami membutuhkan video untuk ditampilkan, tetapi kali ini kami tidak menggunakan ID video:

• Buka Vimeo dan pilih video yang ingin Anda gunakan; Saya telah memilih untuk selang waktu musim dingin ini.
• Beri tombol "Bagikan" klik.
• Pilih ikon "Sematkan"; ini akan memberi Anda kode embed yang akan terlihat seperti ini:

Kode ini memberikan informasi berikut:

• iframe. Menentukan bahwa kami menyematkan laman HTML lain ke dalam konteks saat ini.
• src. Jalur video, jadi aplikasi Anda tahu di mana menemukan video ini.
• lebar tinggi. Dimensi video.
• batas bingkai. Apakah akan menampilkan perbatasan di sekitar bingkai video. Nilai yang mungkin adalah batas (1) dan tanpa batas (0).
• ijinlayar. Ini memungkinkan video ditampilkan dalam mode layar penuh.

Saya akan menambahkan kode sematan ini ke proyek saya sebagai string, jadi Anda perlu menyalin / menempelkan informasi ini ke templat berikut:

String vimeoVideo = "Tautan ANDA DI SINI';

Dengan frustrasi, kita perlu membuat beberapa perubahan sebelum kode embed kompatibel dengan aplikasi Android kita. Pertama, kita perlu menambahkan beberapa karakter "", sehingga Android Studio tidak mengeluh tentang pemformatan yang salah:

String vimeoVideo = "';

Terakhir, dimensi video default mungkin terlalu besar untuk beberapa layar ponsel cerdas Android.
Dalam produksi, Anda biasanya bereksperimen dengan berbagai dimensi untuk melihat apa yang memberikan hasil terbaik, melintasi sebanyak mungkin konfigurasi layar yang berbeda. Namun, untuk membantu menjaga agar artikel ini tidak lepas kendali, saya hanya akan menggunakan yang berikut, yang seharusnya memberikan hasil yang baik pada layar ponsel cerdas Android "khas" Anda:

String vimeoVideo = "';

Menampilkan halaman web di aplikasi Android Anda

Sekarang kita telah membuat tata letak kita dan siapkan HTML kita semua, buka MainActivity Anda dan mari kita terapkan WebView kita.

Mulai dengan menambahkan string HTML:

String vimeoVideo = "';

Selanjutnya, kita perlu memuat halaman web di atas di WebView kita, menggunakan metode loadUrl ():

webView.loadUrl (request.getUrl (). toString ());

JavaScript dinonaktifkan secara default, jadi kami harus mengaktifkannya di WebView kami.

Setiap kali Anda membuat WebView, secara otomatis ditetapkan satu set WebSettings default. Kami akan mengambil objek WebSettings ini, menggunakan metode getSettings (), dan kemudian mengaktifkan JavaScript, menggunakan setJavaScriptEnabled ().

WebSettings webSettings = webView.getSettings (); webSettings.setJavaScriptEnabled (true);

Setelah menambahkan semua ini ke MainActivity Anda, kode Anda akan terlihat seperti ini:

impor android.support.v7.app.AppCompatActivity; impor android.os.Bundle; import android.webkit.WebResourceRequest; impor android.webkit.WebSettings; impor android.webkit.WebView; impor android.webkit.WebViewClient; MainActivity kelas publik memperluas AppCompatActivity {@Override void onCreate yang dilindungi (Bundle SavedInstanceState) {super.onCreate (SavedInstanceState); setContentView (R.layout.activity_main); String vimeoVideo = ""; WebView webView = (WebView) findViewById (R.id.myWebView); webView.setWebViewClient (WebViewClient baru) (@Override public boolean shouldOverrideUrlLoading (WebView webView, WebResourceRequest request) {webView.loadUrl (request). ()); return true;}}); WebSettings webSettings = webView.getSettings (); webSettings.setJavaScriptEnabled (true); webView.loadData (vimeoVideo, "text / html", "utf-8");}}

Menguji aplikasi Vimeo Anda

Anda tahu latihan sekarang: instal proyek ini di perangkat Android fisik atau AVD. WebView tidak diatur untuk diputar secara otomatis, jadi Anda harus memberi video ketukan, untuk mengungkapkan kontrol media Vimeo. Anda kemudian dapat memutar, menjeda, memundurkan, dan mempercepat video, untuk memastikan video itu berfungsi dengan benar.

Membungkus

Dalam artikel ini, saya menunjukkan kepada Anda cara menambahkan video YouTube, Vimeo dan Dailymotion ke aplikasi Anda, menggunakan API dan SDK khusus platform, dan komponen WebView milik Android. Saya juga menunjukkan kepada Anda cara menggabungkan file video dengan aplikasi Anda, sehingga dapat disimpan dan diputar secara lokal.

Apa cara favorit Anda untuk menampilkan konten multimedia kepada pengguna Anda? Beri tahu kami di komentar di bawah!