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

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

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

• Введение
• Важные ресурсы
• Копаем
  • Обзор демо-версии Wrapper
  • Создание объекта YouTubeLoader
  • Встраивание SWF-файла и подключение JavaScript-кода YouTubeLoader
• Взаимодействие с игроком
  • Запрос видео
  • Выполнение дополнительных вызовов
  • Подписка на события
• Доступные операции
• Примечания к демо-версии
• Заключение

Введение

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

Инструменты YouTube Player от Google и Chromeless Player позволили дизайнерам и разработчикам быстро и легко интегрировать возможности 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. В этой демонстрации основное внимание будет уделено последнему, поскольку внешний интерфейс прекрасно работает с хорошо документированным API JavaScript и, следовательно, хорошо сочетается со всем остальным на странице XHTML.

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

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

• Просмотрите оболочку ActionScript 3.0 и загрузите исходные файлы.
• Официальный справочник по API YouTube JavaScript Player
• Документация по классу Adobe externalInterface
• Встраивание SWFObject в JavaScript Flash

Копаем

Обзор демо-версии Wrapper

Рисунок 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 контролируются через API JavaScript, вы НЕ сможете загружать какой-либо контент YouTube в проигрыватель Flash «Test Movie». Он будет работать только при внедрении в страницу XHTML и правильном подключении к функциям JavaScript youTubeLoader.

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

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

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

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 для встраивания любых проигрывателей, доступ к которым будет осуществляться с помощью API JavaScript. Это позволит вам определить версию 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, чтобы включить вызовы API JavaScript.
• replaceElemIdStr — это идентификатор HTML DIV, который необходимо заменить встраиваемым содержимым. В приведенном выше примере это ytapiplayer .
• widthStr — Ширина плеера.
• heightStr - Рост игрока.
• swfVersionStr — минимальная версия, необходимая пользователю для просмотра содержимого. В этом случае необходима версия 8 или выше. Если у пользователя нет 8 или выше, он увидит строку текста по умолчанию в HTML DIV.
• xiSwfUrlStr — (необязательно) Указывает URL-адрес SWF-файла экспресс-установки. В этом примере не используется.
• flashVarsObj — (необязательно) Указывает FlashVars в парах имя:значение. В этом примере не используется.
• parObj — (необязательно) Параметры объекта внедрения. В данном случае мы allowScriptAccess .
• AttObj — (необязательно) Атрибуты объекта внедрения. В данном случае мы установили идентификатор myytplayer .

Дополнительную информацию см. в документации SWFObject .

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

SWFID ≡ "youtubewrapper"

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

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

Поскольку этот подход к созданию оболочки ActionScript 3.0 для проигрывателя Chromeless Player использует класс ExternalInterface ActionScript, теперь мы можем использовать любые операции в API проигрывателя JavaScript YouTube для управления нашим загруженным проигрывателем. Если вы посмотрите на файл 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 используют класс ВнешнийИнтерфейс для простого вызова соответствующей функции в 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 преобразует номера API JavaScript в связанные с ними строковые значения, класс 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 являются бесплатным программным обеспечением: вы можете распространять его и/или изменять в соответствии с условиями Lesser General Public License GNU. Эти файлы распространяются в надежде, что они будут полезны, но без каких-либо гарантий.

Заключение

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

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

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