Visualizerで動画ファイルを表示させる方法（Web, Mobile）

#目次
1. はじめに
2. 実装方法
3. まとめ


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

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

Webの場合、
<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/E5QTGXX6HM">pic.twitter.com/E5QTGXX6HM</a></p>&mdash; Kony (@Kony12763790) <a href="https://twitter.com/Kony12763790/status/1346703152943251462?ref_src=twsrc%5Etfw">January 6, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

モバイルの場合、
<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/8mE1ib8Zho">pic.twitter.com/8mE1ib8Zho</a></p>&mdash; Kony (@Kony12763790) <a href="https://twitter.com/Kony12763790/status/1346702943991390210?ref_src=twsrc%5Etfw">January 6, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


###モバイルで動画を埋め込む場合
まず、Video Widgetを選択し、フォーム内に配置します。
配置できたら、Videoタブを選択してください。
![スクリーンショット 2021-01-06 15.46.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/2c2e24e4-b6bd-b3d0-a1a1-fcaad5d4d377.png)

SourceのEditをクリックすると、
Video Sourceのポップアップが表示されます。
![スクリーンショット 2021-01-06 15.47.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/1243960b-0d91-b530-0592-0218683f1f3e.png)


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

今回は、iPhoneで表示させたいので、iPhoneの列を選択しました。
![スクリーンショット 2021-01-06 15.47.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/48191459-eb40-62d8-a674-34ef8cb7c600.png)

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

リソースフォルダに表示したい動画がない場合は、
`Import`をクリックするとローカルファイルが開きますので、
表示したい動画を取り込んでください。
![スクリーンショット 2021-01-06 15.47.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/c5998535-bbf2-80c9-f48a-2f8bfb866252.png)

動画をインポートすると、それぞれのプラットフォームに応じて、
それぞれのリソースファイルに動画がコピーされます。
![スクリーンショット 2021-01-06 15.47.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/c7ede2c0-a417-309d-36fa-771cbec7b106.png)


動画を選択し、
![スクリーンショット 2021-01-06 15.48.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/f02d10b3-54bb-72b0-871f-7b6199b525b9.png)

以下のように表示されれば設定は完了です。
選択した動画が表示されています！
![スクリーンショット 2021-01-06 15.48.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/04a41982-4f99-d4bd-8381-68c4a1021202.png)

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

---

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

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

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

先ほどと同様に、フォーム内にVideo Widgetを配置したら、
3つのURL（WebM URL, OGV URL, MP4 URL）の内、1つのURLにリンクを設定してください。
今回は、mp4のURLにしました。
![スクリーンショット 2021-01-06 15.48.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/6edbc24b-37c3-1abc-05a2-abe341e94888.png)


Webはこれで以上です！

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

Webの場合、
<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/E5QTGXX6HM">pic.twitter.com/E5QTGXX6HM</a></p>&mdash; Kony (@Kony12763790) <a href="https://twitter.com/Kony12763790/status/1346703152943251462?ref_src=twsrc%5Etfw">January 6, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

モバイルの場合、
<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/8mE1ib8Zho">pic.twitter.com/8mE1ib8Zho</a></p>&mdash; Kony (@Kony12763790) <a href="https://twitter.com/Kony12763790/status/1346702943991390210?ref_src=twsrc%5Etfw">January 6, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

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

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

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

#参考
Video Widgetの説明: https://docs.kony.com/konylibrary/visualizer/visualizer_user_guide/Content/Video.htm