Html5video上传预览图片视频，设置、预览视频某秒的海报帧-

本文介绍了Html5 video 上传预览图片视频，设置、预览视频某秒的海报帧，分享给大家，具体如下：

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

 /*预览*/
              
$(&＃39;.qtuploader__items&＃39;).on(&＃39;click&＃39;, &＃39;[name="viewVideoPicBtn"]&＃39;, function() {
    var parent = $(this).closest(&＃39;.qtab__page&＃39;);
    var video = $(this).closest(&＃39;.qtuploader__itemsbd&＃39;).find(&＃39;video&＃39;);
    var srcStr = &＃39;&＃39;, htmlStr = &＃39;&＃39;;
    if($(this).siblings(&＃39;.qtuploader__picinputbox&＃39;).hasClass(&＃39;is-error&＃39;)){
      $.fn.toast({
        &＃39;parentDom&＃39;: parent,
        &＃39;classes&＃39;: &＃39;isorange&＃39;,
        &＃39;top&＃39;: &＃39;0&＃39;,
        &＃39;spacing&＃39;: 0,
        &＃39;toastContent&＃39;: &＃39;请设置正确范围的海报帧&＃39;,
        &＃39;autoHide&＃39;: 3000,
        &＃39;position&＃39;: {
          &＃39;top&＃39;: &＃39;5px&＃39;,
          &＃39;left&＃39;: &＃39;50%&＃39;
        }
      });
      return;
    }
    if (video.length > 0) {
      var thumbHeight = setSize(video)[0];
      var thumbWidth = setSize(video)[1];
      srcStr = video.attr(&＃39;src&＃39;);
      htmlStr = &＃39;
&＃39;;
    }
    parent.append(htmlStr);
    parent.find(&＃39;.qtuploader__view video&＃39;)[0].currentTime = $(this).siblings(&＃39;.qtuploader__picinputbox&＃39;).find(&＃39;.qtuploader__picinput&＃39;).val();
    parent.find(&＃39;.qtuploader__view&＃39;).fadeIn();
  });
  
  /*设置海报帧预览时间*/
  $(&＃39;.qtuploader__items&＃39;).on(&＃39;keyup&＃39;, &＃39;.qtuploader__picinput&＃39;, function() {
    var parent = $(this).closest(&＃39;.qtuploader__picinputbox&＃39;);
    var video = $(this).closest(&＃39;.qtuploader__itemsbd&＃39;).find(&＃39;video&＃39;);
    var strVal = $.trim($(this).val());
    console.log(strVal)
    if (strVal == &＃39;&＃39;) {
      parent.addClass(&＃39;is-error&＃39;);
      parent.find(&＃39;.qverify__font&＃39;).text(&＃39;请设置海报帧&＃39;);
    } else if (!(/^[0-9]*$/.test(strVal))) {
      parent.addClass(&＃39;is-error&＃39;);
      parent.find(&＃39;.qverify__font&＃39;).text(&＃39;请输入数字&＃39;);
    } else if (video.length > 0 && strVal > video[0].duration) {
      parent.addClass(&＃39;is-error&＃39;);
      parent.find(&＃39;.qverify__font&＃39;).text(&＃39;不超过(&＃39; + video[0].duration + &＃39;)&＃39;);
      console.log(&＃39;111---&＃39; + video[0].duration)
    } else {
      parent.removeClass(&＃39;is-error&＃39;);
      parent.find(&＃39;.qverify__font&＃39;).text(&＃39;请设置海报帧&＃39;);
    }
  })
  /*关闭预览*/
  $(document).undelegate(&＃39;.qtuploader__mask&＃39;, &＃39;click&＃39;);
  $(document).delegate(&＃39;.qtuploader__mask&＃39;, &＃39;click&＃39;, function() {
    $(this).closest(&＃39;.qtuploader__view&＃39;).fadeOut(&＃39;normal&＃39;, function() {
      $(this).closest(&＃39;.qtuploader__view&＃39;).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;
  }

总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。更多相关教程请访问Html5视频教程！