Halaman ini diterjemahkan oleh Cloud Translation API.

Wrapper ActionScript 3.0 untuk Pemutar Chromeless

Artikel ini ditulis dan dikirimkan oleh developer eksternal. Tim Alat dan API YouTube berterima kasih kepada Matthew Richmond atas waktu dan keahliannya.

Matthew Richmond, The Chopping Block, Inc.
Oktober 2008

Pengantar
Referensi Penting
Mempelajari Lebih Lanjut
Berinteraksi dengan Pemain
Operasi yang Tersedia
Catatan tentang Demo
Kesimpulan

Pengantar

Dalam artikel ini, saya akan menyajikan dan menjelaskan secara singkat Wrapper ActionScript 3.0 yang andal untuk Pemutar YouTube tanpa Chrome. Wrapper ini memanfaatkan class ExternalInterface ActionScript dan JavaScript API YouTube.

Alat Pemutar YouTube dan Pemutar Chromeless Google telah memungkinkan desainer/developer mengintegrasikan kecanggihan YouTube ke dalam project online mereka dengan cepat dan mudah. Pendekatan ini ideal untuk project kecil dengan anggaran tetap yang tidak memungkinkan hosting video, serta project skala besar untuk klien yang menginginkan pengalaman pengguna akhir kustom tanpa menjauh dari audiens YouTube mereka.

Gambar 1: Screenshot Wrapper ActionScript 3.0

YouTube Flash API dan pemutar tersemat telah ditulis, dan bekerja cukup baik dengan {8/} 2.0; jika proyek Anda adalah IAM 3.0, namun integrasi yang mulus menjadi sedikit lebih kompleks. Meskipun mudah untuk memuat pemain {8/} 2.0 ke swf {8/} 3.0, Anda tidak dapat langsung berkomunikasi atau menyampaikan panggilan fungsional apa pun ke pemutar yang dimuat. Masalah ini semakin rumit karena file swf yang berasal dari server YourTube sedang memuat video ke dalam video itu sendiri. Wrapper harus sepenuhnya mengetahui fakta tersebut dan bereaksi sebagaimana mestinya. Untungnya, bahasa DMARC berisi dua solusi yang masuk akal untuk menghubungkan kembali bagian yang bersarang tetapi terputus ini, yaitu kelas LocalConnection atau kelas ExternalInterface. Demo ini akan berfokus pada yang terakhir karena ExternalInterface berfungsi dengan lancar dengan JavaScript API yang didokumentasikan dengan baik sehingga dapat berfungsi dengan baik dengan hal lain dalam halaman XHTML.

Referensi Penting

Sebelum kita mulai, berikut adalah daftar referensi dan file terkait yang tersedia untuk Anda. Banyak topik yang dibahas dalam artikel ini dijelaskan lebih lanjut dalam link di bawah.

Mempelajari Lebih Lanjut

Ringkasan Demo Wrapper

Gambar 3: File JavaScript

Gambar 2: File Class ActionScript

Wrapper {8/}3.0 terdiri dari pada dasarnya dua bagian yang saling berhubungan, file class {8/}3.0 yang terletak di src/choppingblock/video/ (Gambar 2), dan 'youTubeLoader.js' File JavaScript yang terletak di deploy/_assets/js/ (Gambar 3). File sumber Flash/Flex Anda akan membuat instance class ActionScript YouTubeLoader; halaman XHTML Anda menyematkan file flash dan mendaftarkannya dengan fungsi dalam file JavaScript youTubeLoader. Penting untuk memahami bahwa dari sini, semua yang dilakukan YouTubeLoader dalam file flash dikontrol melalui fungsi JavaScript.

Karena semua fungsi dalam Flash dikendalikan melalui API JavaScript, Anda TIDAK dapat memuat konten YouTube apa pun dalam 'Film Uji Coba' Flash web. Kunci ini hanya akan berfungsi jika disematkan ke halaman Xcode dan terhubung dengan benar ke fungsi JavaScript youTubeLoader.

Catatan: Untuk menguji salah satu panggilan ini, Anda harus menjalankan file di server web atau memodifikasi Setelan Keamanan Flash Player, karena Flash player membatasi panggilan antara file lokal dan internet.

Membuat Objek YouTubeLoader

Sebelum dapat membuat instance Objek YouTubeLoader di project Flash/Flex, Anda harus memastikan terlebih dahulu bahwa paket (folder) file yang diperlukan berada di direktori yang sama dengan project Anda (lihat Gambar 2), atau ditentukan dengan Classpath project Anda. Kemudian Anda dapat mengimpor file paket:

