如何通过从 input type='file' 中选择来设置多个视频文件的预览答案

【问题标题】：How can I set preview of multiple video file, by selecting from input type='file'如何通过从 input type='file' 中选择来设置多个视频文件的预览
【发布时间】：2021-05-24 12:17:02
【问题描述】：

我的查询是：如何通过从 input type='file' 中选择来设置多个视频文件的预览？

我已经通过从输入 here 中选择本地视频来检查单个视频文件预览。

但我想一次选择多个视频，它应该在同一类的不同 div 中的不同 HTML5 播放器中一起预览所有视频，就像这张图片一样。

这是上传多个视频后的格式：

<div class="videoplayer">
<video controls="" autoplay="" src="//video-file-1.mp4"></video>
</div>

<div class="videoplayer">
<video controls="" autoplay="" src="//video-file-2.mp4"></video>
</div>

<div class="videoplayer">
<video controls="" autoplay="" src="//video-file-3.mp4"></video>
</div>

我该怎么做？

单个视频预览器：

(function localFileVideoPlayer() {
    'use strict'
  var URL = window.URL || window.webkitURL
  var displayMessage = function (message, isError) {
    var element = document.querySelector('#message')
    element.innerHTML = message
    element.className = isError ? 'error' : 'info'
  }
  var playSelectedFile = function (event) {
    var file = this.files[0]
    var type = file.type
    var videoNode = document.querySelector('video')
    var canPlay = videoNode.canPlayType(type)
    if (canPlay === '') canPlay = 'no'
    var message = 'Can play type "' + type + '": ' + canPlay
    var isError = canPlay === 'no'
    displayMessage(message, isError)

    if (isError) {
      return
    }

    var fileURL = URL.createObjectURL(file)
    videoNode.src = fileURL
  }
  var inputNode = document.querySelector('input')
  inputNode.addEventListener('change', playSelectedFile, false)
})()

video, input {
    display: block;
}

input {
    width: 100%;       
}

.info {
    background-color: aqua;            
}

.error {
    background-color: red;
    color: white;
}

<h1>HTML5 local video file player example</h1>
<div id="message"></div>
<input type="file" accept="video/*"/ multiple>
<video controls autoplay></video>

【问题讨论】：

标签： javascript html css video html5-video

【解决方案1】：

在这种情况下，您最好使用 createObjectURL。

document.querySelector("input[type=file]").onchange = function(event) {
    var numberOfVideos = event.target.files.length;
    for (var i = 0; i < numberOfVideos; i++) {
        var file = event.target.files[i];
        var blobURL = URL.createObjectURL(file);
        var video = document.createElement('video');
        video.src = blobURL;
        video.setAttribute("controls", "")
        var videos = document.getElementById("videos");
        videos.appendChild(video);
    }
}

video{width: 500px}

<input type="file" name="video" multiple>
<div id="videos"></div>

【讨论】：