HTML5
发布时间：2022-04-26 发布网站：大佬教程 code.js-code.com
大佬教程收集整理的这篇文章主要介绍了Html5 video 上传预览图片视频，设置、预览视频某秒的海报帧，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
本文介绍了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__picinput
Box').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 = '
';
}
parent.append(htmlStr
);
parent.find('.qtuploader__view video')
[0].currentTime = $(this).siblings('.qtuploader__picinput
Box').find('.qtuploader__picinput').val(
);
parent.find('.qtuploader__view').fadeIn(
);
}
);
/*设置海报帧预览时间*/
$('.qtuploader__items')
.on('keyup','.qtuploader__picinput',function()
{
var parent = $(this).closest('.qtuploader__picinput
Box'
);
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) / 19
20);
}
arr.push(thumbHeight,thumbWidth)
return arr;
}
大佬总结
以上是大佬教程为你收集整理的Html5 video 上传预览图片视频，设置、预览视频某秒的海报帧全部内容，希望文章能够帮你解决Html5 video 上传预览图片视频，设置、预览视频某秒的海报帧所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
