Lorsque j'ai reçu la demande de téléchargement de photos et de vidéos et de définition dynamique des images d'affiche pour l'affichage vidéo, la principale chose à laquelle j'ai pensé était de savoir comment analyser la vidéo et obtenir et enregistrer les images de chaque image. La plupart de celles de Baidu sont similaires. à celui ci-dessous qui nécessite de lire la vidéo et de cliquer dessus. Faites une capture d'écran, ou utilisez l'extension php ffmpeg, qui n'est pas cohérente avec les besoins, et je suis un peu fou. Ensuite, j'ai d'abord fait une fonction de prévisualisation de l'image vidéo. , puis j'ai changé l'idée de définir le cadre de l'affiche. J'ai défini l'heure de début de la lecture de la vidéo en saisissant et en annulant la lecture automatique et la barre de contrôle afin que l'utilisateur ne voie qu'une seule image.
/*Aperçu*/ $('.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' : 'Veuillez définir la plage correcte de cadres d'affiche', 'autoHide' : 3000, 'position' : { 'top' : '5px', 'left' : '50%' } }); = setSize(video)[1]; srcStr = video.attr('src'); '<div class=qtuploader__view><div class=qtuploader__mask></div><div class=qtuploader__thumb style=width:' + thumbWidth + 'px;height:' + thumbHeight + 'px;margin:0 auto;><video contrôles width=' + thumbWidth + ' height =' + thumbHeight + ' src=' + srcStr + '>Votre navigateur ne prend pas en charge la vidéo 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( }); /*Définir l'heure d'aperçu du cadre de l'affiche*/ $('.qtuploader__items').on('keyup', '.qtuploader__picinput', function() { var parent = $(this).closest('.qtuploader__picinputbox'); var video = $(this).closest('.qtuploader__itemsbd').find('video'); $.trim($(this).val()); console.log(strVal) if (strVal == '') { parent.addClass('is-error'); parent.find('.qverify__font'). text('Veuillez définir le cadre de l'affiche'); } else if (!(/^[0-9]*$/.test(strVal))) { parent.addClass('is-error'); parent.find('.qverify__font').text('Veuillez entrer un nombre'); } else if (video.length > 0 && strVal > video[0].duration) { parent.addClass('is-error') ; parent.find('.qverify__font').text('Pas plus de (' + vidéo[0].duration + ')'); } else { parent.removeClass('is-error'); parent.find('.qverify__font').text('Veuillez définir le cadre de l'affiche' } }) /*Fermer l'aperçu*/ $(document).undelegate(' .qtuploader__mask', 'cliquez'); $(document).delegate('.qtuploader__mask', 'cliquez', function() { $(this).closest('.qtuploader__view').fadeOut('normal', function() { $(this).closest('.qtuploader__view').remove(); }) }) /*Définir la taille de l'aperçu* / 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); pouceLargeur = parseInt((1920 * pouceHauteur) / 1080); else { thumbHeight = parseInt(winHeight - 200); thumbWidth = parseInt((1080 * thumbHeight) / 1920); arr.push(thumbHeight, thumbWidth) return arr; RésumerCe qui précède est ce que l'éditeur vous présente. Comment configurer la vidéo d'aperçu du téléchargement de vidéo HTML5 et prévisualiser l'image d'affiche d'une certaine seconde de la vidéo. J'espère que cela vous sera utile. Si vous avez des questions, veuillez. laissez-moi un message et l'éditeur vous répondra à temps. Je tiens également à remercier tout le monde pour votre soutien au site d'arts martiaux VeVb !