2
當通過HTML5輸入上傳的視頻如:我可以爲HTML5文件上傳設置視頻長度限制嗎?
<input type="file" id="input">
我知道這是可能使用PHP/Node.js的設置文件大小的限制
有沒有辦法對視頻長度設置限制,而不是文件大小?
I.E:只允許用戶上傳15秒或更短的視頻。
當通過HTML5輸入上傳的視頻如:我可以爲HTML5文件上傳設置視頻長度限制嗎?
<input type="file" id="input">
我知道這是可能使用PHP/Node.js的設置文件大小的限制
有沒有辦法對視頻長度設置限制,而不是文件大小?
I.E:只允許用戶上傳15秒或更短的視頻。
這裏是我的發現:
解決方案1: 創建一個播放本地視頻文件,然後在其上運行video.duration視頻元素。
var vid = document.getElementById("myVideo");
function myFunction() {
alert(vid.duration);
}
(function localFileVideoPlayer() {
\t '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)
})()
<h3>Step 1: Upload a video</h3>
<h3>Step 2: Get length</h3>
<h3>Step 3: ???</h3>
<h3>Step 4: Profit</h3>
<button onclick="myFunction()" type="button">Get video length</button>
<hr>
<div id="message"></div>
<input type="file" accept="video/*"/>
<video controls autoplay id="myVideo"></video>
解決方案2:使用mediainfo.js https://mediainfo.js.org/
看起來很酷,但當我點擊「獲取視頻長度」時,我得到NaN – Antoine
這裏嘗試這樣的回答:http://stackoverflow.com/questions/31623222/set-duration-of-video -play-with-html5它可以解決你的需求。 – Cutter
您將始終需要接受服務器上的文件以運行mediaInfo查詢來查看剪輯的長度,如果剪輯太長,可以將其刪除。但它需要到達您的服務器才能確定。 。 - > **原因是你不能在客戶端文件系統上執行任何你需要的操作。** – Pogrindis
嗯。如果客戶可以首先上傳整個文件,那可以做到這一點。我不認爲在上傳文件之前可能有任何方法告訴這些信息,就像文件大小一樣,但如果有其他人有想法,它真的會救我!謝謝JD。 –