这篇文章主要为大家展示了“在HTML5中如何通过video上传预览图片和视频”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“在HTML5中如何通过video上传预览图片和视频”这篇文章吧。

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

/*预览*/$('.qtuploader__items').on('click','[name="viewVideoPicBtn"]',function(){varparent=$(this).closest('.qtab__page');varvideo=$(this).closest('.qtuploader__itemsbd').find('video');varsrcStr='',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){varthumbHeight=setSize(video)[0];varthumbWidth=setSize(video)[1];srcStr=video.attr('src');htmlStr='<divclass="qtuploader__view"><divclass="qtuploader__mask"></div><divclass="qtuploader__thumb"><videocontrolswidth="'+thumbWidth+'"height="'+thumbHeight+'"src="'+srcStr+'">您的浏览器不支持video标签</video></div></div>';}parent.append(htmlStr);parent.find('.qtuploader__viewvideo')[0].currentTime=$(this).siblings('.qtuploader__picinputbox').find('.qtuploader__picinput').val();parent.find('.qtuploader__view').fadeIn();});/*设置海报帧预览时间*/$('.qtuploader__items').on('keyup','.qtuploader__picinput',function(){varparent=$(this).closest('.qtuploader__picinputbox');varvideo=$(this).closest('.qtuploader__itemsbd').find('video');varstrVal=$.trim($(this).val());console.log(strVal)if(strVal==''){parent.addClass('is-error');parent.find('.qverify__font').text('请设置海报帧');}elseif(!(/^[0-9]*$/.test(strVal))){parent.addClass('is-error');parent.find('.qverify__font').text('请输入数字');}elseif(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();})})/*设置预览大小*/functionsetSize(element){varthumbWidth=0,thumbHeight=0,arr=[];varwinWidth=$(window).width(),winHeight=$(window).height();varimgWidth=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)returnarr;}

以上是“在HTML5中如何通过video上传预览图片和视频”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！