「FLVPlayBack」で作成したプレーヤーで画面クリック再生させる方法

質問

よろしくお願いします。

　ド素人なのですが、今流行りの「FLV」で動画配信してみたいと思い、
書籍とネット情報を参考に、「FLVPlayBack」を使用して、FLVプレーヤー
を作成してみました。

　非常に簡単に作成でき、再生も問題無いのですが、一点どうしても
加えたい機能があり、質問させていただきます。

　私の作成したプレーヤーの仕様では、「autoPlay」の設定を「false」
に設定しています。
　もちろん、意図的に設定しており、サイトにアクセスして自分でコン
トローラの再生ボタンを押さないと再生が始まらないようにしています。

　このとき、ビューワー部分と言うかディスプレイ部分と言うか、動画
の再生される画面がある訳ですが、そこに三角形の再生マークなどを表
示させ、コントローラの再生ボタンだけではなく、画面をクリックして
も再生開始できるようにしたいのですが、どうすれば良いのでしょうか？

　イメージとしては、
　http://www.jeroenwijering.com/?item=JW_FLV_Player　のような感じ
です。

　それからもう一点、質問させていただきたいのですが「FLVPlayBack」
でプレーヤーを作成した場合、パラメータの「contentPath」に、動画の
絶対パスを入力しないと上手く行かないように思うのですが、ここを
相対パスに設定することは出来ないのでしょうか？

　ド素人過ぎて、変な質問をしているかも知れませんが、ご教授いただけ
ますと幸いです。

　どうぞ、よろしくお願いします。

回答No.9

Dimen9100 · ベストアンサー

お節介とは思いましたが別の方法を考えました。
1.ビデオを再生するとセンターのスタートボタンが消える。
2.再生中にビデオエリアをクリックするとポーズ。
3.スタートボタンが表示される。
でよいのでしたら、スタートボタンMCは2フレームでいけます。

1フレstopで 再生用ボタン(スクリプト変化なし)
on (release) {
this._parent.my_FLVPlybk.play();
}

2フレstopで 画面サイズの透明ボタン
ボタンのスクリプトは
on (release) {
prevFrame();
this._parent.my_FLVPlybk.pause();
//ビデオを一時停止してスタートボタンを表示
}

この際の「透明ボタン」はオーバーフレームに1時停止マーク等いれたボタンでも良いかと思います。

FLASHのボタンは4フレーム構造です。
1フレ：アップ
2フレ：オーバー
3フレ：ダウン
4フレ：ヒット

アップは普通に表示されている状態。
オーバーはマウスオーバーした状態
ダウンはクリックした状態です。

最後のヒットはボタンの反応するエリアで、通常は見えない部分です。
このヒットエリアのみに短形等描くと透明ボタンになります。
または1フレにアルファ0で短形等描いても透明になります。

お礼

Dimen9100様

　ありがとうございます。
　お節介だなんて、とんでもないです！！
　感謝の気持ちで一杯です！！(^_^)

　本当にすごいです＼(^_^)／
　教えていただいたとおりに設定しスムーズに行き、成功しました。

　透明ボタンの件は「アルファ0で短形」は試していませんが、画像ファイル
を用いて、成功しました。

　何パターンも親切でご丁寧にご教授くださり、本当にありがとうござい
ました！！(^_^)

回答No.8

Dimen9100

今日は夜まで外出ありますので一応書いておきますね。

＞「画面をクリックして動画停止」→「再クリックで、停止場所からの再々生開始」

一時停止(Pause)がしたいのですね？
実は、たぶん一時停止もくるなぁ・・・と思っていました。
もちろんできますがANo.7をクリアしてからにしてくださいね。

ちなみに私の参考書はFLASHのヘルプです。
FLASHのヘルプで「ビデオ」で検索すると、
ActionScript 2.0 コンポーネントリファレンスガイド の中に、
FLVPlaybackで始まるクラス群がヒットします。
その中のFLVPlayback.pause()とFLVPlayback.play()を使います。
改造するのはスタートボタンです。
今まで2フレ構造でしたが3フレに増やします。

