• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    HTML5 video 上传预览图片视频如何设置、预览视频某秒的海报帧

    当一收到上传图片视频并可以动态设置视频显示的海报帧的需求时,主要想的是怎么样解析视频并获取保存每帧的图片,百度出来的大多是类似下面这种需要播放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;
      }

    总结

    以上所述是小编给大家介绍的HTML5 video 上传预览图片视频如何设置、预览视频某秒的海报帧,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

    上一篇:HTML5 input新增type属性color颜色拾取器的实例代码
    下一篇:html5的input的required使用中遇到的问题及解决方法
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    HTML5 video 上传预览图片视频如何设置、预览视频某秒的海报帧 HTML5,video,上传,预览,图片,