如何通过从输入类型='file'中选择来设置多个视频文件的预览
How can I set preview of multiple video file, by selecting from input type='file'
我的问题是:如何设置多个视频文件的预览,通过 selecting 从输入类型='file'?
我已经通过 select 从输入 here 获取本地视频检查了单个视频文件预览。
但我想一次 select 多个视频,它应该在同一个 class 中的不同 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>
在这种情况下,您最好使用 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>
我的问题是:如何设置多个视频文件的预览,通过 selecting 从输入类型='file'?
我已经通过 select 从输入 here 获取本地视频检查了单个视频文件预览。
但我想一次 select 多个视频,它应该在同一个 class 中的不同 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>
在这种情况下,您最好使用 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>