#目次
- はじめに
- 実装方法
- まとめ
#1. はじめに
アプリを開発していて、動画を表示させたい場合があると思います。
今回は、モバイルアプリとWebアプリで動画を埋め込む方法についてご紹介します！
#2. 実装方法
完成イメージは以下のようになります。
Webの場合、
— Kony (@Kony12763790) January 6, 2021
モバイルの場合、
— Kony (@Kony12763790) January 6, 2021
###モバイルで動画を埋め込む場合
まず、Video Widgetを選択し、フォーム内に配置します。
配置できたら、Videoタブを選択してください。
SourceのEditをクリックすると、
Video Sourceのポップアップが表示されます。
動画を指定するために、
動画を表示させたいデバイスの列で、「・・・」をクリックします。
今回は、iPhoneで表示させたいので、iPhoneの列を選択しました。
動画を選択するポップアップが表示されるため、
一覧に表示されている動画から表示したいものを選択します。
リソースフォルダに表示したい動画がない場合は、
Importをクリックするとローカルファイルが開きますので、
表示したい動画を取り込んでください。
動画をインポートすると、それぞれのプラットフォームに応じて、
それぞれのリソースファイルに動画がコピーされます。
動画を選択し、
以下のように表示されれば設定は完了です。
選択した動画が表示されています！
※Androidの場合、
動画の拡張子は.mp4のもののみを選択してください。
それ以外のファイルの場合は、再生されませんのでご注意ください。
###Webで動画を埋め込む場合
Webで動画を埋め込む場合、
ファイルを取り込む必要はありません。
動画リンクを取得し、メニューで表示したい動画リンクを指定するだけでOKです
先ほどと同様に、フォーム内にVideo Widgetを配置したら、
3つのURL（WebM URL, OGV URL, MP4 URL）の内、1つのURLにリンクを設定してください。
今回は、mp4のURLにしました。
Webはこれで以上です！
それぞれどのように表示されたか、
再度みてみましょう。
Webの場合、
— Kony (@Kony12763790) January 6, 2021
モバイルの場合、
— Kony (@Kony12763790) January 6, 2021
モバイルとWeb画面で動画の再生をすることができました！
#まとめ
今回ご紹介した通り、
動画の埋め込みを行うにあたって、Konyではノンコーディングで設定ができるため、
とっても簡単に実装ができました！
是非参考にしてみてくださいね〜
#参考
Video Widgetの説明: https://docs.kony.com/konylibrary/visualizer/visualizer_user_guide/Content/Video.htm