如何上传视频并在HTML页面中显示？

Question

我希望能够上传视频并在HTML页面中显示。目前，我已经成功地将图片上传并在页面上显示。

我该怎么做才能将视频也实现同样的功能呢？

我的代码：

$('#addPhotosBtn').click(function() {
  $(this).parents().find('#addPhotosInput').click();
});

document.getElementById('addPhotosInput').onchange = e => {
  const file = e.target.files[0];
  const url = URL.createObjectURL(file);
  const li = ` <li> <img src=" ${url} ">
       <span><i class="fa fa-trash"></i></span>
   </li>`
  $('.photos-list ul').append(li);
};

.photos-list ul,
.videos-list ul {
  margin: 0px;
  padding: 0px;
}

.photos-list ul li,
.videos-list ul li {
  list-style: none;
  float: left;
  width: 19%;
  margin: 5px;
  position: relative;
}

.photos-list ul li img,
.videos-list ul li img {
  width: 100%;
  border-radius: 10px;
  height: 110px;
}

.photos-list ul li span,
.videos-list ul li span {
  position: absolute;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, .5);
  padding: 5px 10px;
  cursor: pointer;
}

.photos-list ul li span svg,
.videos-list ul li span svg {
  color: #fff;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <input type="file" class="d-none" id="addPhotosInput">
      <button class="btn btn-secondary" id="addPhotosBtn">Add Photos <i class="fa fa-camera"></i> </button>
    </div>
    <div class="col-md-12">
      <div class="photos-list">
        <ul>

        </ul>
      </div>
    </div>
  </div>
</div>

感谢您的努力！

- Rohit Verma

---

请检查以下链接，可能会对您有所帮助：https://jsfiddle.net/9pfjq6zr/2/ 并在“validExtensions”变量中添加视频扩展名，如mp4、wmv、webm等。 - Hardik Godhani

validExtensions = ["mp4","webm","wmv"]; 这样。 - Hardik Godhani

Answer 1

1. 我已在<input type='file'>上添加了accept属性，用于指定用户可以从对话框中选择哪些文件类型：

   图片：accept="image/png, image/gif, image/jpeg"，视频： accept=" video/*"

2. 我还在JS代码中添加了<video>元素，这是一种在网页中嵌入视频的标准方法。

   <video controls="controls" src="${url}" type="video/mp4" width="400px" height="200px"></video>

$('#addPhotosBtn').click(function() {
  $(this).parents().find('#addPhotosInput').click();
});

document.getElementById('addPhotosInput').onchange = e => {
  const file = e.target.files[0];
  const url = URL.createObjectURL(file);
  const li = ` <li> <img src=" ${url} ">
   <span><i class="fa fa-trash"></i></span>
   </li>`
  $('.photos-list ul').append(li);
};

$('#addVideosBtn').click(function() {
  $(this).parents().find('#addVideosInput').click();
});

document.getElementById('addVideosInput').onchange = e => {
  const file = e.target.files[0];
  const url = URL.createObjectURL(file);
  const li = ` <li> <video controls="controls" src=" ${url} " type="video/mp4" width="400px" height="200px"></video>
       <span><i class="fa fa-trash"></i></span>
   </li>`
  $('.video-list ul').append(li);
};

.photos-list ul,
.videos-list ul {
  margin: 0px;
  padding: 0px;
}

.photos-list ul li,
.videos-list ul li {
  list-style: none;
  float: left;
  width: 19%;
  margin: 5px;
  position: relative;
}

.photos-list ul li img,
.videos-list ul li img {
  width: 100%;
  border-radius: 10px;
  height: 110px;
}

.photos-list ul li span,
.videos-list ul li span {
  position: absolute;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, .5);
  padding: 5px 10px;
  cursor: pointer;
}

.photos-list ul li span svg,
.videos-list ul li span svg {
  color: #fff;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<div class="container">

  <!-- Photos -->
  <div class="row">
    <div class="col-md-4">
      <input type="file" class="d-none" id="addPhotosInput" accept="image/png, image/gif, image/jpeg">
      <button class="btn btn-secondary" id="addPhotosBtn">Add Photos <i class="fa fa-camera"></i> </button>
    </div>
    <div class="col-md-12">
      <div class="photos-list">
        <ul>

        </ul>
      </div>
    </div>
  </div>
  
<!-- Video -->

  <div class="row">
    <div class="col-md-4">
      <input type="file" class="d-none" id="addVideosInput" accept=" video/*">
      <button class="btn btn-secondary" id="addVideosBtn">Add Videos <i class="fa fa-camera"></i> </button>
    </div>
    <div class="col-md-12">
      <div class="video-list">
        <ul>

        </ul>
      </div>
    </div>
  </div>

</div>

参考文献：HTML5视频，<input>的accept属性

- NcXNaV