Эта страница переведена с помощью Cloud Translation API.

Оболочка ActionScript 3.0 для Chromeless Player

Эта статья была написана и отправлена внешним разработчиком. Команда API и инструментов YouTube благодарит Мэтью Ричмонда за его время и опыт.

Мэтью Ричмонд, The Chopping Block, Inc.
октябрь 2008 г.

Введение
Важные ресурсы
копаться
Взаимодействие с игроком
Доступные операции
Примечания к демонстрации
Заключение

Введение

В этой статье я представлю и кратко опишу надежную оболочку ActionScript 3.0 для Chromeless YouTube Player. Оболочка использует класс ExternalInterface ActionScript и JavaScript API YouTube.

YouTube Player Tools и Chromeless Player от Google позволили дизайнерам и разработчикам быстро и легко интегрировать возможности YouTube в свои онлайн-проекты. Этот подход идеально подходит для небольших проектов с фиксированным бюджетом, которые не позволяют размещать видео, а также для крупномасштабных проектов для клиентов, которым нужен индивидуальный подход к конечному пользователю, не дистанцирующийся от своей аудитории YouYube.

Рис. 1. Скриншот оболочки ActionScript 3.0

Flash API YouTube и встроенные проигрыватели написаны на ActionScript 2.0 и довольно хорошо работают с ним; однако, если ваш проект — ActionScript 3.0, плавная интеграция становится немного сложнее. Хотя загрузить проигрыватели ActionScript 2.0 в SWF-файл ActionScript 3.0 несложно, вы не можете напрямую взаимодействовать или передавать какие-либо функциональные вызовы в загруженный проигрыватель. Это еще более усложняется тем, что swf-файл, поступающий с серверов YourTube, загружает видео в себя. Наша оболочка должна полностью осознавать этот факт и реагировать соответствующим образом. К счастью, в языке ActionScript есть два возможных обходных пути для повторного соединения этих вложенных, но несвязанных частей: класс LocalConnection или класс ExternalInterface. В этой демонстрации основное внимание будет уделено последнему, потому что ExternalInterface без проблем работает с хорошо документированным JavaScript API и, следовательно, хорошо сочетается со всем остальным на странице XHTML.

Важные ресурсы

Прежде чем мы начнем, вот список доступных вам связанных ресурсов и файлов. Многие из тем, обсуждаемых в этой статье, более подробно описаны по ссылкам ниже.

копаться

Обзор демонстрационной версии оболочки

Рисунок 3: Файл Javascript

Рисунок 2: Файлы классов ActionScript

Оболочка ActionScript 3.0 состоит из двух взаимосвязанных частей: файлов классов ActionScript 3.0, расположенных в папке src/choppingblock/video/ (рис. 2), и файла JavaScript youTubeLoader.js, расположенного в deploy/_assets/js/ (рис. 3). . Ваш исходный файл Flash/Flex создаст экземпляр класса ActionScript YouTubeLoader; ваша XHTML-страница встраивает флэш-файл и регистрирует его с помощью функций в файле JavaScript YouTubeLoader. Очень важно понимать, что отсюда все, что YouTubeLoader делает во флеш-файле, управляется с помощью функций JavaScript.

Поскольку все функции Flash контролируются через JavaScript API, вы НЕ сможете загружать какой-либо контент YouTube в проигрывателе Flash «Test Movie». Он будет работать только в том случае, если он встроен в страницу XHTML и правильно подключен к функциям JavaScript YouTubeLoader.

Примечание . Чтобы протестировать любой из этих вызовов, необходимо запустить файл на веб-сервере или изменить параметры безопасности проигрывателя Flash Player , поскольку проигрыватель Flash ограничивает вызовы между локальными файлами и Интернетом.

Создание объекта YouTubeLoader

Прежде чем вы сможете создать экземпляр объекта YouTubeLoader в своем проекте Flash/Flex, вы сначала должны убедиться, что пакет (папка) с необходимыми файлами находится в том же каталоге, что и ваш проект (см. рис. 2), или определен с вашими проектами Classpath. . Затем вы можете импортировать файлы пакета:

import choppingblock.video.*;

