Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. ActionScript
Code

Membangun Pemutar YouTube ActionScript anda sendiri

by
Difficulty:BeginnerLength:ShortLanguages:

Indonesian (Bahasa Indonesia) translation by Randi Mumtaz (you can also view the original English article)

Selama tutorial kami akan  menggunakan YouTube API untuk membangun kustom pemutar YouTube dengan ActionScript 3.0.


Tinjauan Hasil akhir

Mari kita lihat pada hasil akhir yang kita akan kerjakan:


Langkah 1: Pengaturan File

Berikut adalah bagaimana ini akan bekerja:

  • Kami akan membuat pembungkus pemutar YouTube yang akan menerima video ID
  • Kita akan menciptakan sebuah dokumen kelas untuk instantiate pemutar dan menetapkan kontrol
  • Kami akan membangun pemain UI dengan alat desain di Flash IDE dan mereferensi mereka di kelas dokumen

Untuk ini, kita akan membutuhkan file-file berikut:


Langkah 2: Pengaturan Stage

Buka Main.fla dan mengedit stage menjadi 500 x 440 dengan 30 frame per detik. Atur kelas dokumen ke "Main."


Langkah 3: Pengaturan Layer

Kita hanya perlu dua layer untuk tutorial ini: pemegang pemutar, yang akan diisi oleh pemutar YouTube kami dan layer kontrol, yang akan memiliki semua tombol yang digunakan untuk mengontrol pemutar. Dalam hal ini kita akan memiliki "play/pause" "mute/unmute" sebuah progress bar (mewakili jumlah yang dimuat) dan bar kepenuhan (mewakili waktu playhead).

Saya telah menambahkan sekelompok frame lain hanya untuk tampilan grafis, Anda benar-benar tidak membutuhkan mereka.


Langkah 4: Kontrol

Ini adalah simbol-simbol sederhana movieklip dengan nama misalnya "play_mc" dan "mute_mc", "progress_mc" dan "fullness_mc."


Langkah 5: Pemegang Pemutar

Pemutar juga bentuk hitam yang sederhana menjadi sebuah movieklip dengan contoh nama "holder_mc."


Langkah 6: Kelas YoutubePlayer

Buka YoutubePlayer.as dan buatlah kelas kerangka dasar yang meluas kelas MovieClip


Langkah 7: Impor YoutubePlayer.as

Kita perlu mengimpor kelas berikut:


Langkah 8: Variabel YoutubePlayer.as

.. dan kemudian atur variabel berikut (semua kode dalam langkah-langkah akan datang berkomentar):


Langkah 9: YoutubePlayer.as YoutubePlayer()

Ketika diinisialisasi kita membutuhkan id video yang dikirimkan ke fungsi YoutubePlayer():


Langkah 10: YoutubePlayer.as onLoaderInit()

Berikut adalah fungsi onLoaderInit(), dipanggil setelah loader diinisialisasi (Lihat blok kode sebelumnya).


Langkah 11: YoutubePlayer.as onPlayerReady()

Jika semua sudah OK sejauh ini, the onPlayerReady() fungsi akan dipanggil:


Langkah 12: YoutubePlayer.as Events() berguna lainnya

Jejak ini akan berguna untuk debugging:


Langkah 13: Pembungkus YoutubePlayer.as

Ini adalah pembungkus untuk mengendalikan eksternal:


Langkah 14: YoutubePlayer.as updatePlayer()

Hanya satu fungsi terakhir dan kelas selesai:


Langkah 15: Impor Main.as

Mudah-mudahan Anda sudah tahu bagaimana membangun kelas dasar dokumen (meskipun jika tidak, periksa pengenalan cepat ini). Di dalam, impor kelas-kelas ini:


Langkah 17: Main.as Main()

Berikut adalah fungsi Main() kami.


Langkah 16: Main.as init()

Satu pertanyaan yang mungkin anda tanyakan adalah, "Bagaimana saya tahu video id?"

Hal ini sangat sederhana: ambil url dari film Anda setelah "http://www.youtube.com/watch?v=fJGLAo_7F_I", misalnya; nomor video ini 11 digit nomor yang dibawa oleh var v - dalam kasus ini "fJGLAo_7F_I".


Langkah 17: Main.as playPausePlayer()

Berikut adalah fungsi untuk tombol kami yang sederhana yang menggunakan "playerStatus" untuk beralih antara bermain dan berhenti:


Langkah 18: Main.as muteUnmutePlayer()

Demikian pula, di sini adalah fungsi untuk tombol kami yang menggunakan "ismuted" untuk beralih antara bisu dan bersuara:


Langkah 19: Main.as loop()

Mari kita mengetahui bagaimana progress film dilakukan...


Kesimpulan

Seperti yang Anda lihat, hal ini cukup sederhana untuk membuat pemutar youtube dasar dalam AS3, pastikan untuk memeriksa referensi Pemutar API untuk daftar fungsi dan parameter yang dapat Anda gunakan untuk memperpanjang satu ini.

Saya harap Anda menyukai tutorial ini, terima kasih telah membaca!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.