<!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. 2019.8.10 NOIP模拟测试16 反思总结【基本更新完毕忽视咕咕咕】

    一如既往先放代码,我还没开始改… 改完T1滚过来了,先把T1T2的题解写了[颓博客啊] 今天下午就要走了,没想到还有送行的饯别礼,真是欣喜万分[并没有] 早上刚码完前面的总结,带着不怎么有希望的心情开 ...

  2. P3303 [SDOI2013]淘金

    题目描述 小Z在玩一个叫做<淘金者>的游戏.游戏的世界是一个二维坐标.X轴.Y轴坐标范围均为1..N.初始的时候,所有的整数坐标点上均有一块金子,共N*N块. 一阵风吹过,金子的位置发生了 ...

  3. ROWID的使用——快速删除重复的记录

    ROWID是数据的详细地址,通过rowid,oracle可以快速的定位某行具体的数据的位置.ROWID可以分为物理rowid和逻辑rowid两种.普通的表中的rowid是物理rowid,索引组织表(I ...

  4. QT_获取运行进程所在目录路径_2

    QString getProcessFullPath(const quint64 &processId) { #ifdef Q_OS_WIN // access process path WC ...

  5. System.ArgumentException: 回发或回调参数无效。在配置中使用 < pages enableEventValidation="true"/>

    转载自http://blog.csdn.net/dongge825/article/details/7868151 关于在同一个页面中使用Gridview控件的时候发现气updaeting事件无法被服 ...

  6. Freckles (最小生成树)

    #include<iostream> #include<cstring> #include<stdio.h> #include<queue> #incl ...

  7. No.5 Verilog 建模方式

    5-1 门级建模 VerilogHDL内建基元门: 多输入门:and, nand, or, nor, xor, xnor; 多输出门:buf, not 三态门:bufif0, bufif1, noti ...

  8. Mac上homebrew使用

    一.官方网址 Homebrew 二.目录 安装 查看帮助信息 查看版本 更新Homebrew自己 安装软件包 查询可更新的包 更新包 (formula) 清理旧版本 锁定不想更新的包 卸载安装包 查看 ...

  9. 怎么使用mysqlreplicate快速搭建MySQL主从呢？

    用其中的mysqlreplicate工具来快速搭建MySQL主从环境. HE1:192.168.1.248 slave HE3:192.168.1.250 master 实战 Part1:安装mysq ...

  10. Windows10 +Ubuntu 18.04双系统安装详细教程

    前言: 由于开发需要,很多用户需要安装Linux环境.如果用虚拟机操作会消耗大量内存,一般的电脑会显得卡顿,从而影响开发效率.这里分享一些安装经验,希望能够帮助大家. 教程: 步骤1:下载镜像文件 从 ...