import choppingblock.video.*;

Tindakan ini memungkinkan file ActionScript Anda mengakses class 'YouTubeLoader.as' dan 'YouTubeLoaderEvent.as'. Sekarang, Anda bisa mulai membuat instance class YouTubeLoader dan pemroses peristiwa yang diperlukan:

import choppingblock.video.*;

public class YouTubeDemo extends Sprite {

  private var _youTubeLoader:YouTubeLoader;	
  
  // ------------------------------------
  // CONSTRUCTOR
  // ------------------------------------
  
  public function YouTubeDemo () {
    
    // create YouTubeLoader object
    _youTubeLoader = new YouTubeLoader();
    
    // add event listener to call youTubePlayerLoadedHandler method on load
    _youTubeLoader.addEventListener(YouTubeLoaderEvent.LOADED, youTubePlayerLoadedHandler);
    
    // create the actual loader 
    _youTubeLoader.create();
    
    // add object to the display stack
    addChild(_youTubeLoader);
  };
  
  // ------------------------------------
  // EVENT METHODS
  // ------------------------------------
  
  /**
  Called via player loaded event, lets you know you are all clear to send player commands.
  */
  private function youTubePlayerLoadedHandler (event:YouTubeLoaderEvent):void{
    //trace("YouTubeDemo: youTubePlayerLoadedHandler");
    
    // you are now clear to start making calls to the YouTubeLoader object
  };
};

Sekarang, jika file JavaScript diterapkan dan terhubung dengan benar, youTubePlayerLoadedHandler akan berhasil dipanggil dan kita siap untuk mulai membuat permintaan.

Menyematkan swf dan Menghubungkan JavaScript youTubeLoader

Anda tidak akan berhasil memuat konten dari YouTube sebelum file swf Anda tertanam ke dalam file Xcode dan terhubung ke JavaScript youTubeLoader. Sebaiknya gunakan SWFObject untuk menyematkan pemutar yang akan diakses menggunakan JavaScript API. Tindakan ini akan memungkinkan Anda mendeteksi versi Flash Player pengguna akhir (JavaScript API memerlukan Flash Player 8 atau yang lebih baru), dan juga akan menghapus kotak 'Klik untuk mengaktifkan kontrol ini' saat menggunakan Internet Explorer untuk melihat pemutar.

Dalam bagian <head> file XHTML, Anda menghubungkan file swfobject dan youTubeLoader:

<script type="text/javascript" src="_assets/js/swfobject.js"></script>
<script type="text/javascript" src="_assets/js/youTubeLoader.js"></script>

Lihat di bawah untuk contoh penggunaan SWFObject untuk menyematkan Swf dengan JavaScript API yang diaktifkan, kemudian meneruskan referensi ke swf ke API JavaScript youTubeLoader.

<script type="text/javascript">

  var flashvars = {};
  var params = {
    menu: "false",
    allowScriptAccess: "always",
    scale: "noscale"
  };
  var attributes = {
    id: "youtubewrapper"
  };

  swfobject.embedSWF("YouTubeIntegrationDemo.swf", "flashcontent", "960", "500", "9.0.0", "_assets/swf/expressInstall.swf", flashvars, params, attributes);
  
  //init the youTubeLoader JavaScript methods
  SWFID = "youtubewrapper"
    
</script>

Parameter allowScriptAccess dalam kode diperlukan agar SWF pemutar dapat memanggil fungsi di halaman HTML yang berisi, karena Chromeless Player dihosting di domain yang berbeda dari halaman XHTML.

Satu-satunya atribut yang kita teruskan adalah ID objek penyematan — dalam hal ini, youtubewrapper. ID ini akan digunakan oleh file youTubeLoader.js untuk mendapatkan referensi ke pemutar menggunakan getElementById().

swfobject.embedSWF akan memuat pemutar dari YouTube dan menyematkannya ke halaman Anda.

swfobject.embedSWF(swfUrlStr, replaceElemIdStr, widthStr, heightStr, swfVersionStr, xiSwfUrlStr, flashvarsObj, parObj, attObj)