Это позволит вашему файлу ActionScript получить доступ к классам «YouTubeLoader.as» и «YouTubeLoaderEvent.as». Теперь вы можете создать экземпляр класса YouTubeLoader и необходимые прослушиватели событий:

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

Теперь, если файл JavaScript на месте и правильно подключен, youTubePlayerLoadedHandler должен быть успешно вызван, и мы готовы начать делать запросы.

Встраивание swf и подключение JavaScript для youTubeLoader

Вы не сможете успешно загружать контент с YouTube до тех пор, пока ваш swf-файл не будет встроен в файл XHTML и не подключен к JavaScript-коду youTubeLoader. Мы рекомендуем использовать SWFObject для встраивания любых проигрывателей, доступ к которым будет осуществляться через JavaScript API. Это позволит вам определить версию Flash Player конечного пользователя (для API JavaScript требуется Flash Player 8 или выше), а также избавит вас от поля «Щелкните, чтобы активировать этот элемент управления» при использовании Internet Explorer для просмотра проигрывателя.

В части <head> вашего XHTML-файла вы соединяете файлы swfobject и youTubeLoader:

<script type="text/javascript" src="_assets/js/swfobject.js"></script>
<script type="text/javascript" src="_assets/js/youTubeLoader.js"></script>

Ниже приведен пример использования SWFObject для встраивания swf-файла ActionScript 3.0 с включенным API JavaScript, а затем передачи ссылки на swf-файл в 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>

Параметр allowScriptAccess в коде необходим для того, чтобы SWF-файл проигрывателя мог вызывать функции на содержащей HTML-странице, поскольку проигрыватель Chromeless Player размещается в домене, отличном от домена XHTML-страницы.

Единственный атрибут, который мы передаем, — это идентификатор объекта встраивания — в данном случае youtubewrapper. Этот идентификатор будет использоваться файлом youTubeLoader.js для получения ссылки на проигрыватель с помощью getElementById().

swfobject.embedSWF загрузит проигрыватель с YouTube и встроит его на вашу страницу.

swfobject.embedSWF(swfUrlStr, replaceElemIdStr, widthStr, heightStr, swfVersionStr, xiSwfUrlStr, flashvarsObj, parObj, attObj)

swfUrlStr — это URL-адрес SWF. Обратите внимание, что мы добавили параметры enablejsapi и playerapiid к обычному URL-адресу YouTube SWF, чтобы разрешить вызовы JavaScript API.
replaceElemIdStr — это идентификатор HTML DIV, который нужно заменить встроенным содержимым. В приведенном выше примере это ytapiplayer .
widthStr - Ширина плеера.
heightStr - Рост игрока.
swfVersionStr — минимальная версия, необходимая пользователю для просмотра содержимого. В этом случае нужна версия 8 или выше. Если у пользователя нет 8 или выше, он увидит строку текста по умолчанию в HTML DIV.
xiSwfUrlStr — (необязательно) указывает URL-адрес экспресс-установки SWF. В данном примере не используется.
flashVarsObj — (необязательно) указывает ваши FlashVars в парах имя:значение. В данном примере не используется.
parObj — (необязательно) параметры для встроенного объекта. В данном случае мы установили allowScriptAccess .
AttObj — (необязательно) атрибуты встроенного объекта. В данном случае мы установили идентификатор myytplayer .

Дополнительные пояснения см. в документации по SWFObject .

SWFID ≡ будет хранить ссылку на идентификатор встраиваемого объекта для использования JavaScript API. Вы должны использовать тот же идентификатор встраиваемого объекта, который вы указали для SWF.

SWFID ≡ "youtubewrapper"

На этом этапе вы должны быть в состоянии успешно протестировать свой проект. Объект YouTubeLoader должен загрузить Chromeless Player, а обработчик событий YouTubeLoaderEvent.LOADED должен быть успешно вызван. Теперь мы готовы сделать запрос видео и взаимодействовать с объектом YouTubeLoader.

Взаимодействие с игроком

