Временное решение Flash не разрешает полноэкранный режим из Javascript

Question

Вопрос

У меня есть хромированные кнопки видеоплеера, разработанные с использованием HTML / CSS. Полноэкранная кнопка должна указывать Flash на полный экран, но Adobe запрещает это взаимодействие Javascript-to-Actionscript. Что умный взломать, чтобы обойти это?

Фон

Я делаю веб-видеоплеер, который поддерживает множество плагинов - Flash, VLC, HTML5, iPhone QuickTime и т. Д. Я хотел бы, чтобы все эти проигрыватели использовали одни и те же хромированные кнопки - воспроизведение, пауза, отключение звука, слайдер громкости , выбор разрешения и полный экран. Эти кнопки выложены с помощью HTML / CSS.

 ____________      ____________      ____________
|           |     |           |     |           |
|   Flash   |     |   VLC     |     |   HTML5   |       ...
|           |     |           |     |           |
-------------     -------------     -------------
[A][B][C][D]      [A][B][C][D]      [A][B][C][D]

Все плагины, с которыми я имею дело, позволяют Javascript контролировать плагин. Вот пример того, как вы можете получить элемент HTML для взаимодействия с видео HTML5. Код почти идентичен при взаимодействии с другими плагинами. Единственное, что меняется, - это фактическое имя вызываемой функции.

// Using Prototype JS library
$('playButtonId').observe(
  'click',
  function(event) {
    $('html5Id').play();
  }
);

Проблема возникает для полноэкранного режима во Flash. В Actionscript 3.0 вы должны сделать это, чтобы предоставить полноэкранный обратный вызов Javascript:

package {
 import flash.external.*

 private var theStage:Stage;

 public class Player {

  public function Player(stageReference) {
   this.theStage = stageReference;
   ExternalInterface.addCallback("fullScreen", this.fullScreen);
  }

  private function fullScreen():void {
   this.theStage.displayState = StageDisplayState.FULL_SCREEN;
  }
 }
}

Когда Javascript вызывает $('flashPlayerId').fullScreen();, ничего не происходит, потому что Adobe требует, чтобы событие в полноэкранном режиме вызывалось щелчком внутри SWF. Это сделано для того, чтобы хакеры не могли писать вредоносные сайты, которые захватывают экран пользователя, и не инициируют его.

Текущий взлом

В настоящее время я воссоздаю все хромированные кнопки во Flash для поддержки полноэкранного режима. Мне пришлось импортировать всю мою графику во Flash и конвертировать весь Javascript в Actionscript.

 ____________      ____________      ____________
|           |     |           |     |           |
|   Flash   |     |   VLC     |     |   HTML5   |       ...
|           |     |           |     |           |
|           |     -------------     -------------
| A  B  C D |      [A][B][C][D]      [A][B][C][D]
-------------

Это причинило мне много боли и мучений. Всякий раз, когда мне нужно внести изменения, я обновляю HTML и JS. Это изменение отражено в VLC, HTML5 и прочих плеерах. Но поскольку Flash не использует одни и те же кнопки HTML Chrome, я должен продублировать изменения во Flash / AS. Поэтому я ищу лучшее решение, которое уменьшает количество дублирующегося кода. Это не должно быть стилистически чисто. Я просто хочу легкой ремонтопригодности.

Answer 1

Просто дайте флэш-фильму непрозрачность 0,1% (вам нужно будет использовать wmode) и поместите его прямо над кнопками HTML. Пользователь нажимает на вспышку, но видит HTML. Код Actionscript просто говорит игроку перейти в полноэкранный режим, а затем вызывает некоторый JavaScript, используя ExternalInterface. Баунти, пожалуйста!

Answer 2

Вы можете НЕ запускать полноэкранный режим без взаимодействия с пользователем во флэш-компоненте IE: щелчок мышью по кнопке.
Несмотря на то, что у вас есть событие click в JavaScript, оно не будет работать, так как это событие click не будет в стеке флэш-памяти.

[EDIT]
Один из способов обойти это - создать приложение на flex и использовать CSS для стилизации кнопок.
Еще одна работа вокруг. Создайте макет SWF в Flex, используя CSS для стилизации кнопок, и загрузите и поместите в него другой SWF.
Чтобы обойти это, нужно немного настроить, но затем, когда вы захотите изменить кнопки, вам просто нужно изменить CSS, например, источник изображения или цвета, или что вы меняете.

Answer 3

Вы можете использовать Haxe , чтобы создать одну единственную кодовую базу, которая будет переводиться как в JavaScript, так и в ActionScript.

Это значит, конечно, что вам также придется выучить Хейкс.

[EDIT]

Более простым подходом может быть создание листа спрайта для всех ваших изображений. Таким образом, вам просто нужно импортировать лист в css и установить правильное положение области просмотра листа. И тогда вы также можете динамически загружать лист спрайта во флэш-память.

Единственное, о чем вам следовало бы позаботиться, это правильное расположение изображений на вашем листе спрайта.