1フレstopで 再生用ボタン(スクリプト変化なし)
on (release) {
this._parent.my_FLVPlybk.play();
}

2フレstopで 画面サイズの透明ボタン
ボタンのスクリプトは
on (release) {
nextFrame();
this._parent.my_FLVPlybk.pause();
//ビデオを一時停止して3フレームに移動
}

3フレstopで 画面サイズの透明ボタン
ボタンのスクリプトは
on (release) {
prevFrame();
this._parent.my_FLVPlybk.play();
//ビデオを再生して2フレームに移動
}

何度も言いますがこれはあくまでも1例です。
それでは成功を祈っています。

お礼

Dimen9100様

　ありがとうございます。

＞ 一時停止(Pause)がしたいのですね？
＞ 実は、たぶん一時停止もくるなぁ・・・と思っていました。

　スミマセン、、、厚かましいお願いをしてしまいまして(>_<)

　「Ano.8」でいただいたアドバイスどおりに設定して、上手く行きました。
　透明ボタンの件も解決できました！！(^_^)
　本当にありがとうございます。

＞ ちなみに私の参考書はFLASHのヘルプです。
＞ FLASHのヘルプで「ビデオ」で検索すると、ActionScript 2.0 コンポー
＞ ネントリファレンスガイド の中に、FLVPlaybackで始まるクラス群がヒ
＞ ットします。

　ありがとうございます。
　困ったときは、まずヘルプで調べてみようと思います。

　取り急ぎ、解決のご報告まで。
　ありがとうございました。

回答No.7

Dimen9100

＞「スタートボタンのMCは1フレだけ」

はANo.4の場合ですからANo.6は使えません。
ANo.4が失敗したと書いてあったので、ANo.1の構造に戻したのがANo.6
です。
ANo.6のスクリプトの場合のスタートボタンのMCの構造は2フレームです。

1フレstopでボタンあり
2フレstopで 空白フレーム
ボタンのスクリプトは
on (release) {
this._parent.my_FLVPlybk.play();
}

としてルート1フレは
var listenerObject:Object = new Object();
listenerObject.stopped = function(eventObject:Object):Void {
startBtn.gotoAndStop(1);
//startBtn._visible=true
// ビデオが終わるとスタートボタンを表示
};
my_FLVPlybk.addEventListener("stopped", listenerObject);
//ビデオの終わりを感知して教える

var listenerObject:Object = new Object();
listenerObject.playing = function(eventObject:Object):Void {
startBtn.gotoAndStop(2);
//startBtn._visible=false
// ビデオが始まったらスタートボタンを非表示
}
my_FLVPlybk.addEventListener("playing", listenerObject);

にしてください。
そしてとりあえずANo.6を克服してください。
尚、いまさらなのですが
貴方の使用しているFLASHのバージョンはいくつでしょうか？
Windowsでしょうか？
私の方はWinXP HomeでFlash CS3を使っています。

お礼

Dimen9100様

　ありがとうございます。

＞ ANo.4が失敗したと書いてあったので、ANo.1の構造に戻したのがANo.6
＞ です。
＞ ANo.6のスクリプトの場合のスタートボタンのMCの構造は2フレームです。

＞ ANo.6を克服してください。

　すみませんでした(-_-;)
　完全に勘違いしておりました(>_<)

　もう一度、2フレーム構造で再挑戦したところ、難無く解決しました。
　本当にご丁寧にありがとうございました。

＞ 貴方の使用しているFLASHのバージョンはいくつでしょうか？
＞ Windowsでしょうか？
＞ 私の方はWinXP HomeでFlash CS3を使っています。

　こちらも、すみませんでした(>_<)
　Windows XP ProでFlash 8です。

　「ANo.8」の件もありがとうございます。
　まず「画面サイズの透明ボタン」が分かっておりませんので、先にそれを
解決させてみようと思います。（何でもかんでも楽して質問するべきではな
いと思いますので、まずは自分で調べてみたいと思います。(^_^;)）

