<!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. Python学习（一） 安装，环境搭建，IDE

    第一篇废话太多了,我的博客最主要的是给自己看的,大家觉得还凑合也可以看看,能说自己想法的就更好了,因为一个人的思想是有局限性的.集思广益,自己的认知才不会被禁锢. 注:其他的系统没装,在Windows ...

  2. CentOS 7安装与配置Tomcat8

    1.下载安装包并上传服务器 2.解压 tar -zxvf apache-tomcat-8.5.16.tar.gz -C /opt/java 3.启动 cd /opt/java/apache-tomca ...

  3. 【CS Round #44 (Div. 2 only) A】Frequent Numbers

    [链接]h在这里写链接 [题意] 在这里写题意 [题解] 大水题 [错的次数] 0 [反思] 在这了写反思 [代码] /* */ #include <cstdio> #include &l ...

  4. SQL Server导入数据报错"无法在只读列“Id”中插入数据"

    使用sql server 导入数据报错:无法在只读列'id'中插入数据.如下图所示: 查找出现该问题的原因是表中id为自动增长的标识列,需要在[编辑映射]中勾选"启用标识插入": ...

  5. .Net Core 授权系统组件解析

    前面关于.Net Core如何进行用户认证的核心流程介绍完毕之后,.Net Core 认证系统之Cookie认证源码解析远程认证暂时不介绍,后期有时间,我会加上.接下去介绍认证组件是如何和认证组件一起 ...

  6. 最短路 HDU - 2544 (dijkstra算法或Floyd算法)

    Dijkstra解法: #include <stdio.h> #include <iostream> #include <cstring> #include < ...

  7. 【JZOJ3623】【SDOI2014】数表(table) 树状数组+离线+莫比乌斯反演

    题面 100 \[ Ans=\sum_{i=1}^n\sum_{j=1}^mg(gcd(i,j)) \] 其中, \[ g(d)=\sum_{i|d}i \] 我们注意到\(gcd(i,j)\)最多有 ...

  8. vuehomework1

    红黄蓝三个按钮,点击不同的按钮可以切换一个200*200的矩形框对应的颜色 <!DOCTYPE html> <html lang="en"> <hea ...

  9. 【arduino】anroid的app与arduino的ch05,进行蓝牙通信遇到的问题

    Arduino程序上传不成功 显示系统找不到指定文件 错误信息显示是 avrdude: ser_open(): can't open device "\\.\COM1": 系统找不 ...

  10. 泛型List 扩展 比较类

    List<string> outputList = resultList.Distinct(new Compare<string>((x, y) => (null != ...