html5 vedio 图片,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 = '

}

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 上传预览图片视频如何设置、预览视频某秒的海报帧，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！