【第16回 インフィードエンベッド動画編】

 

たけやん ： こんにちは、アプリデザインチームです！今回は、フリーレイアウト機能内に動画を埋め込み、自動再生するインフィードエンベッド動画についてご紹介します。

ますこ ： こちらがエンベッド動画を設定したアプリですね。アプリを開くと自動で再生されるのでインパクトがありますし、ブランディングにも活用できそうです。

 

たけやん ： すでに動画素材をお持ちの場合、Vimeoアカウントの開設をしてすぐに設定できます！

 

 

インフィードエンベッド動画の設定方法

 

【STEP１】Vimeoから動画ファイルリンクを取得する

 

1. 下記手順を参考に、Vimeo PROアカウント（有償）の開設と初期設定を行います。

Vimeoアカウントの設定方法はこちら＞

 

2. 設定したい動画をVimeoにアップロードします。MP4やmovなど、あらゆる動画ファイル形式がアップロード可能です。

 

3. 動画の読み込みが完了したら、右下にある『詳細設定』をクリックします。

4. 詳細設定画面の左メニューから『配信』＞『動画ファイルリンク』を選択します。
『HLS (m3u8)』の『リンクをコピー』をクリックすると、動画ファイルリンクが取得できます。

 

 

【STEP2】フリーレイアウト機能でエンベッド動画を設定する

 

1. STEP1でアップロードした動画と同じ比率の画像を用意します。動画が再生されるまで表示される画像となります。
今回は下記画像を用意しました。

 

2. フリーレイアウト機能のブロックに用意した画像を設定し、『インフィードエンベッド動画』の欄にSTEP1で取得した動画ファイルリンクを入力します。動画ループ再生の無効／有効どちらかを選択します。

以上で設定は完了です！Preview Yappliで動画が再生されるかご確認ください。

 

 

インフィードエンベッド動画のデザイン例

 

たけやん： エンベッド動画は上記のように動画をそのまま配置するだけでなく、詳細設定などを工夫することで様々なデザイン表現が可能です。

フリーレイアウト機能の詳細設定についてはこちら＞

 

ますこ ： 表現方法によって、同じ動画でもアプリのイメージが全然違いますね！

 

たけやん： エンベッド動画を設定することで、見た目がリッチになるだけでなく情報発信がより効果的になります。是非活用してみてください！

 

 

 

■エンベッド動画について、詳しくはこちらをご参照ください。

エンベッド動画機能の使い方＞

※ご不明点は担当のカスタマーサクセスにお問い合わせください。

 

 

それでは次回の更新をお楽しみに！