[Rails]動画プレビュー機能

#はじめに
今回、動画のプレビュー機能を追加したのでその方法について、説明します。

####環境
Rails 5.2.3
Ruby 2.5.1

##導入方法
####ビューファイル
気を付ける点は、file_fieldにid: "upload-image"をjQueryを使用する為に記述します。

new.html.haml

= form_for @video do |f|
　　　　　　省略
 .movie-group-form__field--right--mask
   = f.label :image, for: "upload-image", class: "movie-group-form__movie" do
     = fa_icon "cloud-upload fa-spin", class: "icon"
     = f.file_field :image, class: "hidden", id: "upload-image"
     = f.label :動画を選択してください , class: "movie-group-form__choice"
 = f.submit "投稿する", class: "btn btn-dark"

####jQuery
次にJSファイルに動画プレビューをさせる記述をします。
$fileFieldにビューのidに記述したupload-imageに#を付けて記述します。

$previewには動画をプレビュー表示させたい部分(今回は.movie-group-form__choice)に記述します。
$preview.append($('<video>').attr({内にCSSを記述してます。autoplay: "autoplay"、loop: "loop"で動画のプレビューをオート再生させています。
playsinline: "true"はスマホで動画を投稿した際に、オート再生するのに使用します。

preview.js

$(document).on('turbolinks:load', function() {
  $fileField = $('#upload-image')

  $($fileField).on('change', $fileField, function(e) {

      file = e.target.files[0]
      reader = new FileReader(),
      $preview = $(".movie-group-form__choice");

      reader.onload = (function(file) {
        return function(e) {
          $preview.empty();
          $preview.append($('<video>').attr({
            src: e.target.result,
            width: "45%",
            height: "110px",
            class: "preview-image",
            autoplay: "autoplay",
            loop: "loop",
            playsinline: "true",
            title: file.name
          }));
        };
      })(file);
      reader.readAsDataURL(file);
    });
  });

今回はJS内にCSSを直接記述しているので、CSSファイルの変更は必要ないです。後は好みで調整して下さい。

#まとめ
動画のプレビューも画像のプレビューとほぼ同じで、後はappendに'<video>'か'<img>'を記述するだけで、動画か画像のプレビュー表示かを変更する事が出来ます。気になったら試してみて下さい。