html5获取视频帧,从HTML5和JavaScript的视频捕获帧

原因

问题是寻求视频(通过设置它的currentTime)是异步的。

您需要聆听被请求的事件，否则将冒险采取实际的当前框架，这可能是您的旧价值。

由于它是异步的，所以不能使用setInterval()，因为它是异步的，当下一个框架被查找时，您将无法正确同步。没有必要使用setInterval()，因为我们将使用seekked事件，而不会使所有内容都同步。

解

通过重写代码，您可以使用被查看的事件来浏览视频以捕获正确的帧，因为此事件确保我们实际上是通过设置currentTime属性在我们请求的帧。

例

// global or parent scope of handlers

var video = document.getElementById("video"); // added for clarity: this is needed

var i = 0;

video.addEventListener('loadeddata', function() {

this.currentTime = i;

});

将此事件处理程序添加到聚会中：

video.addEventListener('seeked', function() {

// now video has seeked and current frames will show

// at the time as we expect

generateThumbnail(i);

// when frame is captured increase, here by 5 seconds

i += 5;

// if we are not passed end, seek to next interval

if (i <= this.duration) {

// this will trigger another seeked event

this.currentTime = i;

}

else {

// Done!, next action

}

});

html5获取视频帧,从HTML5和JavaScript的视频捕获帧相关推荐

html视频自动缩放,HTML5 视频（videos）缩放JavaScript插件
简要教程 video-resize是一款可以对HTML5 视频(videos)进行缩放的JavaScript插件.插件中设置了不同的响应式断点,并通过插入样式表的方式来修改HTML5视频的显示尺寸. ...
h5禁用浏览器下载视频_【HTML5】video 标签禁用自带的下载按钮
h5自带的 video标签 ,会有个下载按钮,有时候想避免,就可以利用样式的方法 video::-internal-media-controls-download-button { display:n ...
html5 audio js控制进度,HTML5多媒体的之audio和video。JavaScript控制进度条播放进度
使用HTML5多媒体,audio和video两个元素可以让用户不必借助flash player插件即可播放音频和视频. 小知识:视频文件包含了音频轨道,视频轨道和其他一些元数据.当我们播放视频的时候, ...
100行JS代码实现❤坦克大战js小游戏源码 HTML5坦克大战游戏代码(HTML+CSS+JavaScript )
坦克大战js小游戏源码 HTML5坦克大战游戏代码(HTML+CSS+JavaScript ) HTML5坦克大战网页小游戏,完美还原小霸王学习机效果,以坦克战斗及保卫基地为主题,属于策略型类游戏. ...
HTML5期末大作业：个人网站设计——个人旅游图片博客HTML5模板(7个页面) HTML+CSS+JavaScript 学生网页课程设计期末作业下载
HTML5期末大作业:个人网站设计--个人旅游图片博客HTML5模板(7个页面) HTML+CSS+JavaScript 学生网页课程设计期末作业下载临近期末, 你还在为HTML网页设计结课作业,老 ...
html5 获取多媒体,基于HTML5的多媒体支持
HTML5多媒体新增特性截止至今,多媒体内容在大多数情况下都是通过第三方插件或者集成在web浏览器上的应用程序放到网页上的.此类插件包括realplayer.silverlight和quicktim ...
调用视频流html代码,如何将/“流”视频文件发送到HTML5视频标签
我试着将一个视频文件发送到HTML5 我发现了一个可以追溯到2010年的片段. 它在互联网上到处复制,并且仍然在传播,在代码风格.名称.使用的Node.js API版本或库上有一些细微的差异. 这是片 ...
html5获取地理位置信息API
html5获取地理位置信息API 在HTML5中,可以看下如何使用Geolocation API来获得用户的地理位置信息,如果该浏览器支持的话,且设备具有定位功能,就能够直接使用这组API来获取当前位 ...
html中视频代码字段,Html5通过数据流方式播放视频的实现
本文介绍如何通过H5页面通过数据流的方式播放服务端的视频文件,可以兼容PC.Android和IOS环境. H5页面可以通过标签来播放视频.一般的方式如下: your browser does not ...
Html5结合flash在所有主流播放器播放视频的方法
转自http://www.aimks.com/html5-combined-with-flash-method-in-all-mainstream-video.html Html5结合flash在所有 ...

html5获取视频帧,从HTML5和JavaScript的视频捕获帧

html5获取视频帧,从HTML5和JavaScript的视频捕获帧相关推荐

最新文章

热门文章