Cet article présente la vidéo Html5 pour télécharger une image d'aperçu vidéo, définir et prévisualiser l'image d'affiche d'une certaine seconde de la vidéo et la partager avec tout le monde. Les détails sont les suivants :
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;Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.