はじめに

carrierwave(キャリアウエーブ)で保存した動画の再生方法のを紹介します。
今回は「自動再生」と「手動再生」の二種類に着目してます。

前提に、下記の記事の続きになってますので、既にcarrierwaveを導入してるかた向けです。
分量が多かったので「保存」と「再生」で分けております。
よかったら参考にしてみてください。

【Rails】carrierwave(キャリアウエーブ)で動画の投稿(保存)
https://qiita.com/AKI3/items/541ff4d43c20eff190e2

開発環境

ruby 2.6.5
rails 6.0.0

それでは実装していきます〜

まずは、自動再生の方法です。

ビューで表示するために@topsを定義し、データが格納されるようにします。

app/controllers/tops_controller.rb

class TopsController < ApplicationController
  def index
    @tops = Top.all #←ここを追記
  end

  def new
    @top = Top.new
  end
# 省略

次いでビューを編集します。

htmlに直接埋め込むだけならvideo_tagで再生が可能になるそうですが、railsでデータを取得して再生するにはオプションまで記述する必要があるみたいです。

app/views/tops/index.html.erb

# 省略
<% @tops.each do |top| %>
  <%= video_tag(top.video_top.to_s, :loop => true, :autoplay => true, :muted => true) %> #オプションは（）内に記述！
<% end %>

今回のオプションは、「繰り返し」「オートプレイ」「ミュート」を設定しました。自動再生をする際は:mutedオプションをつけなと再生されません。
:loop => true, :autoplay => true, :muted => true

完成です！！
リロードすると動画が再生されるはずです。

次に手動再生の方法です。
単純にオプションを編集します。

app/views/tops/index.html.erb

# 省略
<% @tops.each do |top| %>
  <%= video_tag(top.video_top.to_s, :controls => true)  %> #:controls => trueに編集
<% end %>

完成です！！！
「再生マーク」を押すと動画が流れ始めるはずです。
下記の参考にさせていただいた資料の中に、オプションに関する資料があるので、よっからそちらも参照してみてください。

キャリアウエーブ（carrierwave）を使った動画の再生方法を「自動」と「手動」に分けて紹介しました。

私はプログラミング初学者ですが、自分と同じ様にエンジニアを目指す方々の助けになればと思い、記事を投稿しております。
それではまた次回お会いしましょう〜

【Rails】carrierwave(キャリアウエーブ)で動画の投稿(保存)　