【发布时间】:2011-09-07 08:19:22
【问题描述】:
问题
我有使用 HTML/CSS 设计的视频播放器 chrome 按钮。全屏按钮需要告诉 Flash 进入全屏状态,但 Adobe 禁止这种 Javascript 到 Actionscript 的交互。解决此问题的巧妙方法是什么?
背景
我正在制作一个基于网络的视频播放器,它支持许多插件 - Flash、VLC、HTML5、iPhone 的 Quicktime 等...我希望所有这些播放器共享相同的 chrome 按钮 - 播放、暂停、静音、音量滑块、分辨率选择器和全屏。这些按钮使用 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 中重新创建所有 chrome 按钮以支持全屏。我必须将所有图形导入 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 中的更改。所以我正在寻找一个更好的解决方案来减少重复代码的数量。它不必在风格上干净。我只想要易于维护。
【问题讨论】:
标签: javascript flash actionscript-3