H5video 上传预览图片视频,设置、预览视频某秒的海报帧-程序员宅基地

技术标签: ViewUI  前端  php  ffmpeg  

clipboard.png

当一收到上传图片视频并可以动态设置视频显示的海报帧的需求时,主要想的是怎么样解析视频并获取保存每帧的图片,百度出来的大多是类似下面这种需要播放video并点击截图的,或者是用php ffmpeg扩展,跟需求不一致,有点抓狂了,然后就先做了视频图片的预览功能,进而对设置海报帧换了种思路,通过输入设置video开始播放的时间,取消自动播放和控制条,这样用户看到的就是一张图片

 /*预览*/
              
$('.qtuploader__items').on('click', '[name="viewVideoPicBtn"]', function() {
    var parent = $(this).closest('.qtab__page');
    var video = $(this).closest('.qtuploader__itemsbd').find('video');
    var srcStr = '', htmlStr = '';
    if($(this).siblings('.qtuploader__picinputbox').hasClass('is-error')){
      $.fn.toast({
        'parentDom': parent,
        'classes': 'isorange',
        'top': '0',
        'spacing': 0,
        'toastContent': '请设置正确范围的海报帧',
        'autoHide': 3000,
        'position': {
          'top': '5px',
          'left': '50%'
        }
      });
      return;
    }
    if (video.length > 0) {
      var thumbHeight = setSize(video)[0];
      var thumbWidth = setSize(video)[1];
      srcStr = video.attr('src');
      htmlStr = '<div class="qtuploader__view"><div class="qtuploader__mask"></div><div class="qtuploader__thumb" style="width:' + thumbWidth + 'px;height:' + thumbHeight + 'px;margin:0 auto;"><video controls width="' + thumbWidth + '" height="' + thumbHeight + '" src="' + srcStr + '">您的浏览器不支持 video 标签</video></div></div>';
    }
    parent.append(htmlStr);
    parent.find('.qtuploader__view video')[0].currentTime = $(this).siblings('.qtuploader__picinputbox').find('.qtuploader__picinput').val();
    parent.find('.qtuploader__view').fadeIn();
  });
  
  /*设置海报帧预览时间*/
  $('.qtuploader__items').on('keyup', '.qtuploader__picinput', function() {
    var parent = $(this).closest('.qtuploader__picinputbox');
    var video = $(this).closest('.qtuploader__itemsbd').find('video');
    var strVal = $.trim($(this).val());
    console.log(strVal)
    if (strVal == '') {
      parent.addClass('is-error');
      parent.find('.qverify__font').text('请设置海报帧');
    } else if (!(/^[0-9]*$/.test(strVal))) {
      parent.addClass('is-error');
      parent.find('.qverify__font').text('请输入数字');
    } else if (video.length > 0 && strVal > video[0].duration) {
      parent.addClass('is-error');
      parent.find('.qverify__font').text('不超过(' + video[0].duration + ')');
      console.log('111---' + video[0].duration)
    } else {
      parent.removeClass('is-error');
      parent.find('.qverify__font').text('请设置海报帧');
    }
  })
  /*关闭预览*/
  $(document).undelegate('.qtuploader__mask', 'click');
  $(document).delegate('.qtuploader__mask', 'click', function() {
    $(this).closest('.qtuploader__view').fadeOut('normal', function() {
      $(this).closest('.qtuploader__view').remove();
    })
  })
  /*设置预览大小*/
  function setSize(element) {
    var thumbWidth = 0, thumbHeight = 0, arr = [];
    var winWidth = $(window).width(), winHeight = $(window).height();
    var imgWidth = element.width(), imgHeight = element.height();
    if (imgWidth > imgHeight) {
      thumbHeight = parseInt(winHeight - 200);
      thumbWidth = parseInt((1920 * thumbHeight) / 1080);
    } else {
      thumbHeight = parseInt(winHeight - 200);
      thumbWidth = parseInt((1080 * thumbHeight) / 1920);
    }
    arr.push(thumbHeight, thumbWidth)
    return arr;
  }
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_33720956/article/details/88742995

智能推荐

imx6ull camera问题调试_imx6ull开启csi模块-程序员宅基地

文章浏览阅读1.3k次。CSI驱动使用:drivers/media/platform/mxc/subdev/mx6s_capture.cBSP自带,未修改RN6752驱动使用:drivers/media/platform/mxc/subdev/rm6752_v1.c基于OV5640修改RN6752当前的配置:输出模式是BT601 1280*720 25fps。预览方式:gst-launch-1.0 imxv4l2src device=/dev/video1 ! imxv4l2sink问题:1、对比OV5_imx6ull开启csi模块

【Autoware】之ndt_mapping理论公式及代码对比_config/ndt_mapping-程序员宅基地

文章浏览阅读4.1k次,点赞15次,收藏78次。Autoware之ndt_mapping详解Pub和SubNDT算法流程1. 将参考点云(reference scan)所占的空间划分成指定大小(CellSize)的网格或体素(Voxel)2. 初始化变换参数3. 对于要配准的点云(second scan),通过变换TTT 将其转换到参考点云的网格中 xi′=T(xi,p)x^′_i=T(x_i,p)xi′​=T(xi​,p)4. 根据正态分布参数计算每个转换点的概率密度5. NDT配准得分(score)通过对每个网格计算出的概率密度相加得到6. 根据牛顿_config/ndt_mapping

