<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <script type="text/javascript" src="/Scripts/jquery-1.10.2.js"></script>

    <script type="text/javascript">

        function vSetImg(obj) {

            $(obj).removeAttr("poster");

            var vimg = $("<img/>")[];

            captureImage(obj, vimg);

            console.log($(vimg).attr("src"));

            $(obj).attr("poster", $(vimg).attr("src"));

            //展示获取的第一帧图片

            $(".img").attr("src", $(vimg).attr("src"));

        };

        var scale = 0.8;

        function captureImage(video, output) {

            try {

                var videocanvas = $("<canvas/>")[];

                videocanvas.width = video.videoWidth * scale;

                videocanvas.height = video.videoHeight * scale;

                videocanvas.getContext('2d').drawImage(video, , , videocanvas.width, videocanvas.height);

                output.src = videocanvas.toDataURL("image/png");

                delete videocanvas;

            } catch (e) {

                output.src = "加载动画.gif";

            }

        };

    </script>

</head>

<body>

    <div>

        <video preload="metadata" onloadeddata='vSetImg(this)' width="" height="" src="VID_20191101_203801.mp4">

            <source src="VID_20191101_203801.mp4" type="video/mp4" />

        </video>

    </div>

    <div>

        <img class="img" src="" />

    </div>

</body>

</html>

video 获取第一帧的图片作为封面的更多相关文章

  1. video标签，在移动端获取第一帧作为展示

    写在前面 video标签,获取第一帧作为poster.网上能找着很多案例,很容易实现,在pc端 效果明显.但是在移动端,这些实现方式并不能起作用.原因是 移动端 对video标签的限制,许多video ...

  2. 七牛云上传视频并截取第一帧为图片（js实现）

    本文出自APICloud官方论坛, 感谢论坛版主 东冥羽的分享. 七牛云上传视频并截取第一帧作为视频的封面图. 使用js上传,模块videoPlayer截取第一帧(有专门的截图模块,但是我使用的有点问 ...

  3. (腾讯视频)iOS开发之视频根据url获取第一帧图片,获取任一帧图片

    #import <AVFoundation/AVFoundation.h> + (UIImage*) thumbnailImageForVideo:(NSURL *)videoURL at ...

  4. 通过 ffmpeg 获取视频第一帧（指定时间）图片

    最近做一个上传教学视频的方法,上传视频的同时需要上传视频缩略图,为了避免用户上传的缩略图与视频内容不符,经理要求直接从上传的视频中截图视频的某一帧作为缩略图,并给我推荐了FFMPEG.FFMPEG 功 ...

  5. java获取视频播第一帧

    FFMPEG 功能很强大,做视频必备的软件.大家可通过 http://ffmpeg.org/ 了解.Windows版本的软件,可通过 http://ffmpeg.zeranoe.com/builds/ ...

  6. javacv获取视频第一帧

    第一种是用ffmpeg工具,不过还得安装客户端软件,于是放弃了,还有一种是javacv开源工具,所以选择第二种: 第一种:ffmpeg工具 需要安装ffmpeg软件,支持windows和linux,视 ...

  7. Android CameraX ImageAnalysis 获取视频帧

    CameraX使用ImageAnalysis分析器,可以访问缓冲区中的图像,获取视频帧数据. 准备工作 准备工作包括gradle,layout,动态申请相机权限,外部存储权限等等,大部分设置与Came ...

  8. 关于video标签移动端开发遇到的问题，获取视频第一帧，全屏，自动播放，自适应等问题

    最近一直在处理video标签在IOS和Android端的兼容问题,其中遇到不少坑,绝大多数问题已经解决,下面是处理问题经验的总结: 1.获取视频的第一帧作为背景图: 技术:canvas绘图 windo ...

  9. 第五十二篇、 OC获取视频的第一帧图片thumbnailImage

    获取视频的第一帧图片 有时候我们拍摄完视频后,希望获取一张图片当作这个视频的介绍,这个图片thumbnailImage可以从视频的第一帧获取到. 我们的思路是先获取视频的URL,然后初始化一个MPMo ...

随机推荐

  1. Django--创建

    软件开发架构: c/s架构 客户端 服务端 b/s架构 浏览器 服务端 本质:b/s架构也是c/s架构 HTTP协议 超文本传输协议:规定了客户端与服务端之间消息传输的格式 四个特性: 1.基于TCP ...

  2. Javaweb项目中出现java.sql.SQLException: The server time zone value '�й���׼ʱ��' is unrecognized or represents more than one time zone.异常

    javaweb项目中java.sql.SQLException: The server time zone value '�й���׼ʱ��' is unrecognized or represent ...

  3. pytorch 常用问题解决

    1.RuntimeError: cuda runtime erorr (77): an illegal memory access was encountered at 在使用命令前面加上CUDA_L ...

  4. 【CodeVS】【2004年NOIP全国联赛提高组】1057 津津的储蓄计划

    1057 津津的储蓄计划 2004年NOIP全国联赛提高组 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 青铜 Bronze 题目描述 Description 津津的零花钱一直都是 ...

  5. 洛谷1081 (NOIp2012) 开车旅行——倍增预处理

    题目:https://www.luogu.org/problemnew/show/P1081 预处理从每个点开始a能走多少.b能走多少.可以像dp一样从后往前推. 但有X的限制.所以该数组可以变成倍增 ...

  6. HTML之meta标签缓存控制

    <meta http-equiv="pragram" content="no-cache"> 禁止浏览器从本地缓存中调阅页面. 网页不保存在缓存中, ...

  7. js this工作原理

    js中的this是个很妙的东西,你经常不知道它到底在指向谁,又是谁在调用它. 通用判断方法: 1.this总是指向它的直接调用者 var a={ user:'Artimis', fn:function ...

  8. webserver的性能问题，一语道破真谛

    一直纠结我们要大减的paas平台需要支持多大的并发数. 看到一个网友所说的,恍然大悟,按原有我的理解和要求,并发达到w级 req/s,已经是非常高的要求了,单纯从软件上是很难实现的,一定要以来硬件上的 ...

  9. SpingBoot myBatis neo4j整合项目案例

    此项目为spring boot - myBatis - neo4j数据库整合项目. 有增删改查(节点关系).动态分页条件排序等一些示例. git下载地址:git clone https://githu ...

  10. Swift 之 函数与闭包的应用实例

    http://www.cocoachina.com/swift/20160106/14862.html 今天的博客算是比较基础的,还是那句话,基础这东西在什么时候都是最重要的.说到函数,只要是写过程序 ...