我可以为HTML5文件上传设置视频长度限制吗?

时间:2016-05-10 15:54:56

标签: javascript php node.js html5

通过HTML5输入上传视频时,例如:

<input type="file" id="input">

我知道可以使用PHP / Node.Js设置文件大小限制。

有没有办法设置视频长度限制,而不是文件大小?

I.E:仅允许用户上传15秒或更短的视频。

1 个答案:

答案 0 :(得分:2)

这是我发现的:

解决方案1: 创建一个播放本地视频文件的视频元素,然后在其上运行video.duration。

&#13;
&#13;
var vid = document.getElementById("myVideo");

function myFunction() { 
    alert(vid.duration);
} 

(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)
})()
&#13;
<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>
&#13;
&#13;
&#13;

解决方案2:使用mediainfo.js https://mediainfo.js.org/