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 änderte dann die Idee, den Posterrahmen festzulegen, indem er die Zeit eingab, um die Wiedergabe des Videos zu starten, die automatische Wiedergabe und die Steuerleiste abzubrechen, sodass 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 für 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 } ZusammenfassenDas Obige stellt Ihnen vor, wie Sie das HTML5-Video-Upload-Vorschaubild einrichten und eine Vorschau des Poster-Frames einer bestimmten Sekunde des Videos anzeigen. Wenn Sie Fragen haben, helfen wir Ihnen gerne weiter Hinterlassen Sie mir eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte mich auch bei allen für die Unterstützung der VeVb-Kampfsport-Website bedanken!