目次

1. はじめに

アプリを開発していて、動画を表示させたい場合があると思います。
今回は、モバイルアプリとWebアプリで動画を埋め込む方法についてご紹介します！

完成イメージは以下のようになります。

Webの場合、

pic.twitter.com/E5QTGXX6HM
— Kony (@Kony12763790) January 6, 2021

モバイルの場合、

pic.twitter.com/8mE1ib8Zho
— Kony (@Kony12763790) January 6, 2021

まず、Video Widgetを選択し、フォーム内に配置します。
配置できたら、Videoタブを選択してください。

SourceのEditをクリックすると、
Video Sourceのポップアップが表示されます。

動画を指定するために、
動画を表示させたいデバイスの列で、「・・・」をクリックします。

今回は、iPhoneで表示させたいので、iPhoneの列を選択しました。

動画を選択するポップアップが表示されるため、
一覧に表示されている動画から表示したいものを選択します。

リソースフォルダに表示したい動画がない場合は、
Importをクリックするとローカルファイルが開きますので、
表示したい動画を取り込んでください。

動画をインポートすると、それぞれのプラットフォームに応じて、
それぞれのリソースファイルに動画がコピーされます。

動画を選択し、

以下のように表示されれば設定は完了です。
選択した動画が表示されています！

※Androidの場合、
動画の拡張子は.mp4のもののみを選択してください。
それ以外のファイルの場合は、再生されませんのでご注意ください。

Webで動画を埋め込む場合、
ファイルを取り込む必要はありません。

動画リンクを取得し、メニューで表示したい動画リンクを指定するだけでOKです

先ほどと同様に、フォーム内にVideo Widgetを配置したら、
3つのURL（WebM URL, OGV URL, MP4 URL）の内、1つのURLにリンクを設定してください。
今回は、mp4のURLにしました。

Webはこれで以上です！

それぞれどのように表示されたか、
再度みてみましょう。

Webの場合、

pic.twitter.com/E5QTGXX6HM
— Kony (@Kony12763790) January 6, 2021

モバイルの場合、

pic.twitter.com/8mE1ib8Zho
— Kony (@Kony12763790) January 6, 2021

モバイルとWeb画面で動画の再生をすることができました！

今回ご紹介した通り、
動画の埋め込みを行うにあたって、Konyではノンコーディングで設定ができるため、
とっても簡単に実装ができました！

是非参考にしてみてくださいね〜