Đây là bài viết của một nhà phát triển bên ngoài. Nhóm Công cụ và API YouTube cảm ơn anh Matthew đã dành thời gian và kinh nghiệm của mình.
Matthew Bluehost, The Chopped Block, Inc.
Tháng 10 năm 2008
- Giới thiệu
- Tài nguyên quan trọng
- Đào sâu
- Tương tác với người chơi
- Các thao tác có thể thực hiện
- Ghi chú về 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ề một Trình bao bọc ActionScript 3.0 đáng tin cậy cho Trình phát YouTube không có Chrome. Trình bao bọc tận dụng lớp ExternalInterface của MRSS và API JavaScript của YouTube.
Công cụ Trình phát YouTube và Trình phát không cần Chrome của Google giúp các nhà thiết kế/nhà phát triển nhanh chóng và dễ dàng tích hợp sức mạnh của YouTube vào các dự án trực tuyến của họ. Đây là phương pháp lý tưởng cho 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 những khách hàng muốn có trải nghiệm người dùng tuỳ chỉnh mà không bị tách biệt khỏi đối tượng YouYube.
Hình 1: Ảnh chụp màn hình trình bao bọc MRSS 3.0
API Flash và các trình phát được nhúng của YouTube được viết nội dung và hoạt động khá tốt với MRSS 2.0; tuy nhiên, nếu dự án của bạn là MRSS 3.0, việc tích hợp liền mạch sẽ trở nên phức tạp hơn một chút. Mặc dù có thể dễ dàng tải trình phát BSF 2.0 vào swf của Slack 3.0, bạn không thể giao tiếp trực tiếp hoặc chuyển bất kỳ lệnh gọi chức năng nào vào trình phát đã tải. Điều này phức tạp hơn nữa vì tệp swf đến từ máy chủ của YourTube đang tải video vào chính tệp đó. Trình bao bọc của chúng ta cần nhận thức đầy đủ về thực tế đó và phản ứng tương ứng. May mắn thay, ngôn ngữ MRSS chứa hai giải pháp hợp lý để kết nối lại các phần lồng ghép nhưng chưa bị ngắt kết nối này, lớp LocalConnection hoặc lớp InterInterface. Bản minh họa này sẽ tập trung vào chế độ xem sau vì ExternalInterface hoạt động liền mạch với API JavaScript được ghi chép rõ ràng và do đó, hoạt động tốt với bất kỳ nội dung nào khác trong trang XHTML.
Tài nguyên quan trọng
Trước khi chúng ta bắt đầu, dưới đây là danh sách các tài nguyên và tệp có liên quan mà bạn có thể sử dụng. Nhiều chủ đề trong bài viết này trình bày chi tiết hơn trong các đường liên kết dưới đây.
- Xem trình bao bọc IDFA 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 học Intergiao diện bên ngoài của Adobe
- Nhúng Flash Flash FlashObject
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 CTA
Trình bao bọc BSF 3.0 về cơ bản bao gồm hai phần được kết nối với nhau, tệp lớp BSF 3.0 nằm trong src/choppedblock/video/ (Hình 2) và tệp JavaScript 'youTubeLoader.js' nằm trong expand/_assets/js/ (Hình 3). Tệp nguồn Flash/Flex của bạn sẽ tạo một phiên bản của lớp YouTubeLoader BSF; trang XHTML của bạn nhúng tệp flash và đăng ký tệp đó với các hàm trong tệp JavaScript youTubeLoader. Điều quan trọng cần hiểu là từ đây, mọi thứ mà YouTubeLoader thực hiện trong tệp flash đều được kiểm soát thông qua các hàm JavaScript.
Do tất cả chức năng trong Flash đều được kiểm soát thông qua JavaScript API, bạn sẽ KHÔNG thể tải bất kỳ nội dung nào của YouTube trong trình phát 'Thử nghiệm phim' của Flash. Mã này chỉ hoạt động khi được nhúng vào trang XHTML và được kết nối đúng cách với các hàm JavaScript youTubeLoader.
Lưu ý: Để kiểm tra bất kỳ lệnh gọi nào trong số các lệnh gọi 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 Flash Player vì trình phát Flash hạn chế các lệnh gọi giữa các tệp cục bộ và Internet.
Tạo đối tượng YouTubeLoader
Trước khi có thể tạo một bản sao 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 (xem Hình 2) hoặc được xác định với Classpath dự án. Sau đó, bạn có thể nhập các tệp gói:
import choppingblock.video.*;
Thao tác này cho phép tệp MRSS của bạn truy cập vào các lớp 'YouTubeLoader.as' và 'YouTubeLoaderEvent.as'. Giờ đây, bạn đã rõ ràng để 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 đúng chỗ và được 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 đưa ra yêu cầu.
Nhúng swf và kết nối youTubeLoader JavaScript
Bạn sẽ không thể tải nội dung từ YouTube thành công cho đến khi tệp swf của bạn được nhúng vào tệp XHTML và được kết nối với JavaScript YouTube. Bạn nên sử dụng SWFObject để nhúng mọi trình phát sẽ được truy cập bằng API JavaScript. Điều 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 (API JavaScript yêu cầu Flash Player 8 trở lên) và cũng sẽ bỏ qua hộp 'Nhấp để kích hoạt đ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 đối tượng 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 swf của TCF 3.0 với API JavaScript được bật, rồi sau đó chuyển tham chiếu đến swf của bạn đến API 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>
Tham số allowScriptAccess trong mã cần thiết để cho phép trình phát SWF gọi các hàm trên trang chứa HTML, 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à mã nhận dạng của đối tượng nhúng — trong trường hợp này là youtubewrapper. Mã nhận dạng này là những gì tệp youTubeLoader.js sẽ sử dụng để tham chiếu đến trình phát bằng cách sử dụng getElementById().
swfobject.embedSWF sẽ tải trình phát trên YouTube rồi 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 SWF. Xin lưu ý rằng chúng tôi đã thêm các tham sốenablejsapivàplayerapiidvào URL YouTube SWF thông thường để bật lệnh gọi API JavaScript.replaceElemIdStr– Đây là mã HTML DIV để thay thế bằng nội dung nhúng. Trong ví dụ trên, thuộc tính đó 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 bắt buộc tối thiểu để người dùng xem được nội dung. Trong trường hợp này, bạn cần có phiên bản 8 trở lên. Nếu người dùng không có 8 trở lên, họ sẽ thấy dòng văn bản mặc định trong HTML DIV.xiSwfUrlStr– (Không bắt buộc) Chỉ định URL của SWF cài đặt nhanh. Không được sử dụng trong ví dụ này.flashVarsObj– (Không bắt buộc) Chỉ định FlashVars của bạn trong các cặp name:value. Không được sử dụng trong ví dụ này.parObj– (Không bắt buộ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) Thuộc tính cho đối tượng nhúng. Trong trường hợp này, chúng ta đã đặt giá trị nhận dạng thànhmyytplayer.
Xem tài liệu SWFObject để được giải thích thêm.
SWFID ≡ sẽ lưu trữ 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 swf.
SWFID ≡ "youtubewrapper"
Tại thời điểm này, bạn sẽ có thể kiểm thử thành công dự án của mình. Đối tượng YouTubeLoader phải tải trình phát Chromeless và trình xử lý sự kiện YouTubeLoaderEvent.LOADED phải được gọi thành công. 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ì cách tiếp cận này để tạo một Trình bao bọc Kotlin 3.0 cho trình phát Chromeless sử dụng lớp ExternalInterface của IDFA, nên giờ đây chúng ta có thể sử dụng bất kỳ Hoạt động nào trong API Trình phát JavaScript của YouTube để kiểm soát trình phát đã tải. Nếu bạn tìm trong tệp JavaScript 'youTubeLoader.js' nằm trong expand/_assets/js/ (Hình 3), bạn sẽ thấy nó chứa hầu hết các chức năng 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 đặt đú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 Kotlin 3.0 cho Trình phát không Chrome là cung cấp khả năng tương tác liền mạch với API YouTube từ trong dự án Flash/Flex TCF 3.0, chúng tôi đã thêm các phương thức công khai chính xác vào tệp lớp 'YouTubeLoader.as' nằm trong src/choppedblock/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 tương tự trực tiếp đến YouTubeLoader Object trong Flash/Flex. Nếu bạn tìm 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...
Các phương thức MRSS sử dụng lớp ExternalInterface để chỉ gọi hàm thích hợp trong API JavaScript.
Yêu cầu video
Giờ đây, bạn có thể yêu cầu video từ trong tệp MRSS 3.0 bằng cách gọi các hàm sử dụng tài liệu tham khảo về 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 của mình. Chẳng hạn như sau:
// 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ư sau:
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ể tùy ý 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ư sau:
<a href="javascript:loadVideoById('u1zgFlCw8Aw')">Play</a>
Thực hiện cuộc gọi bổ sung
Các lệnh gọi bổ sung hoạt động giống hệt như Yêu cầu video; từ trong MRSS 3, bạn chỉ cần gọi các phương thức bằng cách sử dụng tệp tham chiếu trình phát. Danh sách đầy đủ các phương thức có sẵn được cung cấp bên dưới.
Đăng ký tham gia sự kiện
Đăng ký các sự kiện bằng cách thêm trình nghe sự kiện vào tham chiếu của 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ư sau:
// assuming that '_youTubeLoader' is a reference to your YouTubeLoader object _youTubeLoader.addEventListener(YouTubeLoaderEvent.STATE_CHANGE, youTubePlayerStateChangeHandler);
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ư sau:
private function youTubePlayerStateChangeHandler (event:YouTubeLoaderEvent):void{
//trace("YouTubeIntegrationDemo: youTubePlayerStateChangeHandler");
_stateField.text = event.state;
};
Toán tử có sẵn
Để gọi các phương thức API YouTubePlayer, trước tiên bạn phải tạo một bản sao của lớp YouTubePlayer trong tệp MRSS và lưu trữ tệp 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.
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 cụ thể.
player.clearVideo():void- Xoá video hiện đã được chỉ dẫn/tải.
player.setSize(w:Number, h:Number):void- Đặt kích thước của phiên bản YouTubePlayer.
player.play():void- Phát video đang báo hiệu/tải.
player.pause():void- Tạm dừng video đang xem/đã tải.
player.stop():void- Dừng video hiện đang được chỉ dẫn/tải.
player.seekTo(seconds:Number):void- Tìm thời gian đã chỉ định trong video đang xem/đã tải.
player.getPlayerState():String- Trả về trạng thái hiện tại của video đang được báo cáo/tải.
player.getBytesLoaded():Number- Trả về giá trị của các byte hiện đang tải của video đang được báo cáo/tải.
player.getBytesTotal():Number- Trả về giá trị của tổng số byte được tải của video đang được báo cáo/tải.
player.getCurrentTime():Number- Trả về vị trí hiện tại của video đang tải/đã tải.
player.getDuration():Number- Trả về thời lượng hiện tại của video đang được báo cáo/tải.
player.getStartBytes():Number- Trả về số byte bắt đầu của video đang được báo cáo/tải.
player.setVolume(newVolume:Number):void- Đặt âm lượng của video hiện đang báo hiệu/tải.
player.getVolume():Number- Trả về âm lượng hiện tại của video đang được báo cáo/tải.
player.mute():void- Lưu trữ âm lượng hiện tại và thay đổi âm lượng của video hiện đang được báo hiệu/tải thành 0.
player.unmute():void- Trả về âm lượng của video hiện đang được báo hiệu/đã tải về giá trị được lưu trữ gần đây nhất khi được tắt tiếng.
player.getEmbedCode():String- Trả về mã nhúng YouTube hiện tại của video đang được báo cáo/tải.
player.getVideoUrl():String- Trả về url video hiện tại của video hiện được báo hiệu/tải.
Sự kiện
YouTubeLoaderEvent.LOADED- Được kích hoạt sau khi Trình phát không có Chrome 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 bất cứ khi nào trạng thái của người chơi thay đổi. Lớp YouTubeLoader dịch các số của API JavaScript sang 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 tên là
state. Các giá trị có thể là chưa bắt đầu, đã kết thúc, đang phát, đang tạm dừng, đang lưu vào bộ đệm, video dừng. Trong lúc SWF được tải lần đầu, ứng dụng sẽ phát một sự kiện chưa bắt đầu. Khi video được báo hiệu và sẵn sàng phát, video sẽ phát một sự kiện theo tín hiệu video. YouTubeLoaderEvent.IO_ERROR- Kích hoạt khi xảy ra lỗi trong trình phát. Có hai mã lỗi: 100 được phát khi không tìm thấy video. Điều này xảy ra khi một video đã bị xóa (vì bất kỳ lý do gì) hoặc video đã được đánh dấu là riêng tư. 101 được phát khi video được yêu cầu không cho phép phát trong trình phát được nhúng.
Ghi chú về bản minh hoạ
Để minh hoạ, chúng tôi muốn bao gồm các trường biểu mẫu XHTML, các nút và giao diện người dùng hiển thị bên dưới Trình bao bọc IDFA 3 được nhúng. Để có tệp swf VÀ cập nhật XHTML cùng lúc, chúng ta phải đưa vào hai dòng mã trong tệp JavaScript 'youTubeLoader.js' nằm trong 'deploy/_assets/js/' (Hình 3). Bạn sẽ muốn xóa 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 minh hoạ và thư viện MRSS đi kè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 theo các điều khoản của Giấy phép công cộng chung của GNU. Các tệp này được phân phối với hy vọng rằng thông tin này hữu ích nhưng không cần bảo hành.
Kết luận
Bài viết bản minh hoạ và tệp nguồn này 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à các trình phát được nhúng vào môi trường MRSS 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 về mã, nên việc khám phá và sử dụng lại các thư viện sẽ khá đơn giản. Nó không phải là không có giới hạn và luôn có khả năng cải tiến, tái cấu trúc và nâng cao. Nếu bạn có ý kiến về điều này, hãy liên hệ với tôi.
Tiểu sử tác giả
Matthew Micklitz tự hào có 14 năm kinh nghiệm về thiết kế, phát triển và kiến trúc có tính tương tác. Khi không ở trường, anh có thể tìm thấy những kỹ thuật chụp ảnh/minh hoạ kỹ thuật số và sử dụng các ngôn ngữ nâng cao MRSS tại Trường Nghệ thuật thị giác. Matthew là đối tác sáng lập và nhà thiết kế tại choppedblock.com.