ActionScript3と BEML (Brightcove Experience Markup Language) を使って、見ている動画を Twitter.com へつぶやくプレーヤを作ってみました。動いているプレーヤは ↓。Twitter アイコンをクリックすると動画の再生が一時停止し、Twitter へ投稿する新しいウィンドウにが開きます。
仕組みは簡単。ブラウザを使ってつぶやくインターフェース (http://twitter.com/home?status=xxxxxxxxxxxxx) をActionScript3 の navigateToURLを使って新しいブラウザのウィンドウに呼び出しています。この Twitter へつぶやきをポストする機能をコンポーネントとしてPostToTwitter.swf にし、ブライトコーブのプレーヤにロードしています。
手順
- BrightcovePlayerAPI.swc のダウンロード
- Twitter へ投稿するコンポーネント(PostToTwitter.swf)を作成
- BEML で PostToTwitter.swf を読み込むブライトコーブのプレーヤを作成
既にコンパイルされた SWF を使ってみたい場合は、1, 2 を飛ばして 3 へ進んで下さい。ソースコード、コンパイルされた PostToTwitter.swf コンポーネントはこちらからダウンロード出来ます。
1. 準備: BrightcovePlayerAPI.swc のダウンロード
ブライトコーブプレーヤが公開している Player APIを ActionScriptでより便利に使うために、Brightcove Player API SWC をダウンロードします。
PostToTwitter.swf はブライトコーブプレーヤにロードされるコンポーネントとして動作しています。プレーヤの持つオブジェクトや API を使って動画のタイトルやプレーヤへのURLリンクなどを取得しています。Brightcove Player API SWC には Player ActionScript API のインターフェースが含まれていますので、Flex Builder や Flash IDE を使用し、ActionScript のコーディングが楽になります。Flex, Flash 等のIDE を使っている場合は BrightcovePlayerAPI.swc ファイルをコンパイルのライブラリに含めます。
2. ActionScript クラス: Twitter へ投稿するコンポーネント(PostToTwitter.swf)を作成
PostToTwitter.swf がプレーヤにロードされた際に実行される初期化の手続きが簡単になります。initialize() メソッドが初期化のメソッドになるので、ここに最初に処理しておきたいタスクを記述します。PostToTwitter.swf では読み込んでいるプレーヤへの参照を取得し、そこからアイコンクリック時に動画の再生を一時停止させるためにVideoPlayerModule、動画へのリンクを取得する SocialModule オブジェクトへの参照を取得しています。クリックされるアイコン(twitter-logo.gif) をロードし、クリックイベントにタイするイベントハンドラを記述すればできあがり。
ソースコードをコンパイルし、PostToTwitter.swf ファイルをウェブサーバに公開します。
PostToTwitter.asソースコード
package
{
import com.brightcove.api.APIModules;
import com.brightcove.api.CustomModule;
import com.brightcove.api.events.EmbedCodeEvent;
import com.brightcove.api.modules.ExperienceModule;
import com.brightcove.api.modules.SocialModule;
import com.brightcove.api.modules.VideoPlayerModule;
import flash.display.DisplayObject;
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.net.URLRequest;
import flash.net.navigateToURL;
/**
* BEML の タグで読込むコンポーネント。Twitter への投稿機能&ボタンを表示
* 16x16 のアイコンをクリックするとTwitterのStatusとして、プレーヤへのリンクを投稿
*/
public class PostToTwitter extends CustomModule
{
// 表示用Iconの画像ロード
[Embed(source="./twitter-logo.gif")]
public var ptmCls:Class;
// コンスタント、クラス変数の宣言
internal static var _prefixUrl:String = "http://twitter.com/home?";
internal var _comment:String = "イマコレミテル";
internal var _socialModule:SocialModule = null;
internal var _videoPlayerModule:VideoPlayerModule = null;
/**
* コンストラクタ
*
* ロゴをオブジェクトとして内包し、自身へマウスクリックイベントを登録
*/
public function PostToTwitter()
{
var ptm:DisplayObject = new ptmCls();
ptm.width = 16;
ptm.height = 16;
var ptmHolder:Sprite = new Sprite();
ptmHolder.buttonMode = true;
ptmHolder.addChild(ptm);
ptmHolder.addEventListener(MouseEvent.CLICK, onMouseClick);
addChild(ptmHolder);
}
/**
* マウスクリックのイベントハンドラ
* 再生中の動画を停止後、Twitter へ投稿
*/
internal function onMouseClick(evt:MouseEvent):void {
if (_videoPlayerModule != null) {
_videoPlayerModule.pause(true);
}
postToSocialMedia();
}
/**
* Twitter へステータスメッセージを投稿するメソッド
* Twitter へのステータス投稿には下記URLを利用
* http://twitter.com/home?status=xxxxxxxxxxxxx
*/
internal function postToSocialMedia():void {
var linkURL:String = _socialModule.getLink();
var title:String = _videoPlayerModule.getCurrentVideo().displayName;
var shortDescription:String = _videoPlayerModule.getCurrentVideo().shortDescription;
var targetURL:String = _prefixUrl + 'status=';
if ( _comment ) {
targetURL += encodeURIComponent(_comment) + ' ';
}
targetURL += encodeURIComponent(linkURL);
navigateToURL(new URLRequest(targetURL), "_blank");
}
/**
* BEML の SWFLoader で読み込んだ際に自動的に実行される初期化メソッド
* クラスの中で使用する ExperienceModule, VideoPlayerModule, SocialModule への参照を取得
*/
override protected function initialize():void {
_videoPlayerModule = player.getModule(APIModules.VIDEO_PLAYER) as VideoPlayerModule;
_socialModule = player.getModule(APIModules.SOCIAL) as SocialModule;
// Player の設定パラメータを取得
var _experienceModule:ExperienceModule = player.getModule(APIModules.EXPERIENCE) as ExperienceModule;
var parameters:Object = _experienceModule.getStage().loaderInfo.parameters;
if ( parameters.comment != null ) {
_comment = parameters.comment;
}
}
}
}
3. BEML: BEML で PostToTwitter.swf を読み込むブライトコーブのプレーヤを作成
ブライトコーブのプレーヤで PostToTwitter.swf を読み込むようプレーヤのカスタマイズを行います。ブライトコーブのプレーヤは すべて BEML (Brightcove Experience Markup Language) という XML で記述されていますので、XML の要素や属性を変更することで、様々なカスタマイズを施すことが出来ます。
今回は、PostToTwitter.swf をプレーヤのメディアコントロール（再生ボタンやボリュームコントロールが並んでいる部分）に配置してみます。
PostToTwitter-player.xmlソースコード
<Runtime>
<Theme name="Deluxe" style="Light"/>
<Layout boxType="hbox" padding="3">
<VBox>
<VideoDisplay id="videoPlayer" showBack="true" includeFullscreenControls="true"/>
<MediaControls id="mediaControls" height="46">
<HBox width="450" height="12" x="10" y="5" gutter="21">
<Label width="31" height="11" vAlign="middle" hAlign="right" text="{format(videoPlayer.mediaPosition, SecondsTimecodeFormatter)}"/>
<VBox>
<Spacer height="1"/>
<Playhead id="playhead" mediaController="{videoPlayer}"/>
</VBox>
<Label width="31" height="11" vAlign="middle" hAlign="left" text="{format(videoPlayer.mediaDuration, SecondsTimecodeFormatter)}"/>
</HBox>
<HBox width="450" height="19" x="5" y="25" gutter="10">
<ToggleButton id="playButton" showBack="false" iconName="play" toggledIconName="pause" label="controls play" toggledLabel="controls pause" tooltip="controls play tooltip" toggledTooltip="controls pause tooltip" height="19" autoSize="true" lockHeight="true" iconAlignmentH="left" labelAlignmentH="left" labelOffsetX="20" click="{videoPlayer.play()}" toggledClick="{videoPlayer.pause()}" toggled="{videoPlayer.playing}"/>
<Spacer/>
<SWFLoader source="http://mydomain.com/my/path/PostToTwitter.swf" width="16" height="16"/>
<Spacer/>
<Button id="maximizeButton" showBack="false" iconName="maximize" tooltip="controls maximize tooltip" width="19" height="17" click="{videoPlayer.goFullScreen()}"/>
<Button id="volumeButton" showBack="false" iconName="volume" tooltip="controls volume tooltip" width="19" height="17" click="{videoPlayer.toggleVolumeControls()}"/>
<Button id="menuButton" showBack="false" iconName="menu" label="controls menu" height="19" autoSize="true" lockHeight="true" iconAlignmentH="left" labelAlignmentH="left" labelOffsetX="19" data="{video\Player.video}" click="{videoPlayer.toggleMenuPage('Info', data)}"/>
</HBox>
</MediaControls>
</VBox>
</Layout>
</Runtime>
BEMLが完成したら、Brightcove Studio からプレーヤをテンプレートとして登録します。スタジオにログインし、Publishing モジュールから[+テンプレート]をクリックし、新規テンプレートを追加します。先ほど作成した BEML をコピー & ペーストし、名前： Twitter テンプレート、レイアウト: 468 x 412 を入力します。[コードの検証]、[テンプレートの作成]をクリックしテンプレートを作成します。
[+新規プレーヤ]をクリックし、今作ったテンプレートからプレーヤを作成します。
シングルタイトルのプレーヤができあがりましたので、パブリッシングコードを取得して HTML に貼り付ければできあがりです。
PostToTwitter.swf の postToSocialMedia() を変更するとTwitter 以外のサービス、たとえば Delicious や はてなブックマークなどのソーシャルメディアへ投稿することも出来ます。
Delicious ブックマークプレーヤ
はてな ブックマークプレーヤ