1

我有一个canvas元素绝对定位在相同尺寸的 Flash 对象上。我希望能够单击该canvas元素并将该事件(或者更准确地说,该事件的模仿)发送到下面的 Flash 对象。

我向 Flash 对象添加了一个事件侦听器,因此我知道该事件已成功分派给 Flash 对象。问题是 Flash 对象根本不会对其做出反应(例如,单击巨大的“播放”按钮区域不会播放视频)。

Flash 对象可以以这种方式对事件做出反应吗?DOM 中的 Flash 是否有什么特别之处,需要 JavaScript 事件委托以外的其他东西来激活来自它的响应?

<!DOCTYPE html>
<html lang="zh">
    <头部>
        <meta charset="utf-8"/>
        <title>将来自 DOM 元素的点击事件委托给底层 Flash 对象</title>
    </head>
    <正文>
        <object type="application/x-shockwave-flash" name="StrobeMediaPlayback" data="assets/StrobeMediaPlayback.swf" width="640" height="480" id="StrobeMediaPlayback" style="visibility: visible; position :绝对;顶部:0;左侧:0;">
            <param name="allowFullScreen" value="true">
            <param name="wmode" value="透明">
            <param name="flashvars" value="src=http://mediapm.edgesuite.net/strobe/content/test/AFaerysTale_sylviaApostol_640_500_short.flv&autoPlay=false&verbose=true&controlBarAutoHide=false&controlBarPosition=bottom&poster=assets/images/StrobeMediaPlayback.png">
        </对象>
        <script type="text/javascript">
            var smp = document.getElementById('StrobeMediaPlayback');
            smp.addEventListener('click', function (e) { console.log('CLICK'); }, false);
            添加画布();
            
            函数 addCanvas() {
                canvas = document.createElement('canvas');
                画布.宽度 = 640;
                画布.高度 = 480;
                canvas.style.position = '绝对';
                canvas.style.top = '0px';
                canvas.style.left = '0px';
                canvas.addEventListener('click', function (e) { evt(smp, e); }, false);
                ctx = canvas.getContext('2d');
                document.body.appendChild(canvas);
            }
            
            函数 evt(el, e) {
                var event = document.createEvent('HTMLEvents');
                event.initEvent(e.type, true, true);
                for (var key in e) {
                    事件[键] = e[键];
                }
                el.dispatchEvent(事件);
            }
        </脚本>
    </正文>
</html>
4

1 回答 1

1

使用ExternalInterface在 SWF 和 DOM 之间进行通信。

您可以在 SWF 中创建一个函数,然后使用以下方法从 JS 调用该 ActionScript 函数:

ExternalInterface.call( functionInsideYourSWF )

在您的情况下,当有人单击您的画布元素时,您将调用您的 ActionScript 函数,然后使用您在 ActionScript 函数中定义的任何内容在内部使用 Flash 处理该单击事件,例如播放视频。

于 2012-06-15T21:44:41.753 回答