Edge Animate では、HTML5 ビデオがネイティブサポートされているので、お好きなビデオクリップをコンポジション内で簡単に使用できます。ビデオの再生は、基本的な再生アクションと JavaScript を使用して制御できます。また、ビデオエレメントをタッチイベントやマウスイベントにバインドし、豊かでインタラクティブなエクスペリエンスを作り出すことも可能です。

ビデオ再生機能は、HTML DOM でサポートされています。したがって、プラグインを必要とせず、任意の最新のデスクトップコンピューターやデバイスのブラウザーでビデオが再生できます。

Edge Animate に .mp4 および .ogv ファイルを読み込むことができます。

ブラウザーの枠を超えて最高の互換性を実現するには、.mp4 および .ogv 形式のビデオエレメントをプロジェクトに加えてください。対応するビデオ形式について詳しくは、HTML5 の audio 要素と video 要素でサポートされているメディアフォーマットを参照してください。

ビデオのコンポジションへの追加

次のいずれかの操作を実行します。

  • ファイル/読み込みをクリックするか、ビデオファイルをファイルシステムから直接ステージにドラッグ&ドロップします。ビデオファイルの名前の付いた「ビデオグループ」がライブラリに作成されます。このビデオグループには、ビデオファイルに加え、異なるブラウザー間の互換性を維持するために追加したフォールバックファイルが含まれています。

注意:フォールバックファイルは、コンポジションで読み込むと、自動的にビデオグループに名前別に分類されます。

  • プロジェクトのライブラリ「ビデオを追加」をクリックして、目的のビデオファイルを選択し、そのビデオグループをライブラリからステージにドラッグします。
ライブラリの「ビデオを追加」オプション
ライブラリの「ビデオを追加」オプション

コンポジションにビデオを追加すると、エレメントパネルに「ビデオエレメント」が表示されます。エレメントパネルでそのビデオエレメントを選択すると、ビデオの再生を制御するためのオプションがプロパティパネルに表示されます。

ビデオの再生と制御

ビデオの再生および制御には、以下のオプションが用意されています。

  • プロパティパネル
    • 自動再生:タイムラインおよびデスクトップブラウザー上でビデオファイルを自動的に再生します。
    • ループ:再生が終わったビデオファイルを最初からループ再生します。
プロパティパネルのビデオコントロール
プロパティパネルのビデオコントロール

  • タイムライン
    • 再生:現在の再生ヘッドの位置からビデオファイルを再生します。
    • 途中から再生:ビデオの再生を開始する位置をタイムマーカーで指定できます。
    • 一時停止:ビデオを一時停止できます。再生を開始するには、再生機能を使用します。
タイムラインのビデオ再生オプション
タイムラインのビデオ再生オプション

  • ビデオアクションアクションエディターのコードスニペットを使用し、イベントによってビデオ再生を制御します。

ビデオアクション

  1. タイムラインでステージの横にある {} をクリックし、アクションエディターを開きます。

  2. トリガー(イベント)をクリックします。

  3. 「アクションを選択」リストで「ビデオ」をクリックし、必要なアクションをクリックします。

    また、「アクションを選択」セクションにある検索ボックスを使用してアクションを検索できます。

    アクションエディターのビデオアクション
    アクションエディターのビデオアクション

  4. 「ターゲットを選択」セクションで「ステージ」をクリックし、選択したアクションを割り当てるエレメントまたはシンボルをダブルクリックします。

    また、「ターゲットを選択」セクションにある検索ボックスを使用してエレメントまたはシンボルを検索できます。

ビデオのプリロード

コンポジションを読み込む前にビデオファイルをプリロードするには、ステージのプロパティパネルにあるプリロードセクションで「オーディオをプリロード」を選択します。

注意:ほとんどのモバイルデバイスでは、ビデオのプリロードを利用できません。制限事項については、デバイスでのビデオの使用を参照してください。

ビデオのプリロード
ビデオのプリロード

デフォルトのビデオプレーヤーの有効化

ブラウザーのデフォルトのメディアプレーヤーを使用してビデオコントロールを表示できます。デフォルトのビデオプレーヤーは、初期設定では非表示になっています。デフォルトのプレーヤーを有効にするには、ビデオエレメントを選択し、プロパティパネルの「ビデオ」セクションで「コントロール」を選択します。

プロパティパネルにおけるデフォルトのビデオプレーヤーの有効化
プロパティパネルにおけるデフォルトのビデオプレーヤーの有効化

プレーヤースキンはブラウザーによってレンダリングされ、表示されるブラウザーに応じて見た目が異なります。例えば、Chrome で表示されるプレーヤーは Firefox で表示されるものとは異なっています。

プレーヤーがステージに表示されたら、他のオブジェクトに追加するのと同じように、モーションプロパティ、変形プロパティ、および他のプロパティをプレーヤーに追加できます。

デバイスでのビデオの使用

iOS

iOS(iPad などのすべてのデバイス用)の Safari では、ユーザーが携帯電話ネットワークを使用している場合、データ単位で料金が請求されることがあるので、プリロード、自動再生および再生アクションは無効にしておきます。ユーザーがビデオを再生するまでデータは読み込まれません。

ユーザーイベントによってトリガーされたビデオエレメントを、ビデオアクションを使用して呼び出すこともできます。ビデオアクションについて詳しくは、ビデオアクションを参照してください。

Android

Android の場合も、大抵はビデオについて iOS と同じ制限があります。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

リーガルノーティス   |   プライバシーポリシー