More than 3 years have passed since last update.

【Rails】carrierwave(キャリアウエーブ)の再生方法　「自動再生」「手動再生

Posted at 2020-12-02

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

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

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

###目次

#開発環境
ruby 2.6.5
rails 6.0.0

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

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

####コントローラーの編集
ビューで表示するために@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

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

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

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(キャリアウエーブ)で動画の投稿(保存)　