Bài viết này do một nhà phát triển bên ngoài viết và gửi. Nhóm API YouTube cảm ơn Ben Longoria đã dành thời gian và kiến thức chuyên môn của mình.
Ben Longoria, Đại học Wisconsin – Madison, Công nghệ học thuật
Tháng 2 năm 2009
- Giới thiệu
- Tình hình hiện nay
- Sử dụng Movie.as
- Sử dụng MovieSprite.as
- Tôi có thể gọi là gì và nhận được gì?
- Lời kết
Giới thiệu
Hình 1: Bản minh hoạ Trình phát TubeLoc không có Chrome
Ồ. Tính từ thời điểm viết bài này, chỉ còn khoảng một tháng nữa là YouTube Player API sẽ tròn một tuổi. Đó là bao nhiêu năm trên Internet? Đã có một số dự án tuyệt vời được xây dựng dựa trên API này. Bạn chỉ cần theo dõi Blog dành cho nhà phát triển API YouTube để thấy rằng có rất nhiều người đã làm được những điều tuyệt vời nhờ API này.
Bộ ứng dụng trình phát API YouTube hiện tại được viết bằng ActionScript 2. Mặc dù đây vẫn là một ngôn ngữ tuyệt vời để sử dụng, nhưng nhiều người hiện đang sử dụng ActionScript 3 và/hoặc Flex. Vấn đề là bạn phải thực hiện một số bước để các ứng dụng ActionScript 2 giao tiếp với các ứng dụng ActionScript 3. Bạn có thể hỏi: "Nhưng chờ đã...Tôi nghĩ mình đã nghe thấy điều này trước đây – có phải đã có một giải pháp nào đó cho vấn đề này không?"
Rất nhiều người đã tìm ra cách thực hiện việc này và chia sẻ kinh nghiệm của họ trên Diễn đàn nhà phát triển API YouTube. Ngoài ra, các dự án AS3 Chromeless Wrapper và Flex Embedded Player cũng giúp nhà phát triển sử dụng dễ dàng hơn.
Tôi muốn có một cách dễ dàng, đơn giản để sử dụng lại chức năng Player API chỉ trong ActionScript 3 hoặc MXML. Một lớp không có Flex cho những dự án không dùng Flex và một thành phần Flex dễ sử dụng cho những dự án yêu thích Flex. TubeLoc đáp ứng cả hai yêu cầu
TubeLoc (một bản tổng hợp của YouTube và LocalConnection) là một thư viện ActionScript 3 đóng vai trò là bộ chuyển đổi cho API Trình phát ActionScript 2 của YouTube. Bạn có thể dễ dàng thêm chức năng video trên YouTube vào các ứng dụng ActionScript 3 hoặc Flex bằng trình phát YouTube có giao diện đầy đủ hoặc không có giao diện. TubeLoc sử dụng lớp LocalConnection để giao tiếp với một SWF dàn xếp ActionScript 2. Tệp SWF ActionScript 2 giao tiếp với trình phát API YouTube chính thức. Vậy chúng ta sử dụng công cụ này như thế nào?
Tình hình hiện nay
Trước tiên, bạn nên tải bản phát hành hiện tại của thư viện xuống từ dự án Google Code. Sau khi giải nén tệp lưu trữ zip của bản phát hành, bạn sẽ thấy một thư mục as3. Bên dưới là thư mục src bao gồm một số lớp mẫu. Bạn có thể sử dụng những thông tin đó làm điểm xuất phát. Trong com/enefekt/tubeloc trong thư mục src có hai tệp. Bạn có thể sử dụng Movie.as trong các dự án Flex và MovieSprite.as trong các dự án ActionScript 3. Trong com/enefekt/tubeloc/event, có nhiều lớp sự kiện cho các thông báo khác nhau có thể được gửi từ người chơi.
Trước khi thử các ví dụ trong hướng dẫn này, hãy đảm bảo rằng thư mục src trong thư mục as3 nằm trong đường dẫn lớp của bạn. Quy trình thực hiện việc này sẽ khác nhau tuỳ thuộc vào công cụ bạn dùng để phát triển, vì vậy, hãy kiểm tra tài liệu cho môi trường phát triển của bạn.
Sau khi biên dịch bản minh hoạ hoặc ứng dụng, bạn sẽ cần tệp SWF ActionScript 2 để giao tiếp với YouTube Player API. Bạn có thể tìm thấy tệp SWF này trong bản lưu trữ bản phát hành tại đây: as3/lib/as2_tubeloc.swf. Chỉ cần đảm bảo tệp này nằm cùng với tệp HTML đang nhúng ứng dụng SWF của bạn, như sau:
my_app/ my_app.html as2_tubeloc.swf my_app.swf
Lưu ý: Bạn có thể thay đổi đường dẫn đến tệp SWF này bằng cách sử dụng thuộc tính playerWrapperUrl với thư viện.
Sử dụng Movie.as
Hãy xem cách sử dụng phiên bản Flex của TubeLoc. Trước tiên, chúng ta sẽ xem xét trình phát có đầy đủ các nút điều khiển, sau đó xem xét trình phát không có nút điều khiển trên Chrome. Sau đây là cách sử dụng trình phát chrome đầy đủ trong MXML:
<tubeloc:Movie id="tubelocMovie" width="320" height="240" videoId="GJ1sZBTnbuE" />
Tôi biết, tôi biết, đau lắm phải không? Hoàn toàn không! Vì vậy, hãy cùng thử làm một giao diện không có thanh chrome:
<tubeloc:Movie id="tubelocMovie" width="320" height="240" videoId="GJ1sZBTnbuE" chromeless="true" />
Chúng ta sẽ thêm một thuộc tính nữa vào, thế là xong. Toàn bộ tệp MXML sẽ có dạng như sau:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:tubeloc="com.enefekt.tubeloc.*"> <!-- TubeLoc Movie Component --> <tubeloc:Movie id="tubelocMovie" width="320" height="240" videoId="GJ1sZBTnbuE" chromeless="true" /> </mx:Application>
Lưu ý: Trong phần tử mx:Application, chúng ta thêm không gian tên tubeloc với gói cho thành phần Movie (Phim). Sau khi thực hiện việc này, chúng ta có thể sử dụng thành phần như minh hoạ. Sau đó, chúng ta sẽ xem xét những gì có thể thiết lập và gọi trên thành phần này.
Sử dụng MovieSprite.as
Bây giờ, hãy xem cách sử dụng phiên bản ActionScript 3 của TubeLoc. Phiên bản này không yêu cầu lớp nào từ khung Flex và chỉ sử dụng các lớp gốc của Flash Player. Trước tiên, chúng ta sẽ xem xét cách tạo trình phát có thanh điều khiển trên Chrome, sau đó là trình phát không có thanh điều khiển trên Chrome. Sau đây là ví dụ đầy đủ:
package {
import flash.display.Sprite;
import flash.display.Stage;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import com.enefekt.tubeloc.MovieSprite;
import com.enefekt.tubeloc.event.*;
[SWF(backgroundColor="#FFFFFF")]
public class MainChromed extends Sprite {
private var youtubeMovie:MovieSprite;
public function MainChromed() {
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
youtubeMovie = new MovieSprite("7tTNOX8jfno");
youtubeMovie.addEventListener(PlayerReadyEvent.PLAYER_READY, onPlayerReady);
youtubeMovie.x = 10;
youtubeMovie.y = 10;
addChild(youtubeMovie);
}
private function onPlayerReady(event_p:PlayerReadyEvent):void {
youtubeMovie.width = 640;
youtubeMovie.height = 480 + MovieSprite.CHROME_HEIGHT;
}
}
}
Trước tiên, chúng ta nhập các lớp TubeLoc cần thiết. Sau đó, trong hàm khởi tạo, chúng ta tạo một thực thể của lớp MovieSprite và truyền mã video vào hàm khởi tạo của MovieSprite. Tiếp theo, chúng ta sẽ thêm trình nghe sự kiện cho PlayerReadyEvent. Trong trình xử lý sự kiện onPlayerReady, chúng ta đặt kích thước của phim. Lưu ý: Vì đang sử dụng trình phát full-chrome, nên chúng ta sẽ tận dụng thuộc tính tĩnh CHROME_HEIGHT trên lớp MovieSprite. Điều này giúp chúng ta định cỡ phim, có tính đến chiều cao của chrome.
Được rồi, còn trình phát không có điều khiển trên Chrome thì sao?
package {
import flash.display.Sprite;
import flash.display.Stage;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import com.enefekt.tubeloc.MovieSprite;
import com.enefekt.tubeloc.event.*;
[SWF(backgroundColor="#FFFFFF")]
public class MainChromeless extends Sprite {
private var youtubeMovie:MovieSprite;
public function MainChromeless() {
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
youtubeMovie = new MovieSprite(null, true);
youtubeMovie.addEventListener(PlayerReadyEvent.PLAYER_READY, onPlayerReady);
youtubeMovie.x = 10;
youtubeMovie.y = 10;
addChild(youtubeMovie);
}
private function onPlayerReady(event_p:PlayerReadyEvent):void {
youtubeMovie.width = 640;
youtubeMovie.height = 480;
youtubeMovie.loadVideoById("7tTNOX8jfno");
}
}
}
Vậy điểm khác biệt là gì? Trong hàm khởi tạo, chúng ta truyền null cho mã video và tham số true thứ hai cho lớp MovieSprite biết rằng chúng ta sẽ không sử dụng Chrome. Bạn cũng sẽ nhận thấy sự khác biệt trong trình xử lý sự kiện onPlayerReady. Đây là nơi chúng ta tải video theo mã nhận dạng bằng phương thức loadVideoById.
Tôi có thể gọi là gì và nhận được gì?
Vậy chúng ta có thể gọi những gì và phải làm việc với những sự kiện nào? Trong bản lưu trữ bản phát hành mà bạn đã tải xuống, có tài liệu đầy đủ về mã để biết thông tin chi tiết. Dưới đây là thông tin tổng quan nhanh về cả Movie.as và MovieSprite.as:
seekTo(seconds:Number, allowSeekAhead:Boolean=true):void setVolume(volume:Number):void getVolume():Number unMute():void mute():void clearVideo():void setSize(width:Number, height:Number):void loadVideoById(videoId:String, startSeconds:Number = 0):void [Chromeless player only] cueVideoById(videoId:String, startSeconds:Number = 0):void [Chromeless player only] stopVideo():void playVideo():void pauseVideo():void destroy():void
Ngoài các phương thức này, trong thành phần Movie.as, bạn có quyền truy cập vào các thuộc tính sau:
playerReady:Boolean chromeless:Boolean videoId:String stateDescription:String currentTime:Number duration:Number videoUrl:String videoEmbedCode:String volume:Number
Sau đây là các sự kiện mà bạn có thể đăng ký. Bạn có thể xem thêm thông tin chi tiết trong tài liệu.
onError onStateChange onMovieStateUpdate onMovieProgress onPlayerReady onPlayerUnload
Kết luận
Tôi hy vọng bài viết này đã giúp bạn tích hợp chức năng và nội dung của YouTube vào các ứng dụng Flash. Bạn cần lưu ý một hạn chế khi phát triển bằng TubeLoc: Bạn không thể có hai trình phát YouTube trên sân khấu cùng một lúc.
Hy vọng vấn đề này sẽ được khắc phục kịp thời. Vì vậy, khi bạn phát hiện lỗi hoặc thiếu một số tính năng, vui lòng truy cập vào dự án Google Code và báo cáo lỗi trong công cụ theo dõi lỗi. Cảm ơn bạn đã đọc!
Tiểu sử tác giả
Ben Longoria là Nhà phát triển ứng dụng học thuật của Đại học Wisconsin-Madison. Anh đã phát triển bằng Flash kể từ Flash 5 và Flex kể từ bản phát hành Flex 2. Trong 2 năm qua, anh cũng đã phát triển các ứng dụng do Mozilla cung cấp. Ben đã làm việc trên một số dự án giáo dục và học thuật, bao gồm cả các ứng dụng đa nền tảng nhắm đến cả trình duyệt và máy tính. Anh đóng vai trò tích cực trong việc thiết kế giao diện và tương tác, đồng thời thích thử thách tạo ra phần mềm hữu dụng. Bạn có thể truy cập vào blog của anh tại http://enefekt.com/sansbrowser/ và đọc các bài viết đóng góp của anh cho InsideRIA.
Tác phẩm này được cấp phép theo Giấy phép Ghi công theo Creative Commons 3.0 của Hoa Kỳ.