扣丁学堂HTML5培训简述HTML5 video上传预览图片视频的设置

本文扣丁学堂HTML5培训小编给读者们介绍一下HTML5 video上传预览图片视频，设置、预览视频某秒的海报帧，现在分享给大家，我们一起来看一下吧。

扣丁学堂HTML5培训

当一收到上传图片视频并可以动态设置视频显示的海报帧的需求时，主要想的是怎么样解析视频并获取保存每帧的图片，百度出来的大多是类似下面这种需要播放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在线学习小编给大家分享的HTML5 video上传预览图片视频的设置，希望对小伙伴们有所帮助，想要了解更多内容的小伙伴可以登录扣丁学堂官网咨询。

想要学好HTML5开发小编给大家推荐口碑良好的扣丁学堂，扣丁学堂有专业老师制定的HTML5学习路线图辅助学员学习，此外还有与时俱进的HTML5课程体系和HTML5视频教程供大家学习，想要学好HTML5开发技术的小伙伴快快行动吧。

H5基础课程：https://ke.qq.com/course/320523?flowToken=1008606【扫码进入HTML5前端开发VIP免费公开课】

注：点击(了解更多)进入课程直播间