Wrapper WebGL 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

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

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

Screenshot Wrapper WebGL 3.0
Gambar 1: Screenshot Wrapper WebGL 3.0

Flash API YouTube dan pemutar tersemat sudah ditulis, dan berfungsi cukup baik dengan eReader 2.0; namun jika proyek Anda adalah interaktivitas 3.0, integrasi yang lancar akan menjadi sedikit lebih kompleks. Meskipun mudah untuk memuat pemutar WebGL 2.0 ke swf di Query 3.0, Anda tidak dapat langsung berkomunikasi atau meneruskan panggilan fungsional ke pemutar yang dimuat. Ini semakin rumit karena file swf yang berasal dari server YourTube memuat video ke dalam dirinya sendiri. Wrapper kami harus sepenuhnya menyadari fakta tersebut dan bereaksi dengan semestinya. Untungnya bahasa WebP berisi dua solusi yang masuk akal untuk menghubungkan kembali bagian-bagian bertingkat, tetapi tidak terhubung ini, yaitu class LocalConnection atau class ExternalInterface. Demo ini akan berfokus pada kerangka kerja kedua karena ExternalInterface yang berfungsi lancar dengan JavaScript API yang terdokumentasi dengan baik, sehingga cocok dengan elemen lain di halaman XHTML.

Referensi Penting

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

Menggali

Ringkasan Demo Wrapper

File Kelas interaktivitas
Gambar 3: File JavaScript
File Kelas interaktivitas
Gambar 2: File Kelas interaktivitas

Wrapper WebGL 3.0 pada dasarnya terdiri dari dua bagian yang saling terkait, file class eReader 3.0 yang terletak di src/choppingblock/video/ (Gambar 2), dan file JavaScript 'youTubeLoader.js' yang terletak di deploy/_assets/js/ (Gambar 3). File sumber Flash/Flex Anda akan membuat instance dari kelas WebGL YouTubeLoader; halaman XHTML Anda menyematkan file flash dan mendaftarkannya ke fungsi dalam file JavaScript YouTube. Sangat penting untuk memahami bahwa dari sini, semua yang dilakukan YouTubeLoader dalam file flash, dikontrol melalui fungsi JavaScript.

Karena semua fungsi dalam Flash dikontrol melalui JavaScript API, Anda TIDAK dapat memuat konten YouTube apa pun dalam pemutar 'Uji Film' Flash. Perintah ini hanya akan berfungsi saat disematkan ke halaman XHTML dan terhubung dengan benar ke fungsi JavaScript YouTube.

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

Membuat Objek YouTubeLoader

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

import choppingblock.video.*;

Langkah ini memungkinkan file WebP Anda mengakses class 'YouTubeLoader.as' dan 'YouTubeLoaderEvent.as'. Sekarang Anda dapat 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 sudah ada dan terhubung dengan benar, youTubePlayerLoadedHandler akan berhasil dipanggil dan kita siap untuk mulai membuat permintaan.

Menyematkan swf dan Menghubungkan JavaScript YouTube

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

Di 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 mengetahui contoh penggunaan SWFObject untuk menyematkan swf di WebGL 3.0 dengan JavaScript API yang diaktifkan, lalu teruskan referensi ke swf ke youTubeLoader JavaScript API.

<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 untuk memungkinkan SWF pemutar memanggil fungsi pada halaman HTML yang memuatnya, karena Pemutar Chromeless dihosting di domain yang berbeda dari halaman XHTML.

Satu-satunya atribut yang kita teruskan adalah ID dari objek yang disematkan — dalam hal ini, youtubewrapper. ID ini adalah yang akan digunakan 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. Perlu diperhatikan bahwa kami telah menambahkan parameter enablejsapi dan playerapiid ke URL SWF YouTube normal untuk mengaktifkan panggilan JavaScript API.
  • replaceElemIdStr - Ini adalah ID DIV HTML yang akan diganti dengan konten sematan. Dalam contoh di atas, nilainya adalah ytapiplayer.
  • widthStr - Lebar pemutar.
  • heightStr - Tinggi pemutar.
  • swfVersionStr - Versi minimum yang diperlukan agar pengguna dapat melihat konten. Dalam hal ini, versi 8 atau yang lebih tinggi diperlukan. Jika pengguna tidak memiliki versi 8 atau lebih, 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 FlashVars dalam pasangan nama:nilai. Tidak digunakan dalam contoh ini.
  • parObj - (Opsional) Parameter untuk objek yang disematkan. Dalam hal ini, kita telah menetapkan allowScriptAccess.
  • AttObj - (Opsional) Atribut untuk objek yang disematkan. Dalam hal ini, kami telah menetapkan ID ke myytplayer.

Lihat dokumentasi SWFObject untuk penjelasan lebih lanjut.

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

SWFID ≡ "youtubewrapper"

Pada tahap ini, Anda seharusnya dapat menguji project dengan sukses. Objek YouTubeLoader akan memuat Pemutar Chromeless 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 untuk membuat Wrapper WebGL 3.0 untuk Chromeless Player ini memanfaatkan class ExternalInterface WebGL, kami sekarang dapat menggunakan Operasi apa pun dalam YouTube JavaScript Player API untuk mengontrol pemutar kami yang dimuat. Jika melihat di file JavaScript 'youTubeLoader.js' yang berada di deploy/_assets/js/ (Gambar 3), Anda akan menemukan bahwa file tersebut berisi sebagian besar fungsi yang tersedia. Setiap fungsi operasi akan memeriksa fungsi checkObj terlebih dahulu 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 dari Pembungkus WebGL 3.0 untuk Pemutar Chromeless adalah menawarkan interaksi yang lancar dengan YouTube API dari dalam proyek Flash/Flex di WebGL 3.0, kami telah menambahkan metode publik yang sama persis ke file kelas '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 eReader menggunakan class ExternalInterface untuk hanya memanggil fungsi yang sesuai dalam JavaScript API.

