本地上传视频获取封面,自动下载成图片( js 前端)

原创 2018年04月16日 17:03:37

本方法是通过火狐浏览器的input上传视频后,获取文件路径,使用video播放视频。

使用h5的canvas画布来绘制封面,生成图片后,通过canvas的toDataURL将图片输出成图片流,然后在执行事件将图片流下载保存到本地。

保存下来的图片相对较大,如果是用于列表,可以通过 https://tinypng.com/进行图片压缩。

具体代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="./jquery-1.10.2.js"></script>
	</head>
	<body>
		<style>
			input {
				margin-bottom: 20px;
				height: 50px;
			}
			#video ,
			video {
				max-width: 100%;
			}
		</style>
		<h1>上传视频等待3秒后自动下载图片,下载完成后可继续上传视频。</h1>
		<p>注1:请使用火狐浏览器进行截图,因为火狐支持canvas的toDataURL方法。</p>
		<p>注2:上传视频格式以普通的mp4格式,不支持ts格式,建议以原转码文件来获取截图</p>
		<p>注3:图片下载后,请通过https://tinypng.com/该压缩图片网站进行压缩,每次可以压缩20张,然后重新下载压缩后的图片来用。</p>
		<p>注4:如果视频一开始是黑屏的,请上传后<strong>立即点击</strong>视频播放,防止所截封面是黑屏。(等待3秒就是用于此处)</p>
		<input id="file" name="file" type="file" value="" placeholder="点击上传" />
		<div id="imgSmallView" style="margin: 10px 0;color: red;font-size: 24px;">响应:<span>请选择视频</span></div>
		<div class="row">
			<div id="video" style="width: 100%;">
				<video src="" controls="controls"></video>
			</div>
		</div>
		<script>
			(function() {
				$('#file').on('change', function() {
					var files = this.files,
						video = $('#video').find('video'),
						videoURL = null,
						windowURL = window.URL || window.webkitURL;;
					if(files && files[0]) {

						videoURL = windowURL.createObjectURL(files[0]);
						$('#imgSmallView span').html('请等待图片下载');
//						$('#video').html('<video src="' + videoURL + '" controls="controls"></video>');
						$('#video video').attr('src', videoURL);
						$('#video video').trigger('click');
						setTimeout(function() {
							createIMG(files[0].name.split('.')[0]+'.png');
						}, 3500);
					}
				}).trigger('change');
				function createIMG(name) {
					var scale = 0.35,
						video = $('#video').find('video')[0],
					 	canvas = document.createElement("canvas");

					 	canvas.width = video.videoWidth * scale;
						canvas.height = video.videoHeight * scale;
						var flag = true;
						for(var flag = true; flag; ) {
							if(canvas.width > 400) {
								canvas.width *= 0.9;
								canvas.height *= 0.9;
							} else {
								flag = false;
							}
						}
						canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
						saveImage(canvas, name);
				}
				function saveImage(_canvas, _name) {
					var image = _canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream');
					saveFile(image, _name );
				}
				function saveFile(data, _name) {
					var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
					save_link.href = data;
					save_link.download = _name;
					var event = document.createEvent('MouseEvents');
					event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
					save_link.dispatchEvent(event);
					$('#imgSmallView span').html(_name + '图片已下载完成,请继续上传视频等待回应。')
				}
			})();
		</script>
	</body>
</html>

需要注意地方,于代码中已有提示。

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u013960979/article/details/79962051

如何获取网络视频(或者说后台返回视频URL)第一帧图片以及获取本地视频的第一帧图片

在项目开发的时候,有可能会有这样的一种需求:有一段视频需要展示给用户,在界面上先展示视频上的某一帧图片,用户点击的时候再去获取视频资源进行播放。这时,服务器会先给我们返回视频的url,这个时候就需要通...
  • huangxiaoguo1
  • huangxiaoguo1
  • 2017-08-01 19:52:31
  • 4237

js实现视频上传截取缩略图

之前有个需求,上传视频时需要保存一份缩略图。以前的做法都是同时上传视频和缩略图,后台参考了网络文案。在现代浏览器可以使用HTML5的API,实现JS截取缩略效果。 HTML部分: 代码示例...
  • qq_32340877
  • qq_32340877
  • 2017-07-13 10:27:35
  • 941

获取视频封面,本地视频,网络视频都可以用

/**  *  获取视频封面,本地视频,网络视频都可以用  *  *  @param videoURL video的Url  */ + (void)thumbnailIm...
  • chuan403082010
  • chuan403082010
  • 2016-04-11 10:04:33
  • 1018

js+HTML5实现视频截图的方法

本文实例讲述了js+HTML5实现视频截图的方法。分享给大家供大家参考。具体如下: 1. HTML部分: Capture 2. 点击按钮时触发如下代码: (functi...
  • wojiaoguchenghuanye
  • wojiaoguchenghuanye
  • 2015-11-30 11:48:50
  • 3310

视频电商网站实战 - 构建视频提交页面:视频封面上传(上)

[上节课](http://blog.csdn.net/github_26672553/article/details/54615267 )我们已经初步构建了一个『发布视频』的界面,本节课我们来完善参...
  • github_26672553
  • github_26672553
  • 2017-02-07 09:36:40
  • 1160

android获取本地音乐的专辑图片

获取本地的音文件请查看 http://blog.csdn.net/zdnuist/article/details/42393947 获取专辑图片主要是通过album_id进行查询,因此首先获取alb...
  • zdnuist
  • zdnuist
  • 2015-01-30 16:37:12
  • 3901

七牛上传视频文件 后截图功能

七牛上传文件 成功后,会返回 hostUrl + key 就是文件的地址; 然后用文件地址 + vframe/jpg/offset/0 就是取 0秒的截图 。 后边0是秒的单位 。。 后边 w...
  • lsw8569013
  • lsw8569013
  • 2016-11-22 17:14:28
  • 2828

用python下载xxxx网站封面作品的所有图片

实现思路:   1.识别出封面作品集,   2.点击打开作品集   3.当作品集下载完成后,下载图片 技术实现:   1.先研究和分析封面作品集的html元素,判断出集品集是放在那个元素下 [这个是重...
  • harryho
  • harryho
  • 2017-04-10 14:01:15
  • 541

网页js获取视频帧图片

如何从视频中取出一个帧做为视频的封面呢?
  • zfyj_2004
  • zfyj_2004
  • 2017-06-02 15:57:45
  • 4766

java对视频进行截图

import java.io.File; import java.util.List; //生成视频文件的首帧为图片 //windows下的版本 public class CreatePh { //...
  • yangnianbing110
  • yangnianbing110
  • 2014-06-23 16:14:13
  • 13701
收藏助手
不良信息举报
您举报文章:本地上传视频获取封面,自动下载成图片( js 前端)
举报原因:
原因补充:

(最多只允许输入30个字)