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

Posted 2023-05-07

【中文标题】如何通过从 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>

【参考方案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);
    

videowidth: 500px

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