Поскольку этот подход к созданию оболочки ActionScript 3.0 для проигрывателя Chromeless использует класс ExternalInterface ActionScript, теперь мы можем использовать любые операции в API проигрывателя YouTube JavaScript для управления нашим загруженным проигрывателем. Если вы заглянете в файл JavaScript youTubeLoader.js, расположенный в deploy/_assets/js/ (рис. 3), вы обнаружите, что он содержит большинство доступных функций. Каждая рабочая функция перед выполнением сначала сверяется с функцией checkObj , чтобы убедиться, что переменная SWFID была правильно установлена.

//------------------------------------
// 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...

Учитывая, что конечной целью нашей оболочки ActionScript 3.0 для проигрывателя Chromeless Player является беспрепятственное взаимодействие с API YouTube из проекта ActionScript 3.0 Flash/Flex, мы добавили точно такие же общедоступные методы в класс «YouTubeLoader.as». файл, расположенный в папке src/choppingblock/video/ (рис. 2). Это означает, что вы можете вызывать точно такие же операции непосредственно с объектом YouTubeLoader в Flash/Flex. Если вы посмотрите в файл класса, вы найдете:

// ------------------------------------
// 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...

Методы ActionScript используют класс ExternalInterface для простого вызова соответствующей функции в API JavaScript.

Запрос видео

Теперь вы можете запросить видео из файла ActionScript 3.0, вызвав функции с помощью ссылки на проигрыватель. Например, если вы хотите воспроизвести видео, когда пользователь нажимает кнопку, вы должны добавить к своей кнопке прослушиватель событий MouseEvent.CLICK. Так:

// assuming your button was called 'myButton'
myButton.addEventListener(MouseEvent.CLICK, youtubeLoadVideoHandler);

И создайте метод обработчика событий для обработки запроса. Так:

private function youtubeLoadVideoHandler (event:MouseEvent):void{
  
  // assuming that '_youTubeLoader' is a reference to your YouTubeLoader object
  _youTubeLoader.loadVideoById( "u1zgFlCw8Aw" );
};

Вне вашего файла Flash/Flex вы можете дополнительно запросить видео, напрямую вызвав соответствующую функцию JavaScript. Так:

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

Выполнение дополнительных вызовов

Дополнительные вызовы работают точно так же, как запрос видео ; из ActionScript 3 вы можете просто вызывать методы, используя ссылку на проигрыватель. Полный список доступных методов приведен ниже .

Подписка на события

Подпишитесь на события, добавив прослушиватель событий в ссылку на проигрыватель. Например, чтобы получать уведомления об изменении состояния проигрывателя, добавьте прослушиватель событий для YouTubeLoaderEvent.STATE_CHANGE . Так:

// assuming that '_youTubeLoader' is a reference to your YouTubeLoader object
_youTubeLoader.addEventListener(YouTubeLoaderEvent.STATE_CHANGE, youTubePlayerStateChangeHandler);

И создайте метод обработчика событий для обработки запроса. Так:


private function youTubePlayerStateChangeHandler (event:YouTubeLoaderEvent):void{
  //trace("YouTubeIntegrationDemo: youTubePlayerStateChangeHandler");
  
  _stateField.text = event.state;
};

Доступные операции

Для вызова методов API YouTubePlayer необходимо сначала создать экземпляр класса YouTubePlayer в файле ActionScript и сохранить ссылку на объект YouTubePlayer, которым вы хотите управлять. Это можно сделать, позвонив:

var _youTubeLoader:YouTubeLoader;
_youTubeLoader = new YouTubeLoader();

Публичные методы