swfUrlStr - Ini adalah URL SWF. Perhatikan bahwa kami telah menambahkan parameter enablejsapi dan playerapiid ke URL SWF YouTube biasa untuk mengaktifkan panggilan JavaScript API.
replaceElemIdStr - Ini adalah ID DIV HTML yang akan diganti dengan konten sematan. Pada contoh di atas, atributnya adalah ytapiplayer.
widthStr - Lebar pemutar.
heightStr - Tinggi pemain.
swfVersionStr - Versi minimum yang diperlukan pengguna untuk melihat konten. Dalam hal ini, diperlukan versi 8 atau yang lebih baru. Jika tidak memiliki 8 atau lebih tinggi, pengguna akan melihat baris teks default di HTML DIV.
xiSwfUrlStr - (Opsional) Menentukan URL SWF penginstalan ekspres Anda. Tidak digunakan dalam contoh ini.
flashVarsObj - (Opsional) Menentukan FlashVar dalam pasangan name:value. Tidak digunakan dalam contoh ini.
parObj - (Opsional) Parameter untuk objek penyematan. Dalam hal ini, kita telah menetapkan allowScriptAccess.
AttObj - (Opsional) Atribut untuk objek sematan. Dalam hal ini, kita telah menetapkan ID ke myytplayer.

Lihat dokumentasi SWFObject untuk penjelasan lebih lanjut.

SWFID ≡ akan menyimpan referensi ke ID objek penyematan yang akan digunakan JavaScript API. Anda harus menggunakan ID objek penyematan yang sama dengan yang Anda berikan ke swf.

SWFID ≡ "youtubewrapper"

Pada tahap ini, Anda seharusnya dapat berhasil menguji project. Objek YouTubeLoader akan memuat Pemutar Tanpa Chrome dan pengendali peristiwa YouTubeLoaderEvent.LOADED akan berhasil dipanggil. Sekarang kita siap untuk membuat permintaan video dan berinteraksi dengan objek YouTubeLoader.

Berinteraksi dengan Pemain

Karena pendekatan ini untuk membuat Wrapper ActionScript 3.0 untuk Pemutar Tanpa Chrome memanfaatkan class ExternalInterface ActionScript, kini kita dapat menggunakan Operasi apa pun dalam YouTube JavaScript Player API untuk mengontrol pemutar yang dimuat. Jika Anda melihat dalam file JavaScript 'youTubeLoader.js' yang terletak di deploy/_assets/js/ (Gambar 3), Anda akan menemukan bahwa file tersebut berisi sebagian besar fungsi yang tersedia. Setiap fungsi operasi terlebih dahulu memeriksa fungsi checkObj untuk memverifikasi bahwa variabel SWFID telah ditetapkan dengan benar sebelum dijalankan.

//------------------------------------
// UTILITY METHODS
//------------------------------------

function checkObj () {
  // alert("youTubeLoader.js : checkObj");
  if (SWFID) {
    createObj();
    return true;
  } else{
    alert("YouTubeLoader: In order to call methods within a swf, you must first set the variable \"SWFID\"!");
    return false;
  };
}
  
//------------------------------------
// YOUTUBE METHODS
//------------------------------------

function loadVideoById(id, startSeconds) {
  // alert("youTubeLoader.js : loadVideoById");
  if (checkObj()) {
    obj.loadVideoById(id,startSeconds);
  };
};

function cueNewVideo(id, startSeconds) {
  // alert("youTubeLoader.js : loadVideoById");
  if (checkObj()) {
    obj.cueVideoById(id, startSeconds);
  }
}

function clearVideo() {
  // alert("youTubeLoader.js : clearVideo");
  if (checkObj()) {
    obj.clearVideo();
  }
}

// plus 17 more...

Mengingat bahwa tujuan akhir Wrapper ActionScript 3.0 untuk Pemutar Tanpa Chrome adalah menawarkan interaksi yang lancar dengan YouTube API dari dalam project Flash/Flex ActionScript 3.0, kami telah menambahkan metode publik yang sama persis ke file class 'YouTubeLoader.as' yang terletak di src/choppingblock/video/ (Gambar 2). Artinya, Anda dapat memanggil operasi yang sama persis langsung ke Objek YouTubeLoader dalam Flash/Flex. Jika melihat dalam file class, Anda akan menemukan:

// ------------------------------------
// YOUTUBE METHODS
// ------------------------------------

public function loadVideoById (id:String, startSeconds:Number = 0):void{
  //trace("YouTubeLoader: loadVideoById");
  ExternalInterface.call("loadVideoById", id, startSeconds);
};

public function cueNewVideo (id:String, startSeconds:Number = 0):void{
  //trace("YouTubeLoader: cueNewVideo");
  ExternalInterface.call("cueNewVideo", id, startSeconds);
};

public function clearVideo ():void{
  //trace("YouTubeLoader: clearVideo");
  ExternalInterface.call("clearVideo");
};

// plus 17 more...

Metode IAM menggunakan class ExternalInterface untuk sekadar memanggil fungsi yang sesuai dalam JavaScript API.

