Railsアプリでmp4動画ファイルを表示させたい

はじめに

Rails6.0で作成するアプリで動画を背景として表示させたい！
そう思い、ググりまくった結果やっとやりたいことが実現できたのでアウトプットとしてまとめたいと思います。
画像ファイルのアップロードについては情報がたくさんあるのに。。。笑

この記事のゴール

• mp4動画ファイルを背景として表示させる

目次

1.mp4動画ファイルの格納先
2.記述方法とオプションの種類

1. 動画ファイルの格納先

まず最初に、使いたい動画ファイルをどのディレクトリに格納すればよいかを確認します。
結論から言うと、public/assets/videos/xxx.mp4が格納先になります。

1. rails newでアプリを作成すると自動的にpublicディレクトリが作成される
2. publicの下にassetsディレクトリを作成
3. assetsディレクトリの下にvideosディレクトリを作成
4. videosディレクトリに使いたい動画ファイルを格納

画像ファイルの場合はimage_tagを用いて表示させると思います。
この場合はapp/aseets/imagesに画像ファイルを格納していると思います。

これから説明するvideo_tagはimage_tagと別のパイプラインでデータを探してくるので画像ファイルと同じように動画ファイルを格納してもエラーがでてしまうので注意してください。

2. 記述方法とオプションの種類

それでは実装に入ります。
hamlで記述する場合はvideo_tagというヘルパーを用います。
今回は例として、index.html.hamlファイルに記述することとします。

index.html.haml

= video_tag "/assets/videos/test.mp4", playsinline: true, controls: true, autoplay: true, loop: true, muted: true, width: "320", height: "240", class: "index-video"

次にオプションの説明に入ります。

| オプション項目 | 説明 |
|:----------:|:------------|:------------:|
| controls | 再生ボタンや再生位置（シーク）、ボリュームを表示するかしないか |
| autoplay | ページが読み込み終わったら自動的に動画を再生するか |
| loop | 動画をループさせるかどうか |
| muted | 音を出すか出さないか |
| height | 要素の高さの指定 |
| width | 要素の幅の指定 |
| class | 要素にクラスを追加 |
| playsinline | インライン再生を可能にする |

各属性の値はtrueまたはfalseで指定しましょう。

補足：playsinline属性はスマホでアプリを閲覧する場合を想定して設定します。
この属性をtrueにすることによって全画面表示をせずにその場で動画を再生させることができます。
インライン再生を可能にするためにはautoplay、muted、playsinlineの３つの属性をtrueにしてください。

おわりに

以上で説明を終わります。動画ファイル形式はなにか理由がない限り、mp4形式をおすすめします。
ブラウザ環境によって表示できないファイル形式が存在するためです。
最後まで読んでいただきありがとうございます！
お疲れさまでした。。