js获取视频截图

参考:https://segmentfault.com/q/1010000006717959问题:a.获取的好像是第一帧的图?第一帧为透明图时,获取的个透明图片b.得先加载视频到video,做视频上传的时候体验不太友好c.qq空间能截取视频图片,不知道怎么实现的

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
<video id="video" controls="controls" width="400" height="300">
    <source src="myvideo.mp4">
</video>
<br><br>
视频第一帧图片:
<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");
    img.width = 400;
    img.height = 300;
    output.appendChild(img);
};
initialize();
})();
</script>
</body>
</html>

  

原文地址:https://www.cnblogs.com/liuqiyun/p/9519842.html

时间: 2024-10-12 16:21:02

js获取视频截图的相关文章

js 获取视频的第一帧

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>capture screen</title></head><body><video id="video" controls="controls"><source src="img/test.mp4"&g

Android 视频截图

1. 前言 本文讨论的是获取视频在某个时间点的图像, 而非屏幕截图. 如果要获取屏幕截图的话直接(电源键+音量下) 2. 获取视频截图 2.1 MediaMetadataRetriever MediaMetadataRetriever从名称上看可以获取视频的Metadata信息, 此外还可以获取视频的截图, 其中抽取视频的缩略图就是采用此函数实现的. 2.2 使用方法 采用MediaMetadatRetriever.getFrameAtTime方法获取视频的该帧图像. public Bitmap

Android必知必会-获取视频文件的截图、缩略图

背景 公司最近要求给我负责的APP加上视频录制和发布的功能,我简单的完成了基本的录制和视频压缩功能,后来发现发布接口需要上传视频的截图,网上搜索了一下资料,在这里整理一下. 代码实现 /** * 获取视频文件截图 * * @param path 视频文件的路径 * @return Bitmap 返回获取的Bitmap */ public static Bitmap getVideoThumb(String path) { MediaMetadataRetriever media = new Me

vue / js使用video获取视频时长

项目中遇到上传视频功能,需要有预览和获取视频时长功能,因之前使用upload(有需要的话可以参考下我之前的文章),这里就不赘述,直接用来上传视频,不过在上传之前和上传成功后的钩子里,获取不到时长: 没有时长怎么办呢,只能用原生JS来获取: 上传成功以后,将成功的路径绑定给video 使用js获取duration并赋给时间参数 这时你会发现,你得到的值是NaN 视频还未加载下来,无法同步获取到,使用定时器即可解决 OK了,现在可以获取到了 希望本文对你有所帮助! 原文地址:https://www.

canvas与html5实现视频截图功能

这段时间一直在研究canvas,突发奇想想做一个可以截屏视频的功能,然后把图片拉去做表情包,哈哈哈哈哈哈~~ 制作方法: 1.在页面中加载视频 在使用canvas制作这个截图功能时,首先必须保证页面上已经加载完成了这个视频,这样才能够方便的对其操作.如果使用下面直接嵌入<video>标签的方式: 1 2 3 4 5 <video loop controls id="testmp4" width="500" height="400"

HTML5 CSS3 诱人的实例 :模仿优酷视频截图功能

一般的视频网站对于用户上传的视频,在用户上传完成后,可以对播放的视频进行截图,然后作为视频的展示图.项目中也可以引入这样的功能给用户一种不错的体验,而不是让用户额外上传一张展示图. 效果图: 看起来还是很不错,下面我给大家分析下,极其核心代码很简单: _canvas = document.createElement("canvas"); _ctx = _canvas.getContext("2d"); _ctx.fillStyle = '#ffffff'; _ctx

Java Web 中使用ffmpeg实现视频转码、视频截图

转载自:[http://www.cnblogs.com/dennisit/archive/2013/02/16/2913287.html] 视频网站中提供的在线视频播放功能,播放的都是FLV格式的文件,它是Flash动画文件,可通过Flash制作的播放器来播放该文件.项目中用制作的player.swf播放器. 多媒体视频处理工具FFmpeg有非常强大的功能包括视频采集功能.视频格式转换.视频抓图.给视频加水印等. ffmpeg视频采集功能非常强大,不仅可以采集视频采集卡或USB摄像头的图像,还可

java 视频播放 弹幕技术 视频弹幕 视频截图 springmvc mybatis SSM

A代码编辑器,在线模版编辑,仿开发工具编辑器,pdf在线预览,文件转换编码B 集成代码生成器 [正反双向](单表.主表.明细表.树形表,快速开发利器)+快速表单构建器 freemaker模版技术 ,0个代码不用写,生成完整的一个模块,带页面.建表sql脚本,处理类,service等完整模块C 集成阿里巴巴数据库连接池druid??数据库连接池??阿里巴巴的 druid.Druid在监控.可扩展性.稳定性和性能方面都有明显的优势D 集成安全权限框架shiro??Shiro 是一个用 Java 语言

JS获取上一访问页面URL地址document.referrer实践2

一.JS获取前一个访问页面的URL地址document.referrer 要获取前一个访问页面的URL地址前后端语言都可以,例如PHP的是$_SERVER['HTTP_REFERER'],JavaScript的就是document.referrer. 我们平常开发,虽然和URL打交道也算比较频繁,但是,似乎很少使用document.referrer.我起初以为是兼容性不好,后来测试发现ie7都支持,那就奇怪了,为何document.referrer用的不多呢? 我想了一下,可能有下面几个原因: