How can I set preview of multiple video file, by selecting from input type='file'

Question

My Query is : How can I set preview of multiple video files, by selecting from input type='file'?

I already checked the single video file preview by selecting local video from input here.

But I want to select multiple videos at once and it should preview together all videos in different HTML5 player within different divs in the same class just like this picture.

This is the format after uploading multiple videos:

<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>

How can I do that?

The single video previewer:

(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>

score 2 · Accepted Answer · answered Feb 22 '21 at 17:31

You should better use createObjectURL in this case.

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>

How can I set preview of multiple video file, by selecting from input type='file'

1 Answers1