Meminta Video

Sekarang Anda dapat meminta video dari dalam file {8/} 3.0 dengan memanggil fungsi menggunakan referensi pemutar. Misalnya, jika ingin memutar video saat pengguna mengklik tombol, Anda harus menambahkan pemroses peristiwa MouseEvent.CLICK ke tombol. Seperti ini:

// assuming your button was called 'myButton'
myButton.addEventListener(MouseEvent.CLICK, youtubeLoadVideoHandler);

Dan buat metode pengendali peristiwa untuk menangani permintaan. Seperti ini:

private function youtubeLoadVideoHandler (event:MouseEvent):void{
  
  // assuming that '_youTubeLoader' is a reference to your YouTubeLoader object
  _youTubeLoader.loadVideoById( "u1zgFlCw8Aw" );
};

Di luar file Flash/Flex, Anda dapat meminta video secara opsional dengan memanggil langsung fungsi JavaScript yang sesuai. Seperti ini:

 <a href="javascript:loadVideoById('u1zgFlCw8Aw')">Play</a>

Memberikan Panggilan Tambahan

Panggilan tambahan berfungsi sama seperti Meminta Video; dari IAM 3 Anda dengan mudah dapat memanggil metode menggunakan referensi pemain. Daftar lengkap metode yang tersedia disediakan di bawah.

Berlangganan Acara

Berlangganan peristiwa dengan menambahkan pemroses peristiwa ke referensi pemutar. Misalnya, untuk mendapatkan notifikasi saat status pemutar berubah, tambahkan pemroses peristiwa untuk YouTubeLoaderEvent.STATE_CHANGE. Seperti ini:

// assuming that '_youTubeLoader' is a reference to your YouTubeLoader object
_youTubeLoader.addEventListener(YouTubeLoaderEvent.STATE_CHANGE, youTubePlayerStateChangeHandler);

Kemudian, buat metode pengendali peristiwa untuk menangani permintaan tersebut. Seperti ini:


private function youTubePlayerStateChangeHandler (event:YouTubeLoaderEvent):void{
  //trace("YouTubeIntegrationDemo: youTubePlayerStateChangeHandler");
  
  _stateField.text = event.state;
};

Operasi yang Tersedia

Untuk memanggil metode API YouTubePlayer, pertama-tama Anda harus membuat instance kelas YouTubePlayer dalam file IAM dan menyimpan referensi ke objek YouTubePlayer yang ingin Anda kontrol. Hal ini dapat dilakukan dengan memanggil:

var _youTubeLoader:YouTubeLoader;
_youTubeLoader = new YouTubeLoader();

Metode Publik

player.loadVideoById(id:String, startSeconds:Number = 0):void: Memuat dan memutar video berdasarkan ID yang ditentukan.
player.cueNewVideo(id:String, startSeconds:Number = 0):void: Dimuat, tetapi tidak otomatis memutar video berdasarkan ID yang ditentukan.
player.clearVideo():void: Menghapus video yang sedang diputar/dimuat.
player.setSize(w:Number, h:Number):void: Menetapkan ukuran instance YouTubePlayer.
player.play():void: Memutar video yang saat ini diputar/dimuat.
player.pause():void: Menjeda video yang sedang diputar/dimuat.
player.stop():void: Menghentikan video yang sedang diputar/dimuat.
player.seekTo(seconds:Number):void: Mencari ke waktu yang ditentukan dalam video yang sedang diputar/dimuat.
player.getPlayerState():String: Menampilkan status saat ini dari video yang sedang diputar/dimuat.
player.getBytesLoaded():Number: Menampilkan nilai byte saat ini yang dimuat dari video yang saat ini dipicu/dimuat.
player.getBytesTotal():Number: Menampilkan nilai total byte yang dimuat dari video yang saat ini dipicu/dimuat.
player.getCurrentTime():Number: Menampilkan posisi saat ini dalam waktu video yang sedang diputar/dimuat.
player.getDuration():Number: Menampilkan durasi saat ini dari video yang sedang diputar/dimuat.
player.getStartBytes():Number: Menampilkan byte awal video yang saat ini diberi sinyal/dimuat.
player.setVolume(newVolume:Number):void: Menetapkan volume video yang sedang diputar/dimuat.
player.getVolume():Number: Menampilkan volume saat ini dari video yang saat ini diputar/dimuat.
player.mute():void: Menyimpan volume saat ini dan mengubah volume video yang sedang diputar/dimuat menjadi 0.
player.unmute():void: Menampilkan volume video yang saat ini direkam/dimuat ke nilai yang terakhir disimpan saat dibisukan.
player.getEmbedCode():String: Menampilkan kode sematan YouTube saat ini dari video yang saat ini direkam/dimuat.
player.getVideoUrl():String: Menampilkan URL video YouTube saat ini dari video yang sedang diputar/dimuat.

