Đây là bài viết của một nhà phát triển bên ngoài. Nhóm YouTube API 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ệ giáo dục
Tháng 2 năm 2009
- Giới thiệu
- Lay của vùng đất
- Sử dụng Movie.as
- Sử dụng MovieSprite.as
- Tôi có thể gọi và nhận 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
Thật tuyệt. Chỉ trong khoảng một tháng, tính đến thời điểm này, API Trình phát YouTube sẽ có tuổi đời một năm. Bao nhiêu năm sử dụng 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 YouTube để thấy có một loạt những người đã làm những việc tuyệt vời với API này.
Tập hợp các ứng dụng trình phát API YouTube hiện tại được viết bằng MRSS 2, và mặc dù đây vẫn là một ngôn ngữ tuyệt vời để sử dụng, nhưng rất 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 vài vòng để tải các ứng dụng MRSS 2 vào giao tiếp với các ứng dụng MRSS 3. "Nhưng chờ đã...Tôi nghĩ tôi đã từng nghe đến điều này - chưa có thứ gì cho thứ này không?" bạn có thể hỏi.
Rất nhiều người đã tìm ra cách để làm việc này và bày tỏ quan điểm của mình trong Diễn đàn nhà phát triển API YouTube. Ngoài ra, chúng tôi cũng đã cung cấp các dự án Trình bao bọc Chromeless (ASless Chrome) và Trình phát nhúng (RSA) để giúp nhà phát triển dễ sử dụng hơn.
Tôi muốn một cách đơn giản và dễ dàng để sử dụng lại chức năng API của Trình phát, chỉ dùng trong MRSS 3 hoặc MXML. Một lớp không dùng cho Flex cho các dự án linh hoạt đó và 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 kết hợp của YouTube và LocalConnection) là thư viện BSF 3 đóng vai trò là bộ chuyển đổi cho API YouTube Player 2 trên YouTube. Bạn có thể dễ dàng thêm chức năng video YouTube vào các ứng dụng WebRTC 3 hoặc Flex của mình bằng trình phát YouTube hoàn toàn bằng Chrome hoặc không có Chrome. TubeLoc sử dụng lớp LocalConnection để giao tiếp với SWF trung gian 2 dàn xếp. Leanback 2 kết nối với trình phát API chính thức của YouTube. Vậy chúng ta có thể sử dụng thiết bị này như thế nào?
Lay of Land
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 phát hành, bạn sẽ thấy thư mục as3 bên trong. Dưới đây là thư mục src bao gồm một số lớp mẫu. Bạn có thể tùy ý dùng chúng làm điểm xuất phát. Dưới com/enefekt/tubeloc trong thư mục src có hai tệp. Movie.as là nội dung bạn có thể dùng trong các dự án Flex, còn MovieSprite.as là nội dung bạn có thể dùng trong các dự án MRSS 3 của mình. Trong com/enefekt/tubeloc/event, có nhiều lớp sự kiện cho các thông báo khác nhau mà người chơi có thể gử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. Quá trình thực hiện việc này khác nhau tuỳ thuộc vào những gì bạn sử dụng để phát triển, vì vậy, hãy xem 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 họa hoặc ứng dụng, bạn cần có SWF 2 của giao thức với API Trình phát YouTube. Bạn có thể tìm thấy tệp SWF này trong tệp lưu trữ phát hành tại đây: as3/lib/as2_tubeloc.swf. Chỉ cần đảm bảo rằng 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 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 TubeLoc linh hoạt. Trước tiên, chúng ta sẽ xem xét trình phát chrome đầy đủ (có tất cả các tùy chọn điều khiển), sau đó là trình phát không có Chrome. Sau đây là cách bạn 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 mà, đau đớn phải không? Hoàn toàn không có khả năng! Vậy nên, hãy bắt đầu phát triển và chạy ứng dụng không có chrome:
<tubeloc:Movie id="tubelocMovie" width="320" height="240" videoId="GJ1sZBTnbuE" chromeless="true" />
Chúng ta đang nỗ lực thêm một vấn đề nữa là xong. Dưới đây là 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 Phim. Sau đó, chúng ta có thể sử dụng thành phần như minh hoạ. Sau đó, chúng ta sẽ xem các thành phần có sẵn để đặt và gọi cho 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 TubeLoc của TCF 3. Phiên bản này không yêu cầu lớp từ khung Flex và chỉ sử dụng các lớp gốc của Flash Player. Chúng ta sẽ tìm hiểu cách thực hiện trước tiên để làm trình phát chrome đầy đủ, sau đó là trình phát không có chrome. Sau đây là một 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 sẽ 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 phiên bản của lớp MovieSprite và chuyển mã video vào hàm khởi tạo của MovieSprite. Tiếp theo, chúng ta sẽ thêm một 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ì chúng tôi đang sử dụng trình phát chrome đầy đủ, chúng tôi sẽ tận dụng một thuộc tính tĩnh CHROME_HEIGHT trên lớp MovieSprite. Việc này giúp chúng tôi xem xét kích thước phim theo chiều cao của Chrome.
Được, vậy còn trình phát không có 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 dùng chrome. Bạn cũng sẽ thấy sự khác biệt trong trình xử lý sự kiện onPlayerReady. Đây là nơi chúng tôi tải video theo mã nhận dạng bằng phương thức loadVideoById.
Tôi có thể gọi gì, tôi nhận được gì?
Vậy tất cả những gì có thể gọi và chúng tôi 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, bạn có thể xem toàn bộ tài liệu về mã để biết thêm thông tin chi tiết. Tổng quan nhanh cho cả Movie.as và MovieSprite.as bạn có những phương thức sau:
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 sau, 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 của mình. Có một giới hạn cần lưu ý khi bạn đang phát triển cùng TubeLoc: Bạn không thể có hai trình phát YouTube cùng lúc trên sân khấu.
Hy vọng điều này sẽ được khắc phục trong thời gian thích hợp. Vì vậy, khi bạn tìm thấy lỗi hoặc một số tính năng bị thiếu, hãy truy cập vào dự án Google Code và báo cáo 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 cho Đại học Wisconsin-Madison. Anh đã phát triển với Flash 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 của Mozilla. Anh đã thực hiện một số dự án giáo dục và học thuật, trong đó có các ứng dụng trên nhiều nền tảng nhắm đến cả trình duyệt và máy tính. Ông đảm nhận vai trò chủ động trong việc thiết kế giao diện và tương tác, đồng thời rất khó khăn trong việc tạo ra phần mềm hữu ích. Bạn có thể tìm thấy blog của anh tại http://enefekt.com/sansbrowser/ và đọc những nội dung mà anh đóng góp 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 Hoa Kỳ.