とあるプロダーツプレイヤーの徒然日記

とあるプロダーツプレイヤーが徒然なるままによしなし事をそこはかとなく書きつくろいます

video_tagで動画を再生させる

概要

railsで動画再生する際にちょっとハマったので備忘録程度に記す

やってみる

手順は、ざっと言うと以下の通りである。

  • 画像を変換する
  • 画像をアップする
  • video_tagを使って読み込ませる

では、一つ一つ見ていく

画像を変換する

いろいろ調べると、ブラウザによって、再生できる動画ファイルの形式が違うらしい。 なので、手始めに動画ファイルの形式を変換する。(手っ取り早くwebm形式にする)

画像をアップロードする

public/videos/以下に置く or assets/videos/(未検証)におけばいいのではないかと。

public/videosは間違いない

video_tagを使って読み込ませる

下記のようなコードをかけばよい。

video_tagの仕様は下記のとおりだが、 video_tag - リファレンス - - Railsドキュメント

実際には、

video 要素 - HTML | MDN

に載ってるオプションも使える。

= video_tag 'test.webm', autoplay: true, muted: true, controls: true, preload: true

感想

webm形式の画像に変換するという予備知識が必要だったので、つまずいた。 webm形式にするのもいいが、いろんな形式の動画を用意しといて、ブラウザに合わせて出し分けるのがよりよい方法っぽい。 その場合は、htmlコードを直に書く必要があるのかも?

HTML5 の audio 要素と video 要素でサポートされているメディアフォーマット - HTML | MDN