好的,正如我在 cmets 中提到的,我对这个很感兴趣,所以我决定四处看看,看看有什么可能。简短的回答,不是很多。但是以一种非常有限的方式看起来......有点可能。
我想先说这本身并不是一个真正的答案,而是一个概念验证。它使用了一些 HTML5 功能,例如 <video> 和 FileReader - 我认为可能可以读取 <video> 标记的持续时间,所以我在 Google 上进行了一些搜索。
因为它们在旧浏览器上显然会失败......我只在 Chrome 上检查过这个。我不知道 FileReader 在 Firefox 中的实现方式是否不同。我也不能代表其他视频格式等。
无论如何,我当然不会依赖它进行验证,但它可以作为现代浏览器“方便”验证功能的起点?
我仍然认为,这里唯一强大的全面验证解决方案是:
- 允许将不超过合理大小限制的任何视频上传到您的服务器。
- 在服务器上创建一个队列/异步进程,对文件本身执行第二遍验证。正如我提到的
ffmpeg 在这里可能是一个不错的选择?
顺便说一下,这是一个 SO 答案,它演示了 getting length of a video using ffmpeg
使用input[type=file] 元素创建一个页面test.html:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Duration</title>
</head>
<body>
<input id="upload" type="file">
<div id="duration">Please choose a video</div>
<script src="path/to/duration.js"></script>
</body>
</html>
path/to/duration.js 脚本的内容...原谅我的 JavaScript,它远非完美:
(function() {
var upload = document.getElementById('upload'), // form input
duration = document.getElementById('duration'); // output for user
// add a change event listener to the form input
upload.addEventListener('change', function(e) {
var file,
reader;
// check that a file has been selected
if (this.files.length !== 1) {
return;
}
duration.innerText = 'reading video...';
file = this.files[0];
// check the file's mime type, we want mp4 in this example
if (file.type !== 'video/mp4') {
duration.innerText = 'expected video/mp4, got ' + file.type;
return false;
}
// create a FileReader object
// and read the file as a data/url
// string so we can inline it later
reader = new FileReader();
reader.readAsDataURL(file);
// callback when the reader is complete
reader.onload = function() {
var video,
timeout;
duration.innerText = 'processing video...';
// create a html <video> element
// assign data/url as src
video = document.createElement('video');
video.src = this.result;
// poll the video readyState until it's ready
// this came from another SO answer (which I accidentally closed... sorry/thanks :s )
// we should now have our video duration, so echo to the browser!
timeout = setInterval(function(){
if (video.readyState > 0) {
duration.innerText = 'video is ' + video.duration + ' seconds';
clearInterval(timeout);
}
}, 500);
};
}, false);
})();
粗略准备好了!
顺便说一句,HTML5 Rocks 文档确实很有帮助。
希望这会有所帮助:)