はじめに
video_tagで横幅いっぱいに自動再生で動画を流す。
備忘録として残します。
つまずいたところ
- 動画のファイルの置所
- 自動再生
- 横幅を画面いっぱい、縦幅は指定
実装手順
app/assetsの直下にvideosフォルダを作成。
videosフォルダ内に背面で流したい動画を入れる。
(ここでは、test_video.mp4という動画ファイルを入れました。)
次にvideo_tagを使って動画を表示
index.html.haml
.video-content
= video_tag "test_video.mp4", loop: true, autoplay: true, muted: true
object-fit: cover;をつけることで、動画の横と縦の比率を変更できた。
動画も崩れないで再生されている。
index.scss
.image-content{
height: 80vh;
z-index: 1;
video{
width: 100%;
height: 100%;
object-fit: cover;
}
背面に動画を入れたい時は、position: absolute;などで調整してください。
videoタグの属性説明
| 属性 | 説明 |
|---|---|
| poster | 動画が再生されていない時に表示させる画像をパスで指定 |
| autoplay | ページのロードが完了したら自動的に動画を再生する |
| loop | 動画を繰り返すループ再生を許可する |
| controls | 再生ボタンやタイムラインなどのインターフェースパーツを表示させる |
| muted | 音声付き動画データの場合は消音にする |
| preload | 事前に動画データを読み込むか制御する、属性の値で指定する 【auto】初期値でページロードと合わせて読み込みされる 【none】動画データの読み込みがされない状態 【metadata】動画データのメタデータのみ読み込みされる |