In diesem Artikel wird HTML5-Video vorgestellt, um ein Vorschaubildvideo hochzuladen, den Posterrahmen einer bestimmten Sekunde des Videos festzulegen und in der Vorschau anzuzeigen und ihn mit allen zu teilen. Die Details sind wie folgt:
Als ich die Anfrage erhielt, Bilder und Videos hochzuladen und die Posterrahmen für die Videoanzeige dynamisch festzulegen, dachte ich hauptsächlich darüber nach, wie ich das Video analysieren und die Bilder jedes Rahmens abrufen und speichern kann. Die meisten von Baidu sind ähnlich Zum nächsten muss ich das Video abspielen und darauf klicken oder die PHP-Erweiterung ffmpeg verwenden, was nicht mit den Anforderungen übereinstimmt. Dann habe ich zuerst eine Vorschaufunktion für das Videobild erstellt , und dann habe ich die Idee, den Posterrahmen festzulegen, durch Eingabe und Abbrechen der automatischen Wiedergabe so eingestellt, dass der Benutzer nur ein Bild sieht
/*Vorschau*/ $('.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': 'Bitte stellen Sie den richtigen Bereich der Posterrahmen ein', 'autoHide': 3000, 'position': { 'top': '5px', 'left': '50%' } }); = setSize(video)[1]; srcStr = video.attr('src'); class=qtuploader__mask></div><div class=qtuploader__thumb style=width:' + thumbWidth + 'px;height:' + thumbHeight + 'px;margin:0 auto;><video steuert width=' + thumbWidth + ' height =' + thumbHeight + ' src=' + srcStr + '>Ihr Browser unterstützt keine Videos 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( }); /*Poster-Frame-Vorschauzeit festlegen*/ $('.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.find('.qverify__font'); text('Bitte Posterrahmen festlegen'); } else if (!(/^[0-9]*$/.test(strVal))) { parent.addClass('is-error'); parent.find('.qverify__font').text('Bitte geben Sie eine Zahl ein'); } else if (video.length > 0 && strVal > video[0].duration) { parent.addClass('is-error') ; parent.find('.qverify__font').text('Nicht mehr als (' + video[0].duration + ')'); } else { parent.removeClass('is-error'); parent.find('.qverify__font').text('Bitte Posterrahmen festlegen'); /*Vorschau schließen*/ $(document).undelegate(' .qtuploader__mask', 'click'); $(document).delegate('.qtuploader__mask', 'click', function() { $(this).closest('.qtuploader__view').fadeOut('normal', function() { $(this).closest('.qtuploader__view').remove(); }) }) /*Vorschaugröße festlegen* / function setSize(element) { var ThumbWidth = 0, ThumbHeight = 0, arr = []; $(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 { daumenHeight = parseInt(winHeight - 200); daumenWidth = parseInt((1080 * daumenHeight) / 1920 }Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.