<!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. appium+python 启动一个app步骤

    询问度娘搭好appium和python环境,开启移动app自动化的探索(基于Android),首先来记录下如何启动待测的app吧! 如何启动APP?1.获取包名:2.获取launcherActivit ...

  2. 关系数据库（ch.2)

    2.1.1 关系 域 笛卡儿积 关系 candiate key 如果一组属性值可以唯一的标识一个元祖,但是他的子集不行,那么这是一个候选码 关系可以由三种类型 基本关系 查询关系 视图 为关系附加如下 ...

  3. linux查看现在在运行的进程 $ pstree -a$ ps aux

    这都是查看现有进程的. ps aux 的结果比较杂乱 pstree -a 的结果比较简单明了,可以看到正在运行的进程及相关用户.

  4. 集训队日常训练20180518-DIV1

    A.3583 n根木棍是否能分成相等两堆. 背包dp,首先求和sum,如果为偶数就说明不行,否则考虑做一个sum/2大小的背包. #include<bits/stdc++.h> using ...

  5. 八.DBN深度置信网络

    BP神经网络是1968年由Rumelhart和Mcclelland为首的科学家提出的概念,是一种按照误差反向传播算法进行训练的多层前馈神经网络,是目前应用比较广泛的一种神经网络结构.BP网络神经网络由 ...

  6. Linux下的MySQL主从同步

    网上一些关于Linux下的MySQL主从同步教程非常之多,有些很简单的配置却弄的非常复杂,有些根本无法配通,下面是我通过简单的配置完成的主从同步过程,大家可以参考,此文章更适用于新手. 一.测试环境: ...

  7. Leetcode917.Reverse Only Letters仅仅反转字母

    给定一个字符串 S,返回 "反转后的" 字符串,其中不是字母的字符都保留在原地,而所有字母的位置发生反转. 示例 1: 输入:"ab-cd" 输出:" ...

  8. Linux C socket 基于 UDP

    /*************************************************************************     > File Name: serve ...

  9. XSD 命令及 WSDL 命令

    [XSD] 方法一:通过Xsd2Code工具生成相应代码(制作XSD工具有:Altova XMLSpy) 方法二:通过XSD命令生成相应代码 XML 架构定义 (Xsd.exe) 工具从 XDR.XM ...

  10. git reset三种模式

    reset三种模式区别和使用场景 区别: --hard:重置位置的同时,直接将 working Tree工作目录. index 暂存区及 repository 都重置成目标Reset节点的內容,所以效 ...