HTML5 video upload preview image video how to set, preview the poster frame of a certain second of the video

When I received the request to upload pictures and videos and dynamically set the poster frames for video display, the main thing I thought about was how to parse the video and get and save the pictures of each frame. Most of the ones from Baidu are similar to the one below that requires playing the video and clicking on it. Take a screenshot, or use the php ffmpeg extension, which is inconsistent with the needs, and I am a little crazy. Then I first made a preview function of the video image, and then changed the idea of ​​setting the poster frame. I set the time for the video to start playing by inputting and cancel. Automatic playback and control bar so that the user sees only one picture

 /*Preview*/ $('.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': 'Please set the correct range of poster frames', '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 + '>Your browser does not support video tag</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(); }); /*Set poster frame preview time*/ $('.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('Please set poster frame'); } else if (!(/^[0-9]*$/.test(strVal))) { parent.addClass('is-error'); parent.find('.qverify__font').text('Please enter a number'); } else if (video.length > 0 && strVal > video[0].duration) { parent.addClass('is-error'); parent.find('.qverify__font').text('No more than (' + video[0].duration + ')'); console.log('111---' + video[0].duration) } else { parent.removeClass('is-error'); parent.find('.qverify__font').text('Please set poster frame'); } }) /*Close preview*/ $(document).undelegate(' .qtuploader__mask', 'click'); $(document).delegate('.qtuploader__mask', 'click', function() { $(this).closest('.qtuploader__view').fadeOut('normal', function() { $(this).closest('.qtuploader__view').remove(); }) }) /*Set preview size* / 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; }

The above is what the editor introduces to you. How to set up the HTML5 video upload preview image video and preview the poster frame of a certain second of the video. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. of. I would also like to thank everyone for your support of the VeVb martial arts website!