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 phụ trách API và Công cụ của YouTube cảm ơn Matthew Richmond vì đã dành thời gian và kiến thức chuyên môn của anh.
Matthew Richmond, The Cắt Block, Inc.
Tháng 10 năm 2008
- Giới thiệu
- Thông tin quan trọng
- Tìm hiểu sâu
- Tương tác với người chơi
- Hoạt động hiện có
- Lưu ý trên bản minh hoạ
- Lời kết
Giới thiệu
Trong bài viết này, tôi sẽ trình bày và trình bày ngắn gọn về Trình bao bọc ActionScript 3.0 đáng tin cậy cho Trình phát YouTube không dùng Chrome. Trình bao bọc tận dụng lớp ExternalInterface của ActionScript và API JavaScript của YouTube.
Công cụ trình phát YouTube và Trình phát không có Chrome của Google giúp các nhà thiết kế/nhà phát triển tích hợp sức mạnh của YouTube vào các dự án trực tuyến của họ một cách nhanh chóng và dễ dàng. Phương pháp này phù hợp với các dự án nhỏ có ngân sách cố định không cho phép lưu trữ video, cũng như các dự án quy mô lớn dành cho khách hàng muốn mang đến trải nghiệm tuỳ chỉnh cho người dùng cuối mà không tách biệt với khán giả trên YouTube.
Hình 1: Ảnh chụp màn hình trình bao bọc ActionScript 3.0
API Flash và trình phát nhúng của YouTube được viết bằng và hoạt động khá tốt với ActionScript 2.0; tuy nhiên, nếu dự án của bạn là ActionScript 3.0, thì việc tích hợp liền mạch sẽ phức tạp hơn một chút. Mặc dù dễ dàng tải trình phát ActionScript 2.0 vào tệp swf ActionScript 3.0, nhưng bạn không thể trực tiếp giao tiếp hoặc truyền bất kỳ lệnh gọi chức năng nào vào trình phát đã tải. Việc này càng phức tạp hơn vì tệp swf đến từ máy chủ của YourTube đang tải một video vào chính tệp đó. Trình bao bọc của chúng tôi cần phải nhận thức đầy đủ về sự thật đó và phản ứng một cách phù hợp. May mắn là ngôn ngữ ActionScript có chứa hai giải pháp hợp lý để kết nối lại các phần được lồng nhưng bị ngắt kết nối này, lớp LocalConnection hoặc lớp ExternalInterface. Bản minh hoạ này sẽ tập trung vào phần sau vì ExternalInterface hoạt động liền mạch với API JavaScript được tài liệu rõ ràng và do đó hoạt động tốt với bất kỳ trang nào khác trên trang IME.
Thông tin quan trọng
Trước khi bắt đầu, sau đây là danh sách các tài nguyên và tệp liên quan mà bạn có thể sử dụng. Nhiều chủ đề được thảo luận trong bài viết này được trình bày chi tiết hơn trong các đường liên kết bên dưới.
- Xem Trình bao bọc ActionScript 3.0 và tải tệp nguồn xuống
- Tài liệu tham khảo chính thức về API Trình phát JavaScript của YouTube
- Tài liệu về lớp ExternalInterface của Adobe
- Tích hợp Flash JavaScript SWFObject
Tìm hiểu sâu
Tổng quan về bản minh hoạ trình bao bọc
Hình 3: Tệp JavaScript
Hình 2: Tệp lớp ActionScript
Trình bao bọc ActionScript 3.0 bao gồm hai phần về cơ bản được kết nối với nhau, các tệp lớp ActionScript 3.0 nằm trong src/chopedblock/video/ (Hình 2) và 'youTubeLoader.js' Tệp JavaScript nằm trong triển khai/_tài sản/js/ (Hình 3). Tệp nguồn Flash/Flex sẽ tạo một thực thể của lớp ActionScript YouTubeLoader; trang XHTML của bạn sẽ nhúng tệp flash và đăng ký tệp đó bằng các hàm trong tệp JavaScript youTubeLoader. Bạn cần hiểu rằng từ đây, mọi thao tác mà YouTubeLoader thực hiện trong tệp flash đều được kiểm soát thông qua các hàm JavaScript.
Vì tất cả chức năng trong Flash được kiểm soát qua API JavaScript, bạn sẽ KHÔNG thể tải bất kỳ nội dung YouTube nào trong 'Phim thử nghiệm' của Flash trình phát. Tệp này sẽ chỉ hoạt động khi được nhúng vào trang IME và được kết nối đúng cách với các hàm JavaScript youTubeLoader.
Lưu ý: Để kiểm thử bất kỳ lệnh gọi nào trong số này, bạn phải chạy tệp trên máy chủ web hoặc sửa đổi Cài đặt bảo mật của Trình phát Flash, vì trình phát Flash hạn chế các lệnh gọi giữa tệp cục bộ và Internet.
Tạo đối tượng YouTubeLoader
Trước khi có thể tạo một thực thể của Đối tượng YouTubeLoader trong dự án Flash/Flex, trước tiên, bạn phải đảm bảo gói (thư mục) của các tệp bắt buộc nằm trong cùng thư mục với dự án của bạn (xem Hình 2) hoặc được xác định bằng Đường dẫn lớp của dự án. Sau đó, bạn có thể nhập các tệp gói:
import choppingblock.video.*;
Điều này cho phép tệp ActionScript của bạn truy cập vào 'YouTubeLoader.as' và "YouTubeLoaderEvent.as" khác. Bây giờ, bạn đã rõ ràng là có thể tạo một phiên bản của lớp YouTubeLoader và các trình nghe sự kiện cần thiết:
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
};
};
Bây giờ, nếu tệp JavaScript đã được đặt và kết nối đúng cách, thì youTubePlayerLoadedHandler sẽ được gọi thành công và chúng ta đã sẵn sàng để bắt đầu tạo yêu cầu.
Nhúng xml và Kết nối JavaScript youTubeLoader
Bạn sẽ không thể tải thành công nội dung từ YouTube cho đến khi tệp swf được nhúng vào tệp XHTML và kết nối với JavaScript youTubeLoader. Chúng tôi khuyên bạn nên sử dụng SWFObject để nhúng bất kỳ trình phát nào sẽ được truy cập bằng API JavaScript. Thao tác này sẽ cho phép bạn phát hiện phiên bản Flash Player của người dùng cuối (JavaScript API yêu cầu Flash Player 8 trở lên) và cũng sẽ loại bỏ hộp "Nhấp để kích hoạt chế độ điều khiển này" khi sử dụng Internet Explorer để xem trình phát.
Trong phần <head> của tệp XHTML, bạn kết nối các tệp swfobject và youTubeLoader:
<script type="text/javascript" src="_assets/js/swfobject.js"></script> <script type="text/javascript" src="_assets/js/youTubeLoader.js"></script>
Xem ví dụ bên dưới về cách sử dụng SWFObject để nhúng tệp ActionScript 3.0 với API JavaScript được bật, sau đó chuyển tham chiếu đến xml của bạn tới 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>
Bạn cần tham số allowScriptAccess trong mã để cho phép trình phát SWF gọi các hàm trên trang HTML chứa, vì Trình phát Chromeless được lưu trữ trên một miền khác với trang XHTML.
Thuộc tính duy nhất chúng ta truyền vào là id của đối tượng nhúng — trong trường hợp này là youtubewrapper. Mã nhận dạng này là mã mà tệp youTubeLoader.js sẽ sử dụng để tham chiếu đến trình phát bằng getElementById().
swfobject.embedSWF sẽ tải trình phát từ YouTube và nhúng trình phát đó vào trang của bạn.
swfobject.embedSWF(swfUrlStr, replaceElemIdStr, widthStr, heightStr, swfVersionStr, xiSwfUrlStr, flashvarsObj, parObj, attObj)
swfUrlStr– Đây là URL của tệp SWF. Xin lưu ý rằng chúng tôi đã thêm các tham sốenablejsapivàplayerapiidvào URL SWF thông thường của YouTube để bật các lệnh gọi API JavaScript.replaceElemIdStr– Đây là mã DIV HTML để thay thế bằng nội dung được nhúng. Trong ví dụ trên, đó làytapiplayer.widthStr– Chiều rộng của trình phát.heightStr– Chiều cao của người chơi.swfVersionStr– Phiên bản tối thiểu cần thiết để người dùng xem được nội dung. Trong trường hợp này, cần có phiên bản 8 trở lên. Nếu người dùng không có 8 hoặc cao hơn, họ sẽ thấy dòng văn bản mặc định trong DIV HTML.xiSwfUrlStr- (Tùy chọn) Chỉ định URL của SWF cài đặt nhanh của bạn. Không được dùng trong ví dụ này.flashVarsObj– (Không bắt buộc) Chỉ định FlashVars trong các cặp tên:giá trị. Không được sử dụng trong ví dụ này.parObj– (Không bắt buộc) Các tham số cho đối tượng nhúng. Trong trường hợp này, chúng ta đã đặtallowScriptAccess.AttObj– (Không bắt buộc) Các thuộc tính của đối tượng nhúng. Trong trường hợp này, chúng ta đã đặt mã nhận dạng thànhmyytplayer.
Hãy xem tài liệu về SWFObject để biết thêm nội dung giải thích.
SWFID ≡ sẽ lưu trữ thông tin tham chiếu đến mã nhận dạng của đối tượng nhúng để API JavaScript sử dụng. Bạn phải sử dụng cùng một id của đối tượng nhúng mà bạn đã cung cấp cho Danh sách đó.
SWFID ≡ "youtubewrapper"
Tại thời điểm này, bạn đã có thể kiểm thử thành công dự án. Đối tượng YouTubeLoader sẽ tải Trình phát Chromeless và gọi thành công trình xử lý sự kiện YouTubeLoaderEvent.LOADED. Bây giờ, chúng ta đã sẵn sàng tạo yêu cầu video và tương tác với đối tượng YouTubeLoader.
Tương tác với người chơi
Vì phương pháp này để tạo Trình bao bọc ActionScript 3.0 cho Trình phát không có Chrome tận dụng lớp ExternalInterface của ActionScript, nên giờ đây chúng tôi có thể sử dụng bất kỳ Hoạt động nào trong API Trình phát JavaScript của YouTube để điều khiển trình phát đã tải của mình. Nếu bạn tìm trong tệp 'youTubeLoader.js' Tệp JavaScript nằm trong triển khai/_tài sản/js/ (Hình 3), bạn sẽ thấy rằng tệp này chứa hầu hết các hàm có sẵn. Trước tiên, mỗi hàm hoạt động sẽ kiểm tra dựa trên hàm checkObj để xác minh rằng biến SWFID đã được thiết lập đúng cách trước khi thực thi.
//------------------------------------
// 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...
Do mục tiêu cuối cùng của Trình bao bọc ActionScript 3.0 cho Trình phát không có Chrome là cung cấp tương tác liền mạch với API YouTube từ trong dự án Flash/Flex ActionScript 3.0, chúng tôi đã thêm các phương thức công khai giống hệt nhau vào 'YouTubeLoader.as' nằm trong src/chopedblock/video/ (Hình 2). Điều này có nghĩa là bạn có thể gọi chính xác các thao tác đó trực tiếp đến Đối tượng YouTubeLoader trong Flash/Flex. Nếu xem trong tệp lớp, bạn sẽ thấy:
// ------------------------------------
// 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...
Phương thức ActionScript sử dụng lớp ExternalInterface để gọi hàm phù hợp trong API JavaScript một cách đơn giản.
Yêu cầu video
Giờ đây, bạn có thể yêu cầu video từ trong tệp ActionScript 3.0 bằng cách gọi các hàm sử dụng tham chiếu trình phát. Ví dụ: nếu muốn phát video khi người dùng nhấp vào một nút, bạn sẽ thêm trình nghe sự kiện MouseEvent.CLICK vào nút đó. Chẳng hạn như:
// assuming your button was called 'myButton' myButton.addEventListener(MouseEvent.CLICK, youtubeLoadVideoHandler);
Và tạo một phương thức trình xử lý sự kiện để xử lý yêu cầu. Chẳng hạn như:
private function youtubeLoadVideoHandler (event:MouseEvent):void{
// assuming that '_youTubeLoader' is a reference to your YouTubeLoader object
_youTubeLoader.loadVideoById( "u1zgFlCw8Aw" );
};
Ngoài tệp Flash/Flex, bạn có thể tuỳ ý yêu cầu một video bằng cách gọi trực tiếp hàm JavaScript tương ứng. Chẳng hạn như:
<a href="javascript:loadVideoById('u1zgFlCw8Aw')">Play</a> Thực hiện cuộc gọi bổ sung
Các cuộc gọi bổ sung hoạt động giống hệt như Yêu cầu video; từ trong ActionScript 3, bạn có thể chỉ cần gọi các phương thức bằng cách sử dụng tham chiếu trình phát. Dưới đây là danh sách đầy đủ các phương thức có sẵn.
Đăng ký sự kiện
Đăng ký các sự kiện bằng cách thêm trình nghe sự kiện vào tệp tham chiếu người chơi. Ví dụ: để nhận thông báo khi trạng thái của người chơi thay đổi, hãy thêm một trình nghe sự kiện cho YouTubeLoaderEvent.STATE_CHANGE. Chẳng hạn như:
// assuming that '_youTubeLoader' is a reference to your YouTubeLoader object _youTubeLoader.addEventListener(YouTubeLoaderEvent.STATE_CHANGE, youTubePlayerStateChangeHandler);
Đồng thời, hãy tạo một phương thức trình xử lý sự kiện để xử lý yêu cầu. Chẳng hạn như:
private function youTubePlayerStateChangeHandler (event:YouTubeLoaderEvent):void{
//trace("YouTubeIntegrationDemo: youTubePlayerStateChangeHandler");
_stateField.text = event.state;
};
Hoạt động hiện có
Để gọi các phương thức API YouTubePlayer, trước tiên bạn phải tạo một phiên bản của lớp YouTubePlayer trong tệp ActionScript và lưu trữ tham chiếu đến đối tượng YouTubePlayer mà bạn muốn kiểm soát. Bạn có thể thực hiện việc này bằng cách gọi:
var _youTubeLoader:YouTubeLoader; _youTubeLoader = new YouTubeLoader();
Phương thức công khai
player.loadVideoById(id:String, startSeconds:Number = 0):void- Tải và phát video dựa trên mã nhận dạng đã chỉ định.
player.cueNewVideo(id:String, startSeconds:Number = 0):void- Tải nhưng không tự động phát video dựa trên mã nhận dạng đã chỉ định.
player.clearVideo():void- Xoá video đang được đánh dấu/tải.
player.setSize(w:Number, h:Number):void- Đặt kích thước của thực thể YouTubePlayer.
player.play():void- Phát video hiện được bật/tắt.
player.pause():void- Tạm dừng video đang được phát/tải.
player.stop():void- Dừng video đang được bật/tắt.
player.seekTo(seconds:Number):void- Tìm kiếm thời điểm chỉ định trong video hiện đang được bật/tắt.
player.getPlayerState():String- Trả về trạng thái hiện tại của video đang được phát/tải.
player.getBytesLoaded():Number- Trả về giá trị của số byte đã tải hiện tại của video đang được phát/tải.
player.getBytesTotal():Number- Trả về giá trị của tổng số byte đã tải của video hiện được bật/tắt.
player.getCurrentTime():Number- Trả về vị trí hiện tại theo thời gian của video hiện được bật/tắt.
player.getDuration():Number- Trả về thời lượng hiện tại của video đang được phát/tải.
player.getStartBytes():Number- Trả về số byte bắt đầu của video đang được phát/tải.
player.setVolume(newVolume:Number):void- Đặt âm lượng của video đang được phát/tải.
player.getVolume():Number- Trả về âm lượng hiện tại của video hiện được bật/tắt.
player.mute():void- Lưu trữ âm lượng hiện tại và thay đổi âm lượng của video đang được phát/tải thành 0.
player.unmute():void- Trả về âm lượng của video đang được phát/tải về về giá trị được lưu trữ gần đây nhất khi bị tắt tiếng.
player.getEmbedCode():String- Trả về mã nhúng hiện tại trên YouTube của video hiện được bật/tắt.
player.getVideoUrl():String- Trả về URL video hiện tại trên YouTube của video đang được phát/tải.
Sự kiện
YouTubeLoaderEvent.LOADED- Được kích hoạt sau khi Trình phát Chromeless hoàn tất quá trình tải và sẵn sàng chấp nhận các lệnh gọi hoạt động.
YouTubeLoaderEvent.STATE_CHANGE- Được kích hoạt mỗi khi trạng thái của người chơi thay đổi. Lớp YouTubeLoader dịch các số API JavaScript thành các giá trị chuỗi liên quan, lớp YouTubeLoaderEvent lưu trữ sự kiện hiện tại trong một biến có tên là
state. Các giá trị có thể là chưa bắt đầu, đã kết thúc, đang phát, tạm dừng, đang lưu vào bộ đệm, video đã được đánh dấu. Khi được tải lần đầu, tệp SWF sẽ phát đi một sự kiện chưa bắt đầu. Khi video được đánh dấu và sẵn sàng phát, video đó sẽ phát đi một sự kiện video được đánh dấu. YouTubeLoaderEvent.IO_ERROR- Kích hoạt khi xảy ra lỗi trong trình phát. Có thể có hai mã lỗi: 100 được truyền khi không tìm thấy video được yêu cầu. Điều này xảy ra khi video đã bị xoá (vì bất kỳ lý do gì) hoặc bị đánh dấu là riêng tư. Mã 101 được truyền khi video được yêu cầu không cho phép phát trong trình phát được nhúng.
Ghi chú trên bản minh hoạ
Để minh hoạ, chúng tôi muốn đưa các trường biểu mẫu XHTML, nút và giao diện người dùng hiển thị vào bên dưới Trình bao bọc ActionScript 3 được nhúng. Để có tệp swf VÀ bản cập nhật XHTML cùng một lúc, chúng ta phải đưa hai dòng mã vào tệp JavaScript "youTubeLoader.js" nằm trong "deploy/_assets/js/" (Hình 3). Bạn sẽ muốn xoá hai dòng sau [69, 79] khi tích hợp tệp này vào dự án:
//------------------------------------
// 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)
}
Tệp trình diễn và thư viện ActionScript được bao gồm là phần mềm miễn phí: bạn có thể phân phối lại và/hoặc sửa đổi tệp này theo các điều khoản của Giấy phép công cộng GNU Lesser. Những tệp này được phân phối với hy vọng sẽ hữu ích nhưng không có bất kỳ sự bảo đảm nào.
Kết luận
Bài viết này, bản minh hoạ và tệp nguồn sẽ cung cấp cho bạn thông tin tổng quan chắc chắn về một giải pháp tương đối đơn giản và đáng tin cậy để tích hợp API YouTube và trình phát được nhúng vào môi trường ActionScript 3 bằng cách sử dụng thư viện trình bao bọc mà chúng tôi đã phát triển cho các dự án của riêng mình. Vì tôi đã nhận xét nhiều đoạn mã, nên việc khám phá và sử dụng lại các thư viện sẽ khá đơn giản. Không phải lúc nào cũng có giới hạn và chúng tôi luôn có thể cải thiện, tái cấu trúc và nâng cao chất lượng. Nếu bạn có ý kiến về vấn đề này, hãy liên hệ với tôi.
Tiểu sử tác giả
Matthew Richmond tự hào có 14 năm kinh nghiệm thiết kế, phát triển và kiến trúc tương tác. Khi không ở trong studio, anh có thể dạy các kỹ thuật chụp ảnh/ minh hoạ kỹ thuật số và ActionScript nâng cao tại Trường Nghệ thuật thị giác. Matthew là cộng sự sáng lập kiêm nhà thiết kế tại choppingblock.com.