截取视频第一帧作为预览图片

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>capture screen</title>
</head>
<body>
<video id="video" controls="controls">
<source src="123.MP4">
</video>
<div id="output"></div>
<script type="text/javascript">
(function(){
var video, output;
var scale = 0.8;
var initialize = function() {
output = document.getElementById("output");
video = document.getElementById("video");
video.addEventListener(‘loadeddata‘,captureImage);
};

var captureImage = function() {
            var canvas = document.createElement("canvas");
            canvas.width = video.videoWidth * scale;
            canvas.height = video.videoHeight * scale;
            canvas.getContext(‘2d‘).drawImage(video, 0, 0, canvas.width, canvas.height);

            var img = document.createElement("img");
            img.src = canvas.toDataURL("image/png");
            output.appendChild(img);
};

initialize();
})();
</script>
</body>
</html>
时间: 2024-08-22 13:53:12

截取视频第一帧作为预览图片的相关文章

使用ffmpeg截取视频第一帧当做背景图

1.在官网下载ffmpeg,http://ffmpeg.org/download.html 我下载的是Windows 64的,如系统是Windows 32,请下载Windows 32-bit 下载完成后解压,得到如下图文件: 打开bin文件: 把bin文件夹所有.dll和.exe文件复制到项目bin文件夹下. 如果想通过cmd命令截取,需要将ffmpeg.exe的路径配置到环境变量里的Path里,可参考https://www.cnblogs.com/hbtmwangjin/articles/95

plupload上传前预览图片

plupload预览图片有多种方法,主要由moxie的Image提供,Image的downsize.crop.embed都可用来预览图片 1.downsize 最开始做项目的时候,我用的就是downsize来做预览图片 downsize(opts) Downsizes the image to fit the specified width/height. If crop is supplied, image will be cropped to exact dimensions. Argume

Android -- 获取视频第一帧缩略图

干货 从API 8开始,新增了一个类: android.media.ThumbnailUtils这个类提供了3个静态方法一个用来获取视频第一帧得到的Bitmap,2个对图片进行缩略处理. public static Bitmap createVideoThumbnail (String filePath, int kind) 第一个参数是视频文件的路径,第二个参数是指定图片的大小,有两种选择Thumbnails.MINI_KIND与Thumbnails.MICRO_KIND. 第一种文档上说大小

Android视频处理 --处理视频第一帧缩略图

从API 8开始,新增了一个类: android.media.ThumbnailUtils这个类提供了3个静态方法一个用来获取视频第一帧得到的Bitmap,2个对图片进行缩略处理. ? 1 public static Bitmap createVideoThumbnail (String filePath, int kind) 第一个参数是视频文件的路径,第二个参数是指定图片的大小,有两种选择Thumbnails.MINI_KIND与Thumbnails.MICRO_KIND. 第一种文档上说大

Android之使用ThumbnailUtils类来获取视频第一帧缩略图

一.首先,来介绍ThumbnailUtils类,此类位于android.media包下,此类有一个公有的无参构造函数,有三个静态的公有方法,一个用来获取视频第一帧得到的Bitmap,另外两个方法用来对图片进行缩略处理. 1.无参的构造函数:ThumbnailUtils() 2.三个静态的公有方法: (1).创建一个视频缩略图的方法: public static Bitmap createVideoThumbnail(String filePath, int kind) 第一个参数为视频文件的

Android之使用MediaMetadataRetriever类获取视频第一帧

一.首先,来介绍一下MediaMetadataRetriever类,此类位于android.media包下,这里,先附上可查看此类的API地址:MediaMetadataRetriever类.大家能够自行查看. 1.MediaMetadataRetriever类概述:MediaMetadataRetriever class provides a unified interface for retrieving frame and meta data from an input media fil

javascript预览图片——IT轮子系列(九)

再使用htm控件 <input type="file" name="file" /> 上传图片的时候,往往需要先预览图片,然后点击保存按钮,把图片上传到服务器.今天正好解决了这样一个问题,记录博文,以备后用. html 代码 <div> <input type="file" id="filePreview" /><br /> <img id="imgPhoto&q

Java截取视频首帧并旋转正向

package test; import java.awt.Dimension; import java.awt.Graphics2D; import java.awt.Image; import java.awt.Rectangle; import java.awt.image.BufferedImage; import java.io.File; import java.io.IOException; import java.util.ArrayList; import java.util.

C#.net4建设网页上传图片前客户端预览图片不能显示

搞了好半天,完全照教学资料设的javascrip脚本,但就是显示不了,后来才发觉,原来客户端要把该网站设为信任才能显示. 所以记录一下,以后备查. <script type="text/javascript">        function showphoto() {            alert(document.getElementById("FileUpload1").value);            //把所选图片的全路径+文件名以“f