个人中心
文章发布
退出
作者热门文章
- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库？
- java - OnItemClickListener 不起作用，但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
27
4
如何获取通过 <input type="file"> 选择的视频文件的快照在视频中的特定时间在后台静默(即没有可见元素、闪烁、声音等)？
最佳答案
主要有四个步骤:
<canvas>和 <video>元素。src URL.createObjectURL 生成的视频文件进入<video>元素并等待它加载通过监听被触发的特定事件。这很简单:只需创建一个 <canvas>和一个<video>元素并将它们附加到 <body> (或任何地方，这并不重要):
var canvasElem = $( '<canvas class="snapshot-generator"></canvas>' ).appendTo(document.body)[0];
var $video = $( '<video muted class="snapshot-generator"></video>' ).appendTo(document.body);
请注意视频元素具有属性 muted .不要放置任何其他属性，如 autoplay或 controls .另请注意，它们都有类 snapshot-generator .这样我们就可以为它们设置样式，使它们不碍事:
.snapshot-generator {
display: block;
height: 1px;
left: 0;
object-fit: contain;
position: fixed;
top: 0;
width: 1px;
z-index: -1;
}
一些浏览器将它们设置为 display: none ，但其他浏览器将有严重的问题，除非它们被呈现在页面上，所以我们只是把它们做得很小，这样它们基本上是不可见的。 (不要将它们移出视口(viewport)，否则您可能会在页面上看到一些难看的滚动条。)
这里是事情开始变得棘手的地方。您需要收听事件以了解何时继续。不同的浏览器会触发不同的事件、不同的时间和不同的顺序，所以我会为你省力。在视频准备好之前，必须始终至少触发三个事件；他们是:
为这些事件设置事件处理程序并跟踪触发了多少事件。一旦所有三个都开火，你就可以继续了。请记住，由于其中一些事件可能会多次触发，您只想处理触发的每种类型的第一个事件，并丢弃后续触发。我使用了 jQuery 的 .one。 ，它会处理这个问题。
var step_2_events_fired = 0;
$video.one('loadedmetadata loadeddata suspend', function() {
if (++step_2_events_fired == 3) {
// Ready for next step
}
}).prop('src', insert_source_here);
源应该只是通过 URL.createObjectURL(file) 创建的对象 URL , 其中file是文件对象。
这个阶段和之前的类似:设置时间然后监听一个事件。在我们的内部 if从前面的代码块:
$video.one('seeked', function() {
// Ready for next step
}).prop('currentTime', insert_time_here_in_seconds);
幸运的是这次只有一个事件，所以它非常清晰简洁。终于……
这部分只是使用<canvas>元素来抓取屏幕截图。在我们的内部 seeked事件处理程序:
canvas_elem.height = this.videoHeight;
canvas_elem.width = this.videoWidth;
canvas_elem.getContext('2d').drawImage(this, 0, 0);
var snapshot = canvas_elem.toDataURL();
// Remove elements as they are no longer needed
$video.remove();
$(canvas_elem).remove();
Canvas 需要匹配视频的尺寸(不是 <video> 元素)才能获得正确的图像。此外，我们正在设置 Canvas 的内部 .height和 .width属性，不是 Canvas 高度/宽度 CSS 样式值。
snapshot的值是一个数据URI，基本上就是一个以data:image/jpeg;base64开头的字符串然后是 base64 数据。
我们最终的 JS 代码应该是这样的:
var step_2_events_fired = 0;
$video.one('loadedmetadata loadeddata suspend', function() {
if (++step_2_events_fired == 3) {
$video.one('seeked', function() {
canvas_elem.height = this.videoHeight;
canvas_elem.width = this.videoWidth;
canvas_elem.getContext('2d').drawImage(this, 0, 0);
var snapshot = canvas_elem.toDataURL();
// Delete the elements as they are no longer needed
$video.remove();
$(canvas_elem).remove();
}).prop('currentTime', insert_time_here_in_seconds);
}
}).prop('src', insert_source_here);
你的图像是 base64 格式的!将此发送到您的服务器，将其作为 src的 <img>元素，或其他任何东西。
比如可以解码成二进制，直接写入文件(先去掉前缀)，就会变成JPEG图片文件。
您还可以使用它在上传视频时提供视频预览。如果你把它写成 src的 <img> ，使用完整的数据 URI (不要删除前缀)。
关于javascript - 生成特定时间文件输入选中的视频文件的缩略图/快照，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36883037/
27
4
0
Maven – 快照 大型软件应用程序通常由多个模块组成，这是多个团队工作于同一应用程序的不同模块的常见场景。例如一个团队工作负责应用程序的前端应用用户接口工程（app-ui.jar:1.0)），同
我的 ES 快照不起作用或看起来是空的。 首先，我在我的 Ubuntu 服务器上做了这个: 1.创建备份目录 mkdir /home/admin/dumps/elasticsearch 2. 将此目录
您好，我想将折线图保存为预定义尺寸 (x, y) 的图像。有没有简单的方法来做到这一点？我找不到任何合适的 Snapshot 参数。 WritableImage image = lineCha
我将 Genymotion 与 Oracle VirtualBox 一起使用，但是我有 250 GB 的 SSD，并且我遇到了(快照)问题 我在这里搜索并搜索，我找不到任何可能的方法来禁用自动快照，因
我们想使用 Grafana 来显示测量数据。现在，我们的测量设置创建了大量数据并保存在文件中。我们按原样保留文件，并直接使用 Spark(“数据湖”方法)对其进行后处理。 我们现在想要创建一些可视化，
我不知道如何制作节点组的快照。也就是说，我想制作一个覆盖有数字的 PNG 图标图像(例如未读消息)。 我的代码: int totalNumberOfUnreadMessages = 1; ImageV
我们想使用 Grafana 来显示测量数据。现在，我们的测量设置创建了大量数据并保存在文件中。我们按原样保留文件，并直接使用 Spark(“数据湖”方法)对其进行后处理。 我们现在想要创建一些可视化，
这个问题在这里已经有了答案: How do I return the response from an asynchronous call? (41 个回答) 关闭 4 年前。 function i
我试图在运行我的程序时保存所有内容。我想保存每个游戏对象及其脚本和变量。我知道可以序列化所有内容并将其保存为 XML(以及其他方式/格式，如 JSON)。这将需要大量的工作和时间。该程序将来可能会发生
我正在玩 Screeps ( http://screeps.com/ ) 模拟房间模式。我已经测试了一些东西，我不想失去我的进步。 我可以在模拟房间模式下拍摄快照并保存我的房间状态，这样我就不必从头开
我的应用程序的测试人员报告:“最近的应用程序列表中的应用程序缩略图根本没有调整。在我看来，它要么像主屏幕壁纸(tolikdru:可能，只是透明的矩形)，要么像应用程序屏幕的绿色背景，但从来没有真正的应
这个问题在这里已经有了答案: JavaFX I want to save Chart-Image completely (1 个回答) 关闭 3 年前。 我正在尝试获取“Java 弹出窗口”的快照。
我正在使用 pymongo 从 MongoDB 中插入和检索数据。这两个操作可以同时执行。问题是我什么时候做 rows = db..find()在pymongo中，每次rows.count()返回不同
如何获取通过 选择的视频文件的快照在视频中的特定时间在后台静默(即没有可见元素、闪烁、声音等)？ 最佳答案 主要有四个步骤: 创建 和 元素。 加载src URL.createObjectURL 生
您好，我正在使用 JavaFx WebView 创建 HTML 页面的屏幕截图，它工作正常，但我想知道是否可以在不在图形窗口中启动应用程序的情况下执行此操作!!我的意思是没有比这更轻量级的方法来获取屏
所以我有一个 horizontalscrollview，我想尝试添加一个对齐效果，它基本上使元素居中。到目前为止，我基本上都是用 XML 完成的。 然后我在里面有一个 LinearLayout。
调用 URL http:///gitweb.cgi?p=;a=tree;f=;hb=HEAD将显示 的树从 开始. 调用 URL http:///gitweb.cgi?p=;a=snapshot;
我们知道，Maven 项目第一次构建时，会自动从远程仓库搜索依赖项，并将其下载到本地仓库中。当项目再进行构建时，会直接从本地仓库搜索依赖项并引用，而不会再次向远程仓库获取。这样的设计能够避免项目每次构
这个问题在这里已经有了答案: Freeze screen in chrome debugger / DevTools panel for popover inspection? (9 个回答) 关闭
我正在开发一个向 DVR 和 IP 摄像机请求快照的应用程序。我正在开发的设备只提供 RTSP 请求。然后我实现了必要的 RTSP 方法来开始接收流数据包，然后通过建立的 UDP 连接开始接收。我的疑
我是一名优秀的程序员,十分优秀！