ssh设置转发_ssh -g -l-程序员宅基地

文章浏览阅读987次。ssh命令实现端口转发概念SSH 会自动加密和解密所有 SSH 客户端与服务端之间的网络数据。但是,SSH 还同时提供了一个非常有用的功能,这就是端口转发。它能够将其他 TCP 端口的网络数据通过 SSH 链接来转发,并且自动提供了相应的加密及解密服务。这一过程有时也被叫做“隧道”(tunneling),这是因为 SSH 为其他 TCP 链接提供了一个安全的通道来进行传输而得名.总的来说 S..._ssh -g -l

项目——游戏手柄_游戏手柄如何编写测试用例-程序员宅基地

文章浏览阅读569次。一个以前用过的类型的游戏手柄直接代码&lt;LinearLayout ="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" androi..._游戏手柄如何编写测试用例

利用WebMagic的Cookie机制进行页面爬取_java 如何爬取带cookie的静态页面-程序员宅基地

文章浏览阅读814次。目前发布的WebMagic的最新版本仍然不支持post请求模拟登陆来抓取页面,但是相信,在后续的版本中,肯定会支持这项功能。那么要抓取登陆后才能看到的页面怎么办?一、用户自己发送post请求,将获取的cookie设置到Spider中二、用户使用抓包工具将抓到的cookie设置到Spider中本文只讨论第二种方式,第一种方式的抓取,博主会在后续的博客中实现本文抓取慕课网登陆后的个人..._java 如何爬取带cookie的静态页面

java中Integer的最大最小值_integer最大值-程序员宅基地

文章浏览阅读1w次。java中Integer是有最大值和最小值的最大值为Integer.MAX_VALUE = 2147483647最小值为Integer.MIN_VALUE = -2147483648注意:两个值并没有互为相反数有 Integer.MAX_VALUE + 1 = Integer.MIN_VALUE同理 Integer.MIN_VALUE - 1 = Integer.MAX_VALUE..._integer最大值

随便推点

Linux运维工程师笔试题第十三套-程序员宅基地

文章浏览阅读558次。这套题的出处是http://blog.51cto.com/nolinux/1670406 ,看到了周末闲着没事就做一做,答案都是我结合自己的工作得到的,不一定百分百准确,现在拿出来跟各位分享一番。1、请写出五种系统性能分析工具,并简述其作用和特点[我的答案] top、free、vmstat、iostat、perf等等等等,如果你想装逼,可以回答f..._请写出五种系统性能分析工具,并简述其作用和特点

极验滑块验证码逆向分析(文末含轨迹算法)_今日头条号登录滑块验证怎么逆向-程序员宅基地

文章浏览阅读7.3k次,点赞57次,收藏67次。通过抓包手把手教你分析滑动验证码流程,从此放弃模拟浏览器的方式过验证码!_今日头条号登录滑块验证怎么逆向

计算机美术设计基础教案,电脑美术美术教案-程序员宅基地

文章浏览阅读337次。本节课进步的地方:1、在设计中体现了综合性和多样性,在美术教学中融入了音乐,还准备在以后教学中融入电脑教学,运用计算机的绘图软件绘画。2、在课件的制作中对音乐和图片的选择有较强的视觉和听觉冲击力。3、在语言讲解上较以前精练简洁。4、在教学仪态上较以前少了些随便的感觉,多了些亲切的感觉。要改进的地方:...篇一:电脑美术教学反思从这节课中,可以开出学生在课堂中积极主动,课堂气氛活跃,学生敢于发言,富..._计算机美术基础教案

华为数通笔记-VRRP_vrrp主备切换-程序员宅基地

文章浏览阅读3.7k次,点赞2次,收藏24次。VRRP局域网中的用户终端通常采用配置一个默认网关的形式访问外部网络,如果默认网关设备发生故障,那么所有用户终端访问外部网络的流量将会中断。可以通过部署多个网关的方式来解决单点故障,但是需要解决多个网关之间的冲突问题。VRRP(Virtual Router Redundancy Protocol,虚拟路由器冗余协议)既能够实现网关的备份,又能解决多个网关之间互相冲突的问题,从而提高网络可靠性。单网关面临的问题VRRP概述通过把几台路由设备联合组成一台虚拟的“路由设备”..._vrrp主备切换

Java实现广告屏播放切换_dkplayer - 基于IjkPlayer的视频播放器,支持直播点播,悬浮窗播放,广告播放,边播边缓存;支持重力感应自动全屏;完美实现ListView和RecyclerV...-程序员宅基地

文章浏览阅读287次。C++I like to play video games. I also have a significant other, and she often walks into the room to talk to me while I'm playing a video game. I would like to pause the game so that I can give her my..._ijkplayer 播放广告

python 成品配置发送邮件,使用stmplib发送邮件_stmplib from sender-程序员宅基地

文章浏览阅读364次。代码可以直接修修改改,就能直接使用,把配置信息修改一下def send_email(): import smtplib from email.header import Header from email.mime.text import MIMEText smtp_server = 'smtp.exmail.qq.com' # 邮箱服务器,我这放的是企..._stmplib from sender

推荐文章

热门文章

相关标签