如何在网站上预览用户要上传的视频文件

Question

<div class="image-preview" id="imagePreview">
            <img src="" class="image-preview__image">
          </div>

          <div class="image-preview" id="videoPreview">
            <video controls autoplay muted class="video-preview__image" id="video" src=""></video>
          </div>

        <br>
        <label for="inpFile"><img id="image_icon" src="http://localhost/mybook/images/images_icon.png"></label>
        <input id="inpFile" type="file" name="file" style="display:none;" >
        <input id="post_button" type="submit" value="Post" style="margin:5px;">

我想在提交前显示上传视频文件的预览。多亏了以下 JS，我已经成功地使用图像完成了此操作，但它不适用于视频文件...

const inpFile = document.getElementById("inpFile");
  const previewContainer = document.getElementById("imagePreview");
  const originalImage = document.getElementById("originalImage");
  const previewImage = previewContainer.querySelector(".image-preview__image");

  inpFile.addEventListener("change", function() {
    const file = this.files[0];

    if (file) {
      const reader = new FileReader();

      previewContainer.style.display = "block";
      previewImage.style.display = "block";
      originalImage.style.display = "none";

      reader.addEventListener("load", function() {
        previewImage.setAttribute("src", this.result);
      });

      reader.readAsDataURL(file);
    }else{
      previewImage.style.display = null;
      previewImage.setAttribute("src","");
    }
  });

Answer 1

nikoss 的回答可能对您有所帮助。

图片使用img，视频使用video。