NEWS

2017.10.21 「バージョンごとの機能比較」を更新しました。

  • Web creators

ActionScript

FLV動画の頭出し(シーク)を行う

概要

FLV動画に頭出し(シーク)を行うためのキューポイントを設定しておくことで、動画の再生時に任意のキューポイントにジャンプすることができます。
これにより長時間の動画内でスキップしたり、途中箇所で繰り返し再生が可能になります。

ここではあらかじめキューポイントを設定したFLV動画を用意しています。
設定するキューポイントは「ナビゲーション」で指定しています。
キューポイントの設定方法については下記を参照して下さい。
[参考:FLV動画にキューポイントを設定する]

サンプル解説

Flashがブラウザに表示されると同時にFLVファイルが読み込まれ、再生を開始します。
ステージにはボタンを配置しており、クリックするとそれぞれ5秒地点と10秒地点にジャンプします。

作成法

(1)ライブラリにコンポーネントを配置

・上部メニューより「ウィンドウ -> コンポーネント」を選択し、「FLVPlayback」をクリックすることでライブラリに配置される。

FLVPlaybackの呼び出し

(2)ボタンとなるシンボルを用意

・ライブラリに「5秒地点」と「10秒地点」のボタンを用意。

ボタンシンボルの用意

(3)ステージにシンボルを配置

・シンボルを配置するレイヤー「レイヤー 2」を用意。
レイヤー「レイヤー 2」に準備したボタンのシンボル2つを配置。
・「5秒地点」のシンボルにインスタンス名"btn_a"を設定。
・「10秒地点」のシンボルにインスタンス名"btn_b"を設定。

ステージにシンボルを配置

(4)ステージにActionScriptの設定

・レイヤー「レイヤー 1」に以下のActionScriptを設定。

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
import fl.video.*;

var flvplayer = new FLVPlayback();
addChild( flvplayer );

flvplayer.source = "SD01_1.flv";
flvplayer.play();

btn_a.addEventListener( MouseEvent.MOUSE_DOWN, changeScene_1 );
btn_b.addEventListener( MouseEvent.MOUSE_DOWN, changeScene_2 );

function changeScene_1( event:MouseEvent ):void {
  flvplayer.seekToNavCuePoint("cue_01");
}

function changeScene_2( event:MouseEvent ):void {
  flvplayer.seekToNavCuePoint("cue_02");
}

解説

このサンプルはあらかじめ動画ファイルであるFLVを用意しています。
ActionScriptの7行目まででFLVを再生することができますが、ActionScriptのみで実装した"ActionScriptだけでFLVを再生する"と異なり、頭出し(シーク)するためにはここで紹介する"FLVPlayback"を利用する必要があります。
用意するFLVは"FLV動画にキューポイントを設定する"にある通り、5秒地点のキューポイント名を"cue_01"、10秒地点のキューポイントを"cue_02"として種類を"ナビゲーション"で指定しています。
動画の再生は全てActionScriptで実装しており、ステージ上にはジャンプするボタンのみを配置しています。
ActionScriptの1行目は動画クラスを呼び出しており、今回のようにタイムラインに記述する際にも必要となります。
3行目と4行目でコンポーネントに配置した"FLVPlayback"を介して再生オブジェクトを用意しています。
6行目と7行目で動画を指定して再生しています。

9行目は「5秒地点」のボタンをクリックしたとき、10行目は「10秒地点」のボタンをクリックしたときの処理で、それぞれ"changeScene_1"、"changeScene_2"を呼び出しています。
13行目、17行目の"seekToNavCuePoint"は任意のキューポイントにジャンプする関数です。

また、パブリッシュ時にActionScriptのエラーとして下記が表示された場合は、無効のシークを呼び出したことを示しています。
FLV動画のキューポイントが"ナビゲーション"ではなく、"イベント"で設定されているため"ナビゲーション"に変更する必要があります。

  VideoError: 1003: Invalid seek
    at fl.video::FLVPlayback/seekToNavCuePoint()
    at index_fla::MainTimeline/changeScene_1()

ページ上部へ