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

Posted

技术标签:

【中文标题】我可以为 HTML5 文件上传设置视频长度限制吗?【英文标题】:Can I set a video length limit on a HTML5 file upload? 【发布时间】:2016-09-05 17:23:32 【问题描述】:

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

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

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

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

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

【问题讨论】:

在这里试试这个答案:***.com/questions/31623222/… 它可能会解决您的需求。 您总是需要接受服务器上的文件以运行 mediaInfo 查询以查看剪辑的长度,如果太长,您可以从那里删除它。但它需要到达您的服务器才能确定。 . -> 原因是您无法在客户端文件系统上执行任何您需要的操作。 嗯。如果客户端可以先上传整个文件,那可以解决问题。我认为在上传文件之前可能没有任何方法可以告诉这些信息,就像你可以使用文件大小一样,但如果其他人有一个想法,它真的会救我!谢谢京东。 @user1929274 我可能说得太早了:mediainfo.js.org -> 我没有亲自尝试过,也不知道它的内部功能这可能有效。 【参考方案1】:

这是我发现的:

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

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

【讨论】:

以上是关于我可以为 HTML5 文件上传设置视频长度限制吗?的主要内容,如果未能解决你的问题,请参考以下文章

我可以在youtube上上传视频并限制它仅在我的网站上查看吗?

GCS 签名 URL:我可以设置上传的最大文件大小吗? [复制]

Youtube API 上传视频大小和长度限制

Youtube API上传视频大小和长度限制

Chrome或者IE浏览器支持h264视频流播放吗?(不是MP4文件,仅仅是h264编码的视频流)

wordpress上传限制问题!被限制在64M...