This article introduces Html5 video to upload preview image video, set and preview the poster frame of a certain second of the video, and share it with everyone. The details are as follows:
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 the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.