　また、「ANo.8」のお礼欄で報告させていただきます。

　どうぞ、よろしくお願いいたします。

回答No.6

Dimen9100

＞教えていただいたとおりの設定をしたのですが、上手く行きません
でした。

それは残念でしたが、方法は1つとは限らないと言いたかっただけです。

＞何か間違っているのでしょうか。

コントローラの再生ボタンの動作については手を加えていませんから間違っていません。

前回、追加したスクリプトはスタートボタンの動作を感知してビデオのスタートとスタートボタンの非表示。
ビデオのENDを感知してスタートボタンの表示でした。

今回はルート1フレにビデオが再生されたらセンターのスタートボタンを非表示にするというスクリプトを追加してみます。
この変更によりボタンのスクリプトは

on (release) {
this._parent.my_FLVPlybk.play();
}

に変更、ルート1フレは

var listenerObject:Object = new Object();
listenerObject.stopped = function(eventObject:Object):Void {
startBtn.gotoAndStop(1);
//startBtn._visible=true
// ビデオが終わるとスタートボタンを表示
};
my_FLVPlybk.addEventListener("stopped", listenerObject);
//ビデオの終わりを感知して教える

var listenerObject:Object = new Object();
listenerObject.playing = function(eventObject:Object):Void {
startBtn.gotoAndStop(2);
//startBtn._visible=false
// ビデオが始まったらスタートボタンを非表示
}
my_FLVPlybk.addEventListener("playing", listenerObject);

になります。

お礼

Dimen9100様

　ありがとうございます。

＞ 方法は1つとは限らないと言いたかっただけです。

　あっ、もちろん、それは重々承知しております。
　決して、クレーム的な意味合いの報告ではありませんでした。
　誤解を与えてしまったようなら、申し訳ありませんでした。

＞ コントローラの再生ボタンの動作については手を加えていません
＞ から間違っていません。

　ありがとうございます。
　あまりにド素人過ぎて、自分がアドバイス通りに設定できているの
かどうかという意味でも自信がなく・・・このような回答をいただい
て、ようやく「そうかぁ、間違っていた訳ではなかったのかぁ」と思
えるような感じです。(^_^;)　スミマセン・・・(>_<)

＞ 今回はルート1フレにビデオが再生されたらセンターのスタートボ
＞ タンを非表示にするというスクリプトを追加してみます。
＞ この変更によりボタンのスクリプトは
＞
＞ on (release) {
＞ this._parent.my_FLVPlybk.play();
＞ }
＞
＞ に変更、ルート1フレは
＞
＞ var listenerObject:Object = new Object();
　　　　　　　　　　～中　　　　　　略～
＞ my_FLVPlybk.addEventListener("playing", listenerObject);

　恐らく、私が何かを間違えているんだとは思うのですが、「Ano.4」
のときよりも悪くなってしまいました。

　状況としては、画面の再生ボタンをクリックでも、コントローラの
再生ボタンをクリックでも再生は開始されるのですが、画面上の再生
ボタンが常に表示されている状態のままです。
　画像を任意停止、もしくは終点まで再生した後も、同様の操作可能
状態には戻りますが、常に再生ボタンが表示されていることに変化は
ありませんでした。

　ちなみに、この「ANo.5」でアドバイスいただいた内容も「ANo.4」
と同様で、「スタートボタンのMCは1フレだけ」だと思って試してみた
のですが、ひょっとしてそれが問題なのでしょうか？

　基本的には、最初にお教えいただいた方法で解決できていますので
無理にとか、お気を悪くされるようでしたら、最初の方法で全然大丈
夫です。

　取り急ぎ、ご報告まで。
　よろしくお願いいたします。

補足

Dimen9100様

　これ以上、あまりお手数をお掛けしても失礼ですので、一番最初の方法で
解決できていますので、そちらで充分だと思っています。

　それで、重ね重ね厚かましいお願いなのですが、もしよろしければ、最初
の質問で参考に挙げさせていただきましたサイトのプレーヤーのように「動
画停止」も、ビューワー部分のクリックで行うことは可能でしょうか？

