動画のプレビュー機能を実装したい

Question

前提・実現したいこと

Rails: 6.0.3
ruby: 2.6.3
AWS Cloud9
Active Storage

railsで動画や漫画を投稿できるwebサービスを制作しています。
新規投稿画面にて動画を投稿した時のプレビュー機能を実装したいです

試したこと

漫画を投稿した際の画像のプレビュー機能は実装できており、
下記のコードを応用して動画もプレビューできないかと考えております。

<p class="sign" align="center">マンガを投稿する</p>
<div class="form">
  <%= form_with model: @work, local: true do |form| %>
          
  <div class="manga-image" align="center">
    <%= form.label :icatch, "表紙を選ぶ", class: "image_input_btn" %>
    <%= form.file_field :icatch, class: "image_form push", onchange: "loadImage(this);"  %>
    <div id="post_images" style="display: none;">
      <p id="preview"></p>
    </div>
    <%= render "loadimage" %>
  </div>

<script>
  function loadImage(obj)
  {
    var allPreview = document.getElementById('post_images');
    var newPreview = document.createElement("p");
    allPreview.querySelector("p").remove();
    newPreview.setAttribute("id","preview");
    allPreview.insertBefore(newPreview, allPreview.firstChild);
    document.getElementById("post_images").style.display = "";
    for (i = 0; i < obj.files.length; i++) {
        var fileReader = new FileReader();
        fileReader.onload = (function (e) {
            var img = new Image();
            img.src = e.target.result;
            document.getElementById('preview').appendChild(img);
        });
      fileReader.readAsDataURL(obj.files[i]);
    }
  }
</script>

補足情報（FW/ツールのバージョンなど）

画像のプレビューはこちらを参照させていただきました。
https://qiita.com/sharesence/items/61f1136b7e1d92efa8e8

やりかたにこだわりがある訳ではないので、もしもっと良い方法や
簡単な方法があればぜひ教えて頂けると嬉しいです。

よろしくお願いいたします。

Answer 1

    for (i = 0; i < obj.files.length; i++) {
        var file = obj.files[i];
        var fileReader = new FileReader();
        // (1)
        var isVideo = file.type.match(/^video//)
        if (isVideo) {
          fileReader.onload = (function (e) {
              // (2)
              var video = document.createElement("video")
              video.src = URL.createObjectURL(file);
              video.setAttribute("autoplay", "true")
              document.getElementById('preview').appendChild(video);
          });
        } else {
          fileReader.onload = (function (e) {
              var img = new Image();
              img.src = e.target.result;
              document.getElementById('preview').appendChild(img);
          });
        }
        fileReader.readAsDataURL(file);
     }

(1) file.type でファイルの種別を判定します。
image/jpeg や video/webm などの値が返ってくるので、今回は video/ で始まる場合は video と判定しています。

(2) videoタグを作り src 属性を設定して #preview に追加します。
video の src には URL を指定する必要があります。URL.createObjectURL で file を URL に変換します。

Comments

[AkiDatsugoku26]

neko_daisukiさん回答ありがとうございます。
ほとんど諦めかけていて別の事をやっていたのですが改めて挑戦してみます。
解決できましたらこちらでまたコメントしますが取り急ぎお礼申し上げます！