動画の制御について(Flash 7 以降)
動画ファイルの再生について
■動画ファイルの再生に必要なクラスについて
■ NetStream クラスについて
動画ファイルを再生するには、NetStream クラスを使用します。
動画ファイルを読み込んで、再生制御する事ができます。
■ Video クラスについて
動画を表示するには、Video クラスを使用します。
表示に関する制御ができます。
Video クラスについては、こちらで解説しています。
■動画ファイル再生までの準備について
1.Video オブジェクトを用意する
こちらで解説しています。
2.NetConnection オブジェクトを作成する
new 演算子を使って、NetConnection クラスをインスタンス化します。
new NetConnection ( ) :NetConnection
引数 | Void | なし |
戻り値 | NetStream | 新しい NetStream オブジェクトが得られる |
3.動画ファイル再生用の設定
connect() メソッドを使用します。
ここでは、引数に null を指定します。
NetConnection.connect ( targetURI ) :Boolean
第01引数 | String | 接続先の URI を指定。 |
戻り値 | Boolean | 接続に成功したか? |
4.NetStream オブジェクトを作成する
new 演算子を使って、NetStream クラスをインスタンス化します。
引数に、NetConnection オブジェクトを指定します。
new NetStream ( connection ) :NetStream
第01引数 | NetConnection | NetConnection オブジェクトを指定。 |
戻り値 | NetStream | 新しい NetStream オブジェクトが得られる |
5.Video と NetStream オブジェクトを関連付ける
attachVideo() メソッドを使用します。
■使用例
外部にある動画ファイルを読み込んで、再生する
// ------------------------------------------------------------
// 静的に配置したビデオの参照を取得
// ------------------------------------------------------------
var video_obj = _root.my_video;
// ------------------------------------------------------------
// NetConnection オブジェクトを作成
// ------------------------------------------------------------
var net_connection = new NetConnection();
// 動画ファイル再生用の設定
net_connection.connect( null );
// ------------------------------------------------------------
// NetStream オブジェクトを作成
// ------------------------------------------------------------
var net_stream = new NetStream(net_connection);
// ------------------------------------------------------------
// ビデオと NetStream を関連付け
// ------------------------------------------------------------
video_obj.attachVideo(net_stream);
// ------------------------------------------------------------
// URL を指定して、ストリーム再生を開始する
// ------------------------------------------------------------
net_stream.play ( "http://example.com/video/test.flv" );
動画の再生制御について
■ストリーム再生を開始する
play() メソッドを使用します。
このメソッドを呼び出すと、動画ファイルの読み込みを開始します。
NetStream.play ( name , start , len , reset ) :Void
第01引数 | Object | 動画ファイルの URL を指定。 |
第02引数(略可) | Number | ここでは省略 |
第03引数(略可) | Number | ここでは省略 |
第04引数(略可) | Object | ここでは省略 |
戻り値 | Void | なし |
■一時停止状態から、再生を再開したい場合
pause() メソッドが最適です。
play() メソッドは、動画ファイルの読み込みを、新規に開始します。
■読み込み結果を取得する
onStatus イベントを使用します。
コールバック関数の引数から、情報オブジェクトが得られます。
code プロパティから、以下の文字列が得られます。
文字列 | 説明 |
"NetStream. | 動画ファイルの読み込みに失敗した |
"NetStream. | 動画ファイルの読み込みを開始した |
"NetStream. | 再生ヘッダが最終フレームまで移動した |
■使用例
外部にある動画ファイルを読み込んで、再生する
// ------------------------------------------------------------
// 静的に配置したビデオの参照を取得
// ------------------------------------------------------------
var video_obj = _root.my_video;
// ------------------------------------------------------------
// NetConnection オブジェクトを作成
// ------------------------------------------------------------
var net_connection = new NetConnection();
// 動画ファイル再生用の設定
net_connection.connect( null );
// ------------------------------------------------------------
// NetStream オブジェクトを作成
// ------------------------------------------------------------
var net_stream = new NetStream(net_connection);
// ------------------------------------------------------------
// ビデオと NetStream を関連付け
// ------------------------------------------------------------
video_obj.attachVideo(net_stream);
// ------------------------------------------------------------
// 状態が変化すると実行されるイベント
// ------------------------------------------------------------
net_stream.onStatus = function (info){
switch(info.code){
// ------------------------------------------------------------
// 動画ファイルの読み込みに失敗した
// ------------------------------------------------------------
case "NetStream.Play.StreamNotFound":
trace("動画ファイルの読み込みに失敗した");
break;
// ------------------------------------------------------------
// 動画ファイルの読み込みを開始した
// ------------------------------------------------------------
case "NetStream.Play.Start":
trace("動画ファイルの読み込みを開始した");
break;
// ------------------------------------------------------------
// 再生ヘッダが最終フレームまで移動した
// ------------------------------------------------------------
case "NetStream.Play.Stop":
trace("再生ヘッダが最終フレームまで移動した");
break;
}
};
// ------------------------------------------------------------
// URL を指定して、ストリーム再生を開始する
// ------------------------------------------------------------
net_stream.play( "http://example.com/video/test.flv" );
■ストリーム再生を終了する
close() メソッドを使用します。
読み込み中の場合、中止されます。
ローカルに一時的に作成された作業ファイルが、削除されます。
ブラウザのファイルキャッシュには、残る可能性があります。
NetStream.close ( ) :Void
引数 | Void | なし |
戻り値 | Void | なし |
■再生状態から、一時停止したい場合
pause() メソッドが最適です。
close() メソッドは、読み込んだ動画データを破棄します。
■使用例
クリックすると、動画再生を終了する
// ------------------------------------------------------------
// 静的に配置したビデオの参照を取得
// ------------------------------------------------------------
var video_obj = _root.my_video;
// ------------------------------------------------------------
// NetConnection オブジェクトを作成
// ------------------------------------------------------------
var net_connection = new NetConnection();
// 動画ファイル再生用の設定
net_connection.connect( null );
// ------------------------------------------------------------
// NetStream オブジェクトを作成
// ------------------------------------------------------------
var net_stream = new NetStream(net_connection);
// ------------------------------------------------------------
// ビデオと NetStream を関連付け
// ------------------------------------------------------------
video_obj.attachVideo(net_stream);
// ------------------------------------------------------------
// URL を指定して、ストリーム再生を開始する
// ------------------------------------------------------------
net_stream.play ( "http://example.com/video/test.flv" );
// ------------------------------------------------------------
// マウスボタンを押すと実行されるイベント
// ------------------------------------------------------------
_root.onMouseDown = function (){
// ------------------------------------------------------------
// ストリーム再生を終了する
// ------------------------------------------------------------
net_stream.close();
};
■一時停止と再生再開について
pause() メソッドを使用します。
NetStream.pause ( 一時停止? ) :Void
第01引数(略可) | Boolean | 一時停止なら true を指定。再生再開なら false を指定。 |
戻り値 | Void | なし |
■第01引数 (一時停止するか)
true を指定すると、一時停止状態に遷移します。
false を指定すると、再生状態に遷移します。
デフォルトは、true です。
■使用例
クリックすると、一時停止と再生再開を切り替える
// ------------------------------------------------------------
// 静的に配置したビデオの参照を取得
// ------------------------------------------------------------
var video_obj = _root.my_video;
// ------------------------------------------------------------
// NetConnection オブジェクトを作成
// ------------------------------------------------------------
var net_connection = new NetConnection();
// 動画ファイル再生用の設定
net_connection.connect( null );
// ------------------------------------------------------------
// NetStream オブジェクトを作成
// ------------------------------------------------------------
var net_stream = new NetStream(net_connection);
// ------------------------------------------------------------
// ビデオと NetStream を関連付け
// ------------------------------------------------------------
video_obj.attachVideo(net_stream);
// ------------------------------------------------------------
// URL を指定して、ストリーム再生を開始する
// ------------------------------------------------------------
net_stream.play ( "http://example.com/video/test.flv" );
// ビデオの停止状態
var video_pause = false;
// ------------------------------------------------------------
// マウスボタンを押すと実行されるイベント
// ------------------------------------------------------------
_root.onMouseDown = function (){
// 真偽値を反転
video_pause = Boolean(!(video_pause));
// ------------------------------------------------------------
// true:一時停止、false:再生再開
// ------------------------------------------------------------
net_stream.pause ( video_pause );
};
■ビデオの再生位置を取得する
time プロパティを使用します。
得られる単位は、秒です。
再生ヘッダの位置を指定するには、seek() メソッドを使用します。
■ビデオの再生位置(シーク)を設定する
seek() メソッドを使用します。
NetStream.seek ( 位置 ) :Void
第02引数(略可) | Number | 再生ヘッダの位置を、秒数で指定する。 |
戻り値 | Void | なし |
■第01引数 (位置)
再生ヘッダの位置を、秒数で指定します。
■フレーム間予測について
動画ファイルは、フレーム間予測と呼ばれる仕組みで、圧縮されています。
https://ja.wikipedia.org/wiki/フレーム間予測
■イントラフレームについて(I-frame)
I-frame は、単独で静止画を計算できます。
I-frame が多いほど、圧縮効率は悪くなります。
■予測フレームについて(P-frame)
P-frame は、前回フレームとの差分データです。
静止画を計算するには、前回フレームの完全な静止画が必要です。
もし P-frame が連続している場合、I-frame が出現するまで戻ります。
■実際にシーク可能なフレームについて
指定した位置が、P-frame だった場合、シークできません。
この場合、次に出現する I-frame の位置まで、先送り補正されます。
もし、I-frame が1フレーム目にしかない場合、シークは機能しないでしょう。
シーク操作が完了したか調べる
onStatus イベントを使用します。
コールバック関数の引数から、情報オブジェクトが得られます。
code プロパティから、以下の文字列が得られます。
文字列 | 説明 |
"NetStream. | シーク操作が完了した |
"NetStream. | シーク操作中の通知 |
"NetStream. | シーク操作に無効な時間を設定した (details プロパティから、設定可能な秒数が得られる) |
■使用例
クリックすると、ランダムな秒数でシーク操作を開始する
// ------------------------------------------------------------
// テキストフィールドを作成
// ------------------------------------------------------------
_root.createTextField( "text_field0" , 0 , 10 , 10 , Stage.width-20 , 80 );
_root.createTextField( "text_field1" , 1 , 10 , 100 , Stage.width-20 , Stage.height-110 );
// テキストフィールドの参照を取得
var text_field0 = _root.text_field0;
var text_field1 = _root.text_field1;
// 枠線を表示
text_field0.border = true;
text_field1.border = true;
// ------------------------------------------------------------
// 動画用変数
// ------------------------------------------------------------
var video_duration = 0;
var video_frame_rate = 0;
// ------------------------------------------------------------
// 静的に配置したビデオの参照を取得
// ------------------------------------------------------------
var video_obj = _root.my_video;
// ------------------------------------------------------------
// NetConnection オブジェクトを作成
// ------------------------------------------------------------
var net_connection = new NetConnection();
// 動画ファイル再生用の設定
net_connection.connect( null );
// ------------------------------------------------------------
// NetStream オブジェクトを作成
// ------------------------------------------------------------
var net_stream = new NetStream(net_connection);
// ------------------------------------------------------------
// ビデオと NetStream を関連付け
// ------------------------------------------------------------
video_obj.attachVideo(net_stream);
// ------------------------------------------------------------
// 状態が変化すると実行されるイベント
// ------------------------------------------------------------
net_stream.onStatus = function (info){
var str = "";
switch(info.code){
// ------------------------------------------------------------
// シーク操作が完了した
// ------------------------------------------------------------
case "NetStream.Seek.Complete":
str += "シーク操作が完了 (time:" + (net_stream.time) + ")\n";
break;
// ------------------------------------------------------------
// シーク操作の通知
// ------------------------------------------------------------
case "NetStream.Seek.Notify":
str += "シーク操作の通知\n";
break;
// ------------------------------------------------------------
// シーク操作に無効な時間を設定した
// ------------------------------------------------------------
case "NetStream.Seek.InvalidTime":
str += "シークに無効な時間を設定 (設定可能な限界秒数:" + (info.details) + ")\n";
break;
}
if(str){
// 出力
text_field1.text = str + text_field1.text;
}
};
// ------------------------------------------------------------
// メタデータが含まれる場合に実行されるイベント
// ------------------------------------------------------------
net_stream.onMetaData = function (info){
// 動画の総時間を取得(秒数)
video_duration = info.duration;
// 動画のフレームレートを取得
video_frame_rate = info.framerate;
};
// ------------------------------------------------------------
// URL を指定して、ストリーム再生を開始する
// ------------------------------------------------------------
net_stream.play ( "http://example.com/video/test.flv" );
// ------------------------------------------------------------
// マウスボタンを押すと実行されるイベント
// ------------------------------------------------------------
_root.onMouseDown = function (){
// ------------------------------------------------------------
// ビデオの再生位置(シーク)を設定する
// ------------------------------------------------------------
// 適当な秒数を用意
var time = Math.random() * 100;
// シーク操作を開始
net_stream.seek ( time );
// 出力
text_field1.text = "シーク操作を開始 (time:" + (net_stream.time) + " seek:" + (time) + ")\n" + text_field1.text;
};
// ------------------------------------------------------------
// 毎フレーム実行されるイベント
// ------------------------------------------------------------
_root.onEnterFrame = function (){
// 再生ヘッダの位置(秒)を取得
var time = net_stream.time;
// 再生ヘッダの位置(フレーム数)を計算
var frame_pos = 0;
var frame_max = 0;
if( (video_duration) && (video_frame_rate) ){
frame_pos = Math.round(time * video_frame_rate);
frame_max = Math.round(video_duration * video_frame_rate);
}
// 出力
text_field0.text = "time:" + (time) + "\n" + "duration:" + (video_duration) + "\n" + "frame pos:" + (frame_pos) + "\n" + "frame max:" + (frame_max);
};
■現在のフレームレートを取得する
currentFps プロパティを使用します。
現在の環境の、リアルタイムの実測値です。
動画のフレームレートを取得するには、onMetaData イベントを使用します。
■動画ファイル読み込みのセキュリティについて
■クロスドメイン環境でも可能な処理について
動画ファイルの再生に、制限はありません。
別ドメインの動画ファイルを読み込んで、再生する事は可能です。
■クロスドメイン環境では不可能な処理について
静止画をキャプチャする事はできません。
■クロスドメインポリシーの解除について
クロスドメインポリシーは、解除する事ができます。
動画ファイルを格納しているサーバーに、ポリシーファイルを設置しておきます。
その後、play() メソッドを呼び出します。
■ローカルで実行されている Flash について
ローカルで実行されている Flash から、ネットワークに格納されている動画ファイルに、読み取りアクセスする事はできません。
パブリッシュ設定から「ネットワークにのみアクセスする」を選択すると、読み取りアクセス可能になります。
動画のサウンド制御について
■動画のサウンド制御について
1.Video オブジェクトを用意する
こちらで解説しています。
2.Sound オブジェクトを作成する
こちらで解説しています。
引数に、Video オブジェクトを指定します。
3.サウンドの出力を制御する
こちらで解説しています。
■使用例
ビデオのサウンド出力を設定する
// ------------------------------------------------------------
// 静的に配置したビデオの参照を取得
// ------------------------------------------------------------
var video_obj = _root.my_video;
// ------------------------------------------------------------
// サウンドオブジェクトを作成する
// ------------------------------------------------------------
var sound_obj = new Sound(video_obj);
// ------------------------------------------------------------
// ボリュームを設定する
// ------------------------------------------------------------
sound_obj.setVolume(100);
// ------------------------------------------------------------
// パンを設定する
// ------------------------------------------------------------
sound_obj.setPan(75);
動画の再生バッファについて
■再生バッファについて
再生バッファが完全に尽きた場合(初期状態)
ビデオを再生する事はできません。
再生バッファは、自動的に補充され続けます。
再生バッファが完全に満たされるまで、再生は開始できません。
再生バッファが満たされると、再生可能状態に遷移します。
再生バッファが完全に満たされた場合(再生可能状態)
ビデオの再生が可能です。
再生中は、再生バッファを消費します。
消費と並行して、再生バッファは自動的に補充され続けます。
消費と補充のバランスが良好な場合、この状態を維持し続けます。
読み込み遅延などの理由で、再生バッファが完全に尽きる事があります。
この場合、初期状態に遷移します。
■再生バッファを設定する
setBufferTime() メソッドを使用します。
デフォルトは、0.1 です。
設定した値を取得するには、bufferTime プロパティを使用します。
NetConnection.setBufferTime ( 再生バッファの秒数 ) :Void
第01引数 | String | 再生バッファのサイズを秒数で指定。 |
戻り値 | Void | なし |
■再生バッファの進捗状況を取得する
再生バッファの現在の蓄積量を、秒数で取得する
bufferLength を使用します。
再生バッファの状況を取得する
onStatus イベントを使用します。
コールバック関数の引数から、情報オブジェクトが得られます。
code プロパティから、以下の文字列が得られます。
文字列 | 説明 |
"NetStream. | 再生バッファが空になった |
"NetStream. | 再生バッファが満たされた |
"NetStream. | 再生バッファのフラッシュ(クリア)関連 「フラッシュ開始(デコードが最後まで完了した瞬間)」 「フラッシュ完了(最後まで再生し終えた瞬間)」 |
■取得例
再生バッファの進捗状況を取得する
// ------------------------------------------------------------
// テキストフィールドを作成
// ------------------------------------------------------------
_root.createTextField( "text_field0" , 0 , 10 , 10 , Stage.width-20 , 80 );
_root.createTextField( "text_field1" , 1 , 10 , 100 , Stage.width-20 , Stage.height-110 );
// テキストフィールドの参照を取得
var text_field0 = _root.text_field0;
var text_field1 = _root.text_field1;
// 枠線を表示
text_field0.border = true;
text_field1.border = true;
// ------------------------------------------------------------
// 静的に配置したビデオの参照を取得
// ------------------------------------------------------------
var video_obj = _root.my_video;
// ------------------------------------------------------------
// NetConnection オブジェクトを作成
// ------------------------------------------------------------
var net_connection = new NetConnection();
// 動画ファイル再生用の設定
net_connection.connect( null );
// ------------------------------------------------------------
// NetStream オブジェクトを作成
// ------------------------------------------------------------
var net_stream = new NetStream(net_connection);
// ------------------------------------------------------------
// ビデオと NetStream を関連付け
// ------------------------------------------------------------
video_obj.attachVideo(net_stream);
// ------------------------------------------------------------
// 状態が変化すると実行されるイベント
// ------------------------------------------------------------
net_stream.onStatus = function (info){
var str = "";
switch(info.code){
// ------------------------------------------------------------
// 再生バッファが尽きた
// ------------------------------------------------------------
case "NetStream.Buffer.Empty":
str += "再生バッファが尽きた\n";
break;
// ------------------------------------------------------------
// 再生バッファが満たされた
// ------------------------------------------------------------
case "NetStream.Buffer.Full":
str += "再生バッファが満たされた\n";
break;
// ------------------------------------------------------------
// 再生バッファのフラッシュ関連
// ------------------------------------------------------------
case "NetStream.Buffer.Flush":
str += "再生バッファのフラッシュ関連\n";
break;
}
if(str){
// 出力
text_field1.text = str + text_field1.text;
}
};
// ------------------------------------------------------------
// URL を指定して、ストリーム再生を開始する
// ------------------------------------------------------------
net_stream.play ( "http://example.com/video/test.flv" );
// ------------------------------------------------------------
// 再生バッファのサイズを秒数で設定
// ------------------------------------------------------------
net_stream.setBufferTime ( 10.0 );
// ------------------------------------------------------------
// 毎フレーム実行されるイベント
// ------------------------------------------------------------
_root.onEnterFrame = function (){
var str = "";
// 再生ヘッダの位置(秒)
str += "time:" + (net_stream.time) + "\n";
// 再生バッファの現在の蓄積量(秒)
str += "bufferLength:" + (net_stream.bufferLength) + "\n";
// 再生バッファのサイズ(秒)
str += "bufferTime:" + (net_stream.bufferTime) + "\n";
// 出力
text_field0.text = str;
};
動画のメタデータを取得する
■動画のメタデータを取得する
onMetaData イベントを使用します。
動画ファイルに、メタデータが含まれる場合、発行されます。
■コールバック関数の仕様について
第01引数から、情報オブジェクトが得られます。
for..in 文を使用すると、すべてのデータを取り出せます。
得られるプロパティの一例です。
プロパティ | 型 | 説明 |
duration | Number | ビデオの総時間(秒数) |
width | Number | ビデオ解像度の幅 |
height | Number | ビデオ解像度の高さ |
framerate | Number | フレームレート(FPS) |
プロパティ | 型 | 説明 |
videocodecid | Number | ビデオのコーデックID |
videodatarate | Number | ビデオのデータレート(kb/s) |
プロパティ | 型 | 説明 |
audiocodecid | Number | オーディオのコーデックID |
audiodatarate | Number | オーディオのデータレート(kb/s) |
■取得例
メタデータを取得する
// ------------------------------------------------------------
// テキストフィールドを作成
// ------------------------------------------------------------
_root.createTextField( "text_field" , 0 , 10 , 10 , Stage.width-20 , Stage.height-20 );
// テキストフィールドの参照を取得
var text_field = _root.text_field;
// 枠線を表示
text_field.border = true;
// ------------------------------------------------------------
// 静的に配置したビデオの参照を取得
// ------------------------------------------------------------
var video_obj = _root.my_video;
// ------------------------------------------------------------
// NetConnection オブジェクトを作成
// ------------------------------------------------------------
var net_connection = new NetConnection();
// 動画ファイル再生用の設定
net_connection.connect( null );
// ------------------------------------------------------------
// NetStream オブジェクトを作成
// ------------------------------------------------------------
var net_stream = new NetStream(net_connection);
// ------------------------------------------------------------
// ビデオと NetStream を関連付け
// ------------------------------------------------------------
video_obj.attachVideo(net_stream);
// ------------------------------------------------------------
// メタデータが含まれる場合に実行されるイベント
// ------------------------------------------------------------
net_stream.onMetaData = function (info){
// ------------------------------------------------------------
// 出力テスト
// ------------------------------------------------------------
trace( info.duration );
trace( info.width );
trace( info.height );
trace( info.framerate );
trace( info.videocodecid );
trace( info.videodatarate );
trace( info.audiocodecid );
trace( info.audiodatarate );
// ------------------------------------------------------------
// for..in 文を使ってすべて取得
// ------------------------------------------------------------
var str = "";
var name;
for(name in info){
// 値を取得
var value = info[name];
str += (name) + ": " + (value) + "\n";
}
// 出力
text_field.text = str;
};
// ------------------------------------------------------------
// URL を指定して、ストリーム再生を開始する
// ------------------------------------------------------------
net_stream.play ( "http://example.com/video/test.flv" );
// 一時停止
net_stream.pause();
動画の読み込み状況を取得する
■動画の読み込み状況を取得する
以下のプロパティを使用します。
プロパティ | 型 | 説明 |
bytesLoaded | Number | これまでに完了した受信バイト数を取得する |
bytesTotal | Number | 全体の受信バイト数を取得する |
■取得例
動画の読み込み状況を取得する
// ------------------------------------------------------------
// テキストフィールドを作成
// ------------------------------------------------------------
_root.createTextField( "text_field" , 0 , 10 , 10 , Stage.width-20 , Stage.height-20 );
// テキストフィールドの参照を取得
var text_field = _root.text_field;
// 枠線を表示
text_field.border = true;
// ------------------------------------------------------------
// 静的に配置したビデオの参照を取得
// ------------------------------------------------------------
var video_obj = _root.my_video;
// ------------------------------------------------------------
// NetConnection オブジェクトを作成
// ------------------------------------------------------------
var net_connection = new NetConnection();
// 動画ファイル再生用の設定
net_connection.connect( null );
// ------------------------------------------------------------
// NetStream オブジェクトを作成
// ------------------------------------------------------------
var net_stream = new NetStream(net_connection);
// ------------------------------------------------------------
// ビデオと NetStream を関連付け
// ------------------------------------------------------------
video_obj.attachVideo(net_stream);
// ------------------------------------------------------------
// URL を指定して、ストリーム再生を開始する
// ------------------------------------------------------------
net_stream.play ( "http://example.com/video/test.flv" );
// ------------------------------------------------------------
// 毎フレーム実行されるイベント
// ------------------------------------------------------------
_root.onEnterFrame = function (){
// これまでに完了した受信バイト数
var loaded = net_stream.bytesLoaded;
// 全体の受信バイト数
var total = net_stream.bytesTotal;
// パーセント数
var percent = 0;
if(total > 0){
percent = loaded / total * 100;
}
// 出力
text_field.text = "bytesLoaded:" + (loaded) + "\n" + "bytesTotal:" + (total) + "\n" + "percent:" + (percent) + "\n";
};