如何使用JavaScript

Question

我发现问题是否可行（无论何时都找不到任何信息）。是否可以在视频上传期间提取一个帧（缩略图）？如果可以提取用户端，则使用jscript提取也是一种选择。

感谢您的帮助！

Answer 1

自此问题发布以来已快五年了，答案现在是是！

<强> Live demo

如何使用JavaScript

在视频上传期间提取帧

在显示代码之前，我们将这样做：

在将要上传视频的输入元素上设置事件处理程序
从文件系统中选择文件时，请使用URL对象为本地视频文件创建网址。
将该网址加载到video元素中。
当视频加载到内存中时，在canvas对象上绘制一个帧。
现在将画布上呈现的帧导出为image元素（或者可选择将该图像作为数据网址发送到服务器）。

<input type="file" id="upload"/>
<img id="thumbnail"/>

<script>
var input = document.getElementById('upload');
var img = document.getElementById('thumbnail');

input.addEventListener('change', function(event){
    var file = this.files[0];
    var url = URL.createObjectURL(file);

    var video = document.createElement('video');
    video.src = url;

    var snapshot = function(){
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');

        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
        img.src = canvas.toDataURL('image/png');

        video.removeEventListener('canplay', snapshot);
    };

    video.addEventListener('canplay', snapshot);
});
</script>

Answer 2

我认为在php中有一个很好的方法。（https://stackoverflow.com/a/1309425/1488032）

如果它不仅仅是您租用的某个网站空间但有权在服务器上安装和运行其他软件，我建议使用类似ffmpeg的东西，并使用 system（）， passthru（）或 exec（）来提取您想要的内容并再次在php中完成剩余的处理。

我正在运行依赖于嵌入在xhtml中的svg图像的浏览器游戏，但某些浏览器（尤其是移动浏览器）不支持完整的svg语法。在这种情况下，我使用这样的 system（）调用来使用imagemagick的 convert 二进制文件进行svg-to-png转换，并在我的页面上显示结果。

system("echo '$svgString' | convert svg:- png:- | base64");

我想你必须回归类似的东西。

以下是使用ffmpeg提取帧的一些信息： http://ubuntuforums.org/showthread.php?t=1141293

Answer 3

Javascript：没有。

上传期间：否。

上传后，是的。

“Dev”在评论中提供了正确的链接，但您应该做的是将视频保存到服务器，然后运行ffMpeg来抓取图像。你可以在这里下载ffMPEG：http://ffmpeg.org/download.html（如果你对自己构建它没有信心，那就抓住你需要的构建 - 有Linux和Windows版本。）

文档在这里：http://ffmpeg.org/ffmpeg.html但在http://linuxers.org/tutorial/how-extract-images-video-using-ffmpeg处有一个稍微容易阅读的教程，用于抓取图像。

注意：有一个PHP扩展名为“phpFFMPEG”，但我建议你不要使用它。只需通过PHP中的“exec（）”运行所需的命令即可。检查错误返回值，因为每个CPU核心只能运行一次ffMPEG，因此如果您同时尝试两次它可能会失败 - 要么排队操作，要么在失败时再试一次。

Answer 4

首先，您需要选择一个程序来提取框架。 ffmpeg通常用于此。无论你选择什么，它都需要能够使用部分文件内容。

php脚本直到整个文件上传完成后才开始执行，但是php最近得到了一个功能，以便在文件上传期间可以执行不同的 php脚本，并且能够获得上传脚本数据（文件名是你感兴趣的东西）。 http://php.net/manual/en/session.upload-progress.php

然后，基本上调用外部程序从监视脚本中提取帧，使用在上载处理脚本中上传的临时文件名。

总结：将文件上传到upload.php。 monitor.php将在upload.php中上传临时文件名，并提取框架。

Answer 5

基本上，我接受了这个帖子中提供的rodrigo-silveira答案并修改了它供我使用，现在解决方案就像一个魅力。甚至我也试图上传用户希望上传的视频缩略图/海报，并将视频和缩略图保存在文件夹中。另外，我不想使用ffmpeg。

以下是我所做的：在名为＆＃34; upload.php＆＃34;的上传文件中我有以下代码，对上面的rodrigo-silveira解决方案略有修改：

upload.php的：

＆＃13;

<input type="file" id="upload"/>
<img id="thumbnail"/>

<form action="action_page.php" method="post" target="_blank">
<input type="hidden" id="mytext" name="mytext" >
<input type="submit" value="Submit">
</form>

＆＃13;

<script>
var input = document.getElementById('upload');
var img = document.getElementById('thumbnail');

input.addEventListener('change', function(event){
    var file = this.files[0];
    var url = URL.createObjectURL(file);

    var video = document.createElement('video');
    video.src = url;

    var snapshot = function(){
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
		canvas.width = 350;
		canvas.height = 250;
        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
        img.src = canvas.toDataURL('image/png');
		document.getElementById("mytext").value = img.src;
        video.removeEventListener('canplay', snapshot);
    };
	
    video.addEventListener('canplay', snapshot);
});
</script>

＆＃13;

上面的HTML部分和JavaScript都在upload.php的body标记内。

现在转到action_page.php文件：

<?php
$data = $_POST['mytext'];
$file = "photos/file".time().".png";
$uri = substr($data,strpos($data, ",") + 1);
file_put_contents($file, base64_decode($uri));
?>

将两个PHP文件保存在同一个文件夹中，然后创建另一个名为＆＃34; photos＆＃34;在那个文件夹中。您在upload.php页面中选择的视频中的视频缩略图/海报图片会保存在＆＃34;照片＆＃34;文件夹为png文件。（注意：此解决方案不会上传视频，只会上传视频缩略图。但从现在开始，这是直截了当的。）

PHP - 在视频上传期间提取帧

5 个答案:

如何使用JavaScript