Acara

YouTubeLoaderEvent.LOADED: Diaktifkan setelah Pemutar Chromeless berhasil menyelesaikan pemuatan dan siap menerima panggilan operasi.
YouTubeLoaderEvent.STATE_CHANGE: Diaktifkan setiap kali status pemain berubah. Class YouTubeLoader menerjemahkan nomor JavaScript API ke nilai string terkait, sedangkan class YouTubeLoaderEvent menyimpan peristiwa saat ini dalam variabel yang disebut state. Nilai yang mungkin adalah tidak dimulai, berakhir, diputar, dijeda, buffering, petunjuk video. Saat pertama kali dimuat, SWF akan menyiarkan peristiwa yang belum dimulai. Ketika video siap diputar, video akan menyiarkan peristiwa dengan isyarat video.
YouTubeLoaderEvent.IO_ERROR: Diaktifkan saat terjadi error di pemutar. Ada dua kemungkinan kode error: 100 disiarkan ketika video yang diminta tidak ditemukan. Hal ini terjadi saat video telah dihapus (karena alasan apa pun), atau telah ditandai sebagai pribadi. 101 disiarkan saat video yang diminta tidak mengizinkan pemutaran di pemutar sematan.

Catatan tentang Demo

Untuk tujuan demonstrasi, kita ingin menyertakan kolom formulir, tombol, dan UI tampilan XHTML di bawah Wrapper ActionScript 3 yang disematkan. Agar file swf DAN XHTML diperbarui secara bersamaan, kita harus menyertakan dua baris kode dalam file JavaScript 'youTubeLoader.js' yang terletak di 'deploy/_assets/js/' (Gambar 3). Anda perlu menghapus dua baris berikut [69, 79] ketika Anda mengintegrasikan file ini ke dalam proyek Anda:

//------------------------------------
// SPECIAL YOUTUBE EVENT METHODS
//------------------------------------

function onYouTubePlayerReady(playerId) {

  if (checkObj()) {	
    obj.addEventListener("onStateChange", "onytplayerStateChange");
  };

  // PLEASE NOTE: For the purpose of this demo:
  // This calls a secondary method located in the index.html file allowing the html display to update.
  // You will most likely not need this, it's gross, remove this when you implement this code.
  secondaryOnYouTubePlayerReady(playerId);
}

function onytplayerStateChange(newState) {
    //alert("Player's new state: " + newState);
  obj.playerStateUpdateHandler(newState);

  // PLEASE NOTE: For the purpose of this demo:
  // This calls a secondary method located in the index.html file allowing the html display to update.
  // You will most likely not need this, it's gross, remove this when you implement this code.
  secondaryOnytplayerStateChange(newState)
}

File demo dan pustaka IAM yang disertakan adalah perangkat lunak gratis: Anda dapat mendistribusikan ulang dan/atau memodifikasinya di bawah ketentuan Lisensi Publik Umum GNU Lesser General. File ini didistribusikan dengan harapan dapat bermanfaat, tetapi tanpa jaminan.

Kesimpulan

Artikel ini, demo dan file sumber akan memberi Anda gambaran yang solid tentang satu solusi yang relatif sederhana dan dapat diandalkan untuk mengintegrasikan YouTube API dan pemain tersemat ke dalam lingkungan {8/} 3 menggunakan pustaka wrapper yang kami kembangkan untuk proyek kami sendiri. Karena saya telah mengomentari sebagian besar kode, idealnya akan cukup mudah untuk menjelajahi dan menggunakan kembali library. Ini bukanlah tanpa batasan, dan selalu ada ruang untuk peningkatan, pemfaktoran ulang, dan peningkatan. Jika Anda memiliki pendapat tentang hal ini, jangan ragu untuk menghubungi kami.

Biodata Penulis

Matthew Richmond memiliki pengalaman 14 tahun dalam desain, pengembangan, dan arsitektur interaktif. Saat tidak berada di studio, ia dapat ditemukan sedang mengajar teknik ilustrasi/fotografi digital dan ActionScript lanjutan di School of Visual Arts. Matthew adalah partner pendiri dan desainer di choppingblock.com.

Wrapper ActionScript 3.0 untuk Pemutar Chromeless Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.