html视频上传获取预览图,HTML5video上传预览图片视频如何设置、预览视频某秒的海报帧...

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

/*预览*/

$(&＃39;.qtuploader__items&＃39;).on(&＃39;click&＃39;, &＃39;[name&＃61;"viewVideoPicBtn"]&＃39;, function() {

var parent &＃61; $(this).closest(&＃39;.qtab__page&＃39;);

var video &＃61; $(this).closest(&＃39;.qtuploader__itemsbd&＃39;).find(&＃39;video&＃39;);

var srcStr &＃61; &＃39;&＃39;, htmlStr &＃61; &＃39;&＃39;;

if($(this).siblings(&＃39;.qtuploader__picinputbox&＃39;).hasClass(&＃39;is-error&＃39;)){

$.fn.toast({

&＃39;parentDom&＃39;: parent,

&＃39;classes&＃39;: &＃39;isorange&＃39;,

&＃39;top&＃39;: &＃39;0&＃39;,

&＃39;spacing&＃39;: 0,

&＃39;toastContent&＃39;: &＃39;请设置正确范围的海报帧&＃39;,

&＃39;autoHide&＃39;: 3000,

&＃39;position&＃39;: {

&＃39;top&＃39;: &＃39;5px&＃39;,

&＃39;left&＃39;: &＃39;50%&＃39;

}

});

return;

}

if (video.length > 0) {

var thumbHeight &＃61; setSize(video)[0];

var thumbWidth &＃61; setSize(video)[1];

srcStr &＃61; video.attr(&＃39;src&＃39;);

htmlStr &＃61; &＃39;

}

parent.append(htmlStr);

parent.find(&＃39;.qtuploader__view video&＃39;)[0].currentTime &＃61; $(this).siblings(&＃39;.qtuploader__picinputbox&＃39;).find(&＃39;.qtuploader__picinput&＃39;).val();

parent.find(&＃39;.qtuploader__view&＃39;).fadeIn();

});

/*设置海报帧预览时间*/

$(&＃39;.qtuploader__items&＃39;).on(&＃39;keyup&＃39;, &＃39;.qtuploader__picinput&＃39;, function() {

var parent &＃61; $(this).closest(&＃39;.qtuploader__picinputbox&＃39;);

var video &＃61; $(this).closest(&＃39;.qtuploader__itemsbd&＃39;).find(&＃39;video&＃39;);

var strVal &＃61; $.trim($(this).val());

console.log(strVal)

if (strVal &＃61;&＃61; &＃39;&＃39;) {

parent.addClass(&＃39;is-error&＃39;);

parent.find(&＃39;.qverify__font&＃39;).text(&＃39;请设置海报帧&＃39;);

} else if (!(/^[0-9]*$/.test(strVal))) {

parent.addClass(&＃39;is-error&＃39;);

parent.find(&＃39;.qverify__font&＃39;).text(&＃39;请输入数字&＃39;);

} else if (video.length > 0 && strVal > video[0].duration) {

parent.addClass(&＃39;is-error&＃39;);

parent.find(&＃39;.qverify__font&＃39;).text(&＃39;不超过(&＃39; &＃43; video[0].duration &＃43; &＃39;)&＃39;);

console.log(&＃39;111---&＃39; &＃43; video[0].duration)

} else {

parent.removeClass(&＃39;is-error&＃39;);

parent.find(&＃39;.qverify__font&＃39;).text(&＃39;请设置海报帧&＃39;);