webネタ

技術系ブログ。web系SE。1988。♂。@rhong_

AS3で動画を扱ったり、JSと連携したり

ActionScript3で動画に関するメモ

動画再生

動画を再生するには以下のいずれか。

  1. FLVPlaybackを使う。
  2. flexのspark.components.VideoPlayerを使う。
  3. Videoクラスなどを使い自前で作る。

1がスタンダード。

FLVPlayback

使い方

ウインドウ -> コンポーネント -> Videoを開く -> FLVPlaybackをステージに。

import fl.video.FLVPlayback;

var player = new FLVPlayback();
addChild(player);
player.source = "hoge.mp4";
player.autoPlay = true;

対応してる種類

デフォルトで用意されてるコンポーネント。flvと名前が付いてるが、mp4など色々いける。

http://help.adobe.com/ja_JP/ActionScript/3.0_UsingComponentsAS3/WS5b3ccc516d4fbf351e63e3d118a9c65b32-7fe9.html

Flash Player 9 Update 3 では、業界標準H.264 エンコーディングを利用する高解像度の MPEG-4 ビデオ形式がサポートされ、FLVPlayback コンポーネントの機能が向上しています。サポートされる形式は、MP4、M4A、MOV、MP4V、3GP および 3G2 です。

スキン

Macだと以下にスキンがある。同じ位置にflaもあるので自由にカスタマイズできる。

"/Applications/Adobe Flash CC/Adobe Flash CC.app/Contents/Common/Configuration/FLVPlayback Skins/MinimaSilverPlayBackSeekCounterVolMute.swf"

動画に字幕を付ける

字幕を付けるにはFLVPlaybackCaptioningが使える。

var captions = new FLVPlaybackCaptioning();
captions.autoLayout = false;
captions.flvPlayback = player_mc.player;
captions.source = "sample.xml";

残念なことxmlファイルを読み込んでしか使えない...。

xmlオブジェクトを読めるようにしてくれれば...。

JSとFlashの連携

連携に必要な設定

1. allowScriptAccessをalwaysに設定する必要がある

<object ... >
<param name="allowScriptAccess" value="always">
</object>

2. file://だとダメ

http://localhost/ とかでないと、動きません。

3. flashとjsが別ドメインの場合

flash.system.Security.allowDomain('example.com')

js -> flash

html

<object id="hoge" ...>

js

var swf = document.hoge || window.hoge;
swf.to_flash();

flash

if (ExternalInterface.available) {
  ExternalInterface.addCallback('to_flash', function() { test.text = 'receive it!'; });
}