　もう少し、付け加えさせていただくと、Dimen9100様にご教授いただき、
最初に解決できた方法（設定・記述）に対して、「画面をクリックして動画
停止」→「再クリックで、停止場所からの再々生開始」の機能を加えられな
いかという希望です。

　しかし、何れにしても、今の私は言われたままの記述を施して「おぉっ!!」
と感動しているような状況です。(^_^;)
　高価な参考書籍を一冊購入したのですが、結局・・・「自分がしたいこと」
には、この「方法論」・「スクリプト」を使うということが解らず、宝の持ち
腐れ状態になっています。(>_<)

　それを、「あー、そうしたいのなら、こうすれば良いよ」と頭の中で考え、
解決できる方、本当に尊敬してしまいます。

　私も今回のことで、「記述したら目に見えて効果が現れた」という経験をし
感動することもできた訳ですので…少しずつでも、それらの意味を把握できて
行ければ良いのですが、なかなか難しそうです。(-_-;)

　どうぞ、よろしくお願いいたします。

回答No.5

Dimen9100

気持ち悪いので訂正＾＾；

チェック項目
フォルダ名、ファイル名が半角英数か？
例
フォルダ名 flv
ファイル名 hanabi.flv

FLVPlatBackのcontentPathは正しいか？
例
flv/hanabi.flv

お礼

Dimen9100様

　わざわざの補足、ありがとうございます。

　正直申しまして、ド素人の場合、今回補足いただいたような些細な点で
あっても、「え？「swf」ってどういうこと？」とパニックに陥ることが
あります。(^_^;)

　補足いただきまして、本当にありがとうございます。

回答No.4

Dimen9100

ついでですからスタートボタンを消す別の方法

_visibleを使うとスタートボタンのMCは1フレだけでいいです。

スタートボタンのスクリプト
on (release) {
this._visible=false
this._parent.my_FLVPlybk.play();
}

ルート１フレのスクリプト
var listenerObject:Object = new Object();
listenerObject.stopped = function(eventObject:Object):Void {
startBtn._visible=true
// ビデオが終わるとスタートボタンを表示
};
my_FLVPlybk.addEventListener("stopped", listenerObject);
//ビデオの終わりを感知して教える

お礼

Dimen9100様

　ありがとうございます。
　教えていただいたとおりの設定をしたのですが、上手く行きません
でした。（私が何か間違っている可能性も高いかも知れませんが。）

　状況としては、一旦、上手く行ったように見えています。

　画面をクリックすると再生開始。
　任意に止めても、動画終点まで行っても、また再生ボタンが表示
され、再びクリックすると再生開始されます。

　ただ、一点問題がありまして、画面ではなくコントローラの方の
再生ボタンから再生させると、画面上に再生ボタンの画像が残った
まま動画が再生され始めてしまいます。（再生中も消えません。）

　何か間違っているのでしょうか。

　最初に教えていただいた方法で上手く行っているので、切羽詰ま
ってはいる訳ではありませんが、念の為にご報告させていただきま
す。

　よろしくお願いいたします。

回答No.3

Dimen9100

＞動画の停止後に再び、再生ボタン表示状態にするにはどうすれば良いのでしょうか？

前提条件：ルート(FLASHの最上階層)のタイムラインは1フレーム構成の場合
FLVPlatBackのautoRewind を true
スタートボタンのMCにインスタンス名をつける
例
startBtn
ルートのタイムライン１フレにASレイヤーを追加
ASレイヤーにスクリプトを記述
例
var listenerObject:Object = new Object();
listenerObject.stopped = function(eventObject:Object):Void {
startBtn.gotoAndStop(1);
// ビデオが終わるとスタートボタンを表示
};
my_FLVPlybk.addEventListener("stopped", listenerObject);
//ビデオの終わりを感知して教える

＞、「FLV」と「swf」を違う階層に置くと相対パスではブラウザに表示されなくなってしまいます。

