JavaScript中获取视频缩略图的方法

不念不忘少年蓝@ 2022-04-11 10:28 1485阅读 0赞

代码如下：

<head>
    	<meta charset="UTF-8">
    	<title>获取视频缩略图</title>
    </head>
    
    <body>
    	
    	<video id="video" width="20%" height="200px" controls autoplay>
    		<source src="video/qqvideo.mp4" type="video/mp4">
    	</video>
    	
    	
    	<div id="output" style="display: inline-block;">
    		
    	</div>
    	
    	
    	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    	
    	<script type="text/javascript">
    		var video = $("#video")[0],
    			output = $("#output")[0]; //获取DOM对象
    		var scale = 0.1; //图片的倍数
    
    		var captureImage = function() { //截取图片的方法
    			var canvas = document.createElement("canvas"); //创建一个canvas
    			canvas.width = video.videoWidth * scale; //canvas的宽
    			canvas.height = video.videoHeight * scale; //canvas的高
    			canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
    			var img = document.createElement("img"); //在页面中创建一个img标签
    			img.src = canvas.toDataURL("image/png"); //图片的base64编码
    			output.append(img); //将图片显示在id="output"的div中
    		};
    		var initialize = function() { //初始化方法
    			video.addEventListener('loadeddata', captureImage); //为元素添加事件
    			//loadeddata在当前帧的数据加载完成且还没有足够的数据播放视频/音频（audio/video）的下一帧时触发
    		};
    		
    		$(function() {
    			initialize(); //执行方法
    		});
    	</script>
    </body>

如您在阅读中发现不足，欢迎留言！！！

发表评论取消回复

表情：

评论列表（有 0 条评论，1485人围观）

还没有评论，来说两句吧...

相关阅读

相关 java生成视频缩略图

> 现有一需求，生成视频缩略图，最终实现方式如下一、引入maven依赖 <dependency> <groupId>org.bytedeco

╰半夏微凉°/ 2024年04月07日 14:54/ 0 赞/ 130 阅读

相关截取视频缩略图

UIImage \image =\[self getImage:\[\[NSBundle mainBundle\] pathForResource:@"video" ofTyp

ゞ浴缸里的玫瑰/ 2023年10月18日 08:38/ 0 赞/ 116 阅读

相关 ios获取本地视频第一帧,缩略图

即时通讯中,需要发送视频,往往需要先显示第一帧图片 // 获取本地视频第一帧 - (UIImage) getLocationVideoPreViewIma

傷城~/ 2023年07月01日 14:58/ 0 赞/ 100 阅读

相关 flutter 自带方法获取视频缩略图

IM中需要发送视频,获取缩略图 FutureBuilder( future: _initializeVideoPlayerFu

比眉伴天荒/ 2023年07月01日 13:54/ 0 赞/ 86 阅读

相关 android 扫描本地视频,Android获取本地视频缩略图的几种方法

记录一下： 1.使用MediaMetadataRetriever获取Bitmap：较占内存 MediaMetadataRetriever media = new Med

浅浅的花香味﹌/ 2022年10月18日 11:20/ 0 赞/ 527 阅读

相关获取视频文件缩略图

Bitmap thumb = ThumbnailUtils.createVideoThumbnail(path, MediaStore.Images.T

叁歲伎倆/ 2022年09月26日 13:57/ 0 赞/ 222 阅读

相关 android 获取视频，图片缩略图

1、获取视频缩略图有两个方法 (1)通过内容提供器来获取 (2)人为创建缩略图 (1)缺点就是必须更新媒体库才能看到最新的视频的缩略图获取的方法 /\\

矫情吗；*/ 2022年08月14日 01:45/ 0 赞/ 355 阅读

相关截图视频缩略图

MediaStore.Video.Thumbnails android. media.ThumbnailUtils MediaMetadataRetriever

小鱼儿/ 2022年08月05日 07:53/ 0 赞/ 334 阅读

相关 PHP之使用FFMPEG获取视频缩略图

ffmpeg官方使用说明：[http://www.ffmpeg.org/ffmpeg-doc.html][http_www.ffmpeg.org_ffmpeg-doc.html

怼烎@/ 2022年07月11日 16:20/ 0 赞/ 355 阅读

相关 JavaScript中获取视频缩略图的方法

代码如下： <head> <meta charset="UTF-8"> <title>获取视频缩略图</title> </head>

不念不忘少年蓝@/ 2022年04月11日 10:28/ 0 赞/ 1486 阅读