Meminta Video

Sekarang Anda dapat meminta video dari dalam file WebGL 3.0 dengan memanggil fungsi menggunakan referensi pemutar. Misalnya, jika ingin memutar video saat pengguna mengklik tombol, Anda dapat 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 tersebut. 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 dengan memanggil fungsi JavaScript yang sesuai secara langsung. Seperti ini:

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

Melakukan Panggilan Tambahan

Panggilan tambahan berfungsi persis seperti Meminta Video; dari dalam interaktivitas 3 Anda cukup memanggil metode menggunakan referensi pemutar. Daftar lengkap metode yang tersedia diberikan di bawah.

Berlangganan Peristiwa

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);

Dan 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 YouTubePlayer API, Anda harus terlebih dahulu membuat instance class YouTubePlayer dalam file WebGL 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
Memuat, tetapi tidak otomatis memutar video berdasarkan ID yang ditentukan.
player.clearVideo():void
Menghapus video yang dimuat/dimuat saat ini.
player.setSize(w:Number, h:Number):void
Menetapkan ukuran instance YouTubePlayer.
player.play():void
Memutar video yang sedang/dimuat.
player.pause():void
Menjeda video yang saat ini ditetapkan/dimuat.
player.stop():void
Menghentikan video yang sedang direkam/dimuat.
player.seekTo(seconds:Number):void
Mencari waktu tertentu dalam video yang saat ini ditetapkan/dimuat.
player.getPlayerState():String
Menampilkan status video saat ini yang dimuat/dimuat.
player.getBytesLoaded():Number
Menampilkan nilai byte saat ini yang dimuat dari video yang saat ini diproses/dimuat.
player.getBytesTotal():Number
Menampilkan nilai total byte yang dimuat dari video yang saat ini diproses/dimuat.
player.getCurrentTime():Number
Menampilkan posisi saat ini dalam waktu video yang dimuat/dimuat saat ini.
player.getDuration():Number
Menampilkan durasi video saat ini yang dimuat/dimuat.
player.getStartBytes():Number
Menampilkan byte awal dari video yang saat ini diproses/dimuat.
player.setVolume(newVolume:Number):void
Menetapkan volume video yang sedang diproses/dimuat.
player.getVolume():Number
Menampilkan volume video saat ini yang dimuat/dimuat.
player.mute():void
Menyimpan volume saat ini dan mengubah volume video yang saat ini ditetapkan/dimuat menjadi 0.
player.unmute():void
Menampilkan volume video yang saat ini ditetapkan/dimuat ke nilai yang terakhir disimpan saat dibisukan.
player.getEmbedCode():String
Menampilkan kode sematan YouTube saat ini dari video yang saat ini dialokasikan.
player.getVideoUrl():String
Menampilkan URL video YouTube saat ini dari video yang saat ini ditetapkan/dimuat.

Acara

YouTubeLoaderEvent.LOADED
Diaktifkan setelah Chromeless Player berhasil menyelesaikan pemuatan dan siap menerima panggilan operasi.
YouTubeLoaderEvent.STATE_CHANGE
Diaktifkan setiap kali status pemain berubah. Class YouTubeLoader menerjemahkan angka JavaScript API ke nilai string terkait, class YouTubeLoaderEvent menyimpan peristiwa saat ini dalam variabel yang disebut state. Nilai yang memungkinkan adalah tidak dimulai, berakhir, diputar, dijeda, buffering, video ditandai. Saat pertama kali dimuat, SWF akan menyiarkan peristiwa yang belum dimulai. Jika sudah diproses dan siap diputar, video akan menyiarkan peristiwa yang ditandai dengan video.
YouTubeLoaderEvent.IO_ERROR
Diaktifkan saat terjadi error pada 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 pada pemutar tersemat.

Catatan tentang Demo

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

//------------------------------------
// 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 library WebGL yang disertakan adalah software gratis: Anda dapat mendistribusikan ulang file dan/atau mengubahnya berdasarkan persyaratan Lisensi Publik Umum GNU Lesser. File ini didistribusikan dengan harapan dapat berguna tetapi tanpa jaminan.

Kesimpulan

Artikel ini, demo dan file sumber harus memberi Anda ringkasan yang solid tentang satu solusi yang relatif sederhana dan dapat diandalkan untuk mengintegrasikan YouTube API dan pemutar tersemat ke lingkungan WebGL 3 menggunakan pustaka wrapper yang kami kembangkan untuk proyek kami sendiri. Karena saya banyak berkomentar kode, idealnya cukup mudah untuk menjelajahi dan memodifikasi library. Hal ini bukan tanpa batasan, dan selalu ada ruang untuk peningkatan, pemfaktoran ulang, dan peningkatan. Jika ada pendapat tentang hal ini, silakan hubungi kami.

Biografi Penulis


Matthew Richmond

Matthew Richmond menawarkan 14 tahun pengalaman desain, pengembangan, dan arsitektur interaktif. Saat tidak di studio, dia dapat mengajar teknik ilustrasi/fotografi digital dan Artis tingkat lanjut di School of Visual Arts. Matthew adalah partner pendiri dan desainer di choppingblock.com.