<!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. 基于 DataLakeAnalytics 的数据湖实践

    随着软硬件各方面条件的成熟,数据湖(Data Lake)已经越来越受到各大企业的青睐, 与传统的数仓实践不一样的是,数据湖不需要专门的“入仓”的过程,数据在哪里,我们就从哪里读取数据进行分析.这样的好 ...

  2. H5C3--sessionStorage和localStorage的使用

    一.sessionStorage的使用 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  3. webpack学习之—— Configuration(配置)

    你可能已经注意到,很少有 webpack 配置看起来很完全相同.这是因为 webpack 的配置文件,是导出一个对象的 JavaScript 文件.此对象,由 webpack 根据对象定义的属性进行解 ...

  4. HDU 4006优先队列

    //按照降序排列,而且队列中只保存k个元素 #include<stdio.h> #include<queue> using namespace std; int main(){ ...

  5. 【JZOJ5071】【GDSOI2017第二轮模拟】奶酪 树形dp

    题面 CJY很喜欢吃奶酪,于是YJC弄到了一些奶酪,现在YJC决定和CJY分享奶酪. YJC弄到了n-1块奶酪,于是他把奶酪挂在了一棵n个结点的树上,每根树枝上挂一块奶酪,每块奶酪都有重量. YJC和 ...

  6. NFS服务器搭建与配置

    原文:https://blog.csdn.net/qq_38265137/article/details/83146421 NFS服务简介什么是NFS?NFS就是Network File System ...

  7. springboot整合neo4j

    刚开始按网上博客搭建 spring boot 和 neo4j一直报sessionFactory找不到,直到下载了spring-data-neo4j的实例demo对比才搭建成功,而且用户名是neo4j, ...

  8. 利用IE浏览器查看元素绑定的JS代码

  9. GNU的__builtin_popcount函数

    用来计算32位的unsigned int中的1的个数, 其内部实现是根据查表法来计算的.

  10. 一句python，一句R︱python中的字符串操作、中文乱码、NaN情况

    一句python,一句R︱python中的字符串操作.中文乱码.NaN情况 先学了R,最近刚刚上手Python,所以想着将python和R结合起来互相对比来更好理解python.最好就是一句pytho ...