#目次

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

#2. 実装方法
完成イメージは以下のようになります。

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の列を選択しました。

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

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

動画を選択し、

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

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

###Webで動画を埋め込む場合

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ではノンコーディングで設定ができるため、
とっても簡単に実装ができました！

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