player.loadVideoById(id:String, startSeconds:Number = 0):void: Загружает и воспроизводит видео на основе указанного идентификатора.
player.cueNewVideo(id:String, startSeconds:Number = 0):void: Загружает, но не воспроизводит автоматически видео на основе указанного идентификатора.
player.clearVideo():void: Очищает текущее выбранное/загруженное видео.
player.setSize(w:Number, h:Number):void: Устанавливает размер экземпляра YouTubePlayer.
player.play():void: Воспроизводит текущее выбранное/загруженное видео.
player.pause():void: Приостанавливает воспроизведение текущего/загруженного видео.
player.stop():void: Останавливает текущее выбранное/загруженное видео.
player.seekTo(seconds:Number):void: Переход к указанному времени в текущем заданном/загруженном видео.
player.getPlayerState():String: Возвращает текущее состояние текущего записанного/загруженного видео.
player.getBytesLoaded():Number: Возвращает значение текущих загруженных байтов текущего загруженного видео.
player.getBytesTotal():Number: Возвращает значение общего количества загруженных байтов текущего загруженного видео.
player.getCurrentTime():Number: Возвращает текущую позицию во времени текущего загруженного видео.
player.getDuration():Number: Возвращает текущую продолжительность текущего записанного/загруженного видео.
player.getStartBytes():Number: Возвращает начальные байты текущего записанного/загруженного видео.
player.setVolume(newVolume:Number):void: Устанавливает громкость текущего записанного/загружаемого видео.
player.getVolume():Number: Возвращает текущую громкость текущего записанного/загруженного видео.
player.mute():void: Сохраняет текущую громкость и изменяет громкость текущего записанного/загруженного видео на 0.
player.unmute():void: Возвращает громкость текущего записанного/загруженного видео к последнему сохраненному значению при отключении звука.
player.getEmbedCode():String: Возвращает текущий код встраивания YouTube для текущего заданного/загруженного видео.
player.getVideoUrl():String: Возвращает текущий URL-адрес видео YouTube для текущего загруженного видео.

События

YouTubeLoaderEvent.LOADED: Запускается после того, как Chromeless Player успешно завершил загрузку и готов принимать вызовы операций.
YouTubeLoaderEvent.STATE_CHANGE: Запускается всякий раз, когда изменяется состояние игрока. Класс YouTubeLoader переводит числа JavaScript API в соответствующие строковые значения, класс YouTubeLoaderEvent сохраняет текущее событие в переменной с именем state . Возможные значения: не начато, завершено, воспроизводится, приостановлено, буферизуется, воспроизводится видео. При первой загрузке SWF будет транслироваться незапущенное событие. Когда видео записано и готово к воспроизведению, оно будет транслировать событие с видеосигналом.
YouTubeLoaderEvent.IO_ERROR: Запускается при возникновении ошибки в плеере. Возможны два кода ошибки: 100 передается, когда запрошенное видео не найдено. Это происходит, когда видео было удалено (по любой причине) или оно было помечено как личное. 101 передается, когда запрошенное видео не позволяет воспроизводиться во встроенных проигрывателях.

Примечания к демонстрации

В демонстрационных целях мы хотели включить поля формы XHTML, кнопки и отображаемый пользовательский интерфейс под встроенной оболочкой ActionScript 3. Для одновременного обновления файла SWF И XHTML нам пришлось включить две строки кода в файл JavaScript «youTubeLoader.js», расположенный в папке «deploy/_assets/js/» (рис. 3). Вы захотите удалить следующие две строки [69, 79] при интеграции этого файла в свой проект:

//------------------------------------
// 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)
}

Демонстрационный файл и прилагаемые библиотеки ActionScript являются бесплатным программным обеспечением: вы можете распространять его и/или изменять в соответствии с условиями Стандартной общественной лицензии GNU Lesser. Эти файлы распространяются в надежде, что они будут полезны, но без каких-либо гарантий.

Заключение

Эта статья, демонстрационные и исходные файлы должны предоставить вам исчерпывающий обзор одного относительно простого и надежного решения для интеграции API YouTube и встроенных проигрывателей в среды ActionScript 3 с использованием библиотеки-оболочки, которую мы разработали для наших собственных проектов. Поскольку я прокомментировал большую часть кода, в идеале будет довольно просто исследовать и перепрофилировать библиотеки. Это не без ограничений, и всегда есть возможности для улучшения, рефакторинга и улучшения. Если у вас есть какие-либо мысли по этому поводу, не стесняйтесь обращаться ко мне.

Биография автора

Мэтью Ричмонд может похвастаться 14-летним опытом интерактивного дизайна, разработки и архитектуры. Когда он не в студии, он преподает технику цифровой иллюстрации/фотографии и продвинутый язык ActionScript в Школе визуальных искусств. Мэтью является партнером-основателем и дизайнером сайта Choppingblock.com .