相対パスで階層が違ってもパス等が正しければ動作します。
チェック項目
フォルダ名、ファイル名が半角英数か？
例
フォルダ名 flv
ファイル名 hanabi.swf

FLVPlatBackのcontentPathは正しいか？
例
flv/hanabi.flv

実際にテストサーバーにあげて動作確認しました。

お礼

Dimen9100様

　ありがとうございます。
　教えていただいたとおりの設定をしたところ、一発で「動画の停止後に再び
再生ボタンを表示」に成功しました。

　相対パスの件ですが、お恥ずかしいです。
　フォルダ名に使用していた数字が一文字だけ全角になっていたようで、
フォルダ名称を付け直したら、上手く行きました。
　お手数、ご迷惑をお掛けして申し訳ありませんでした。

　今回、本当に目から鱗という感じで見事に解決でき、短期間で自分のやりたかった
ことができるようになりました。

　ド素人相手に親切丁寧にお教えいただきまして、本当にありがとうございました。

回答No.2

Dimen9100

1フレstopでボタンあり
2フレstopでボタンなし
ボタンのスクリプトは
on (release) {
play();
this._parent.my_FLVPlybk.play();
}
でした＾＾；

お礼

Dimen9100様、ありがとうございます。

　恐らく、驚かれるくらいド素人なもので、かなり悪銭苦闘いたしましたが、
触っている内に何とかできました。

　自信はないのですが、きっとDimen9100様に教えていただいたとおりの設定
ができていると思います。

　結果、見事に再生ボタンが表示され、画面をクリックすると再生が始まり
再生開始とともにボタン画像は消えてくれました。

　もう少し教えていただきたいのですが、この設定の場合、一度再生を始めた
動画を途中で止めたり、動画が最後まで再生し切られ停止した場合、一フレー
ム目の再生ボタンが表示された状態には戻ってくれないですよね？
　動画の停止後に再び、再生ボタン表示状態にするにはどうすれば良いのでし
ょうか？

　ご教授いただけますと幸いです。

　それから、このお教えいただいた「swf」をWebサーバに設置すると、何故か
表示されなくなってしまいます。（ローカルでは表示されます。）
　この作業を施す前の「FLVPlatBack」だけの設定で書き出した「swf」では、
ローカルでもWebサーバでも表示されました。

　こちらもアドバイスいただけますと助かります。

　それと、相対パスの件ですが、「FLV」のファイルとプレーヤーの「swf」を
同階層に置いておくと上手く行くようなのですが、「FLV」と「swf」を違う階
層に置くと相対パスではブラウザに表示されなくなってしまいます。
　これは、「FLV」と「swf」を同階層に置いたときでないと、相対パスは有効
でないということなのでしょうか。

　どうぞ、よろしくお願いします。

補足

Dimen9100様

＞ それから、このお教えいただいた「swf」をWebサーバに設置すると、何故か
＞ 表示されなくなってしまいます。（ローカルでは表示されます。）
＞ この作業を施す前の「FLVPlatBack」だけの設定で書き出した「swf」では、
＞ ローカルでもWebサーバでも表示されました。

　上記の点だけなのですが、色々と触っている内に解決しました。
　残念ながら、何をしたことによって解決したのかは把握できていませんが。(>_<)

　取り急ぎ、ご報告まで。

回答No.1

Dimen9100

再生させるだけでしたら・・・
ステージ上のFLVPlayBackにインスタンス名をつけます。
例えばmy_FLVPlybk
FLVPlayBackのあるレイヤーの上にスタートレイヤー等作り
そこに再生用のボタンを置きます。
ボタンのスクリプトは
on (release) {
my_FLVPlybk.play();
}
です。

参照サイトのボタンはクリックすると消えますから
例えばボタンをMCの中に入れて
1フレstopでボタンあり
2フレstopでボタンなし
ボタンのスクリプトは
on (release) {
this._parent.play();
this._parent.my_FLVPlybk.play();
}
にすればボタンをクリックするとボタンは消えビデオが再生されます。
あくまでも１例です。

＞相対パスに設定することは出来ないのでしょうか？

できます。