Este artículo presenta el video HTML5 para cargar una imagen de vista previa del video, configurar y obtener una vista previa del fotograma del póster de un segundo determinado del video y compartirlo con todos. Los detalles son los siguientes:
Cuando recibí la solicitud para cargar imágenes y videos y configurar dinámicamente los cuadros del póster para la visualización del video, lo principal en lo que pensé fue en cómo analizar el video y obtener y guardar las imágenes de cada cuadro. La mayoría de los de Baidu son similares. al siguiente que requiere reproducir el video y hacer clic en él. Tome una captura de pantalla o use la extensión php ffmpeg, que no coincide con las necesidades, y estoy un poco loco. Luego, primero hice una función de vista previa de la imagen del video. Y luego cambié la idea de configurar el marco del póster. Configuré el tiempo para que el video comenzara a reproducirse ingresando y cancelando la reproducción automática y la barra de control para que el usuario vea solo una imagen.
/*Vista previa*/ $('.qtuploader__items').on('click', '[name=viewVideoPicBtn]', function() { var parent = $(this).closest('.qtab__page'); var video = $(this).closest('.qtuploader__itemsbd').find('video'); ''; if($(this).siblings('.qtuploader__picinputbox').hasClass('is-error')){ $.fn.toast({ 'parentDom': padre, 'clases': 'isorange', ' top': '0', 'spacing': 0, 'toastContent': 'Establezca el rango correcto de marcos de póster', 'autoHide': 3000, 'posición': { 'arriba': '5px', 'izquierda': '50%' } }); retorno; if (video.length > 0) { var thumbHeight = setSize(video)[0]; = 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;><controles de video width=' + thumbWidth + ' height =' + thumbHeight + ' src=' + srcStr + '>Su navegador no soporta vídeo etiqueta</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() }); /*Establecer tiempo de vista previa del fotograma del póster*/ $('.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('Establezca el marco del póster'); } else if (!(/^[0-9]*$/.test(strVal))) { parent.addClass('is-error'); parent.find('.qverify__font').text('Ingrese un número'); else if (video.length > 0 && strVal > video[0].duration) { parent.addClass('is-error') ; parent.find('.qverify__font').text('No más de (' + video[0].duration + ')'); } else { parent.removeClass('is-error'); parent.find('.qverify__font').text('Establezca el marco del póster'); /*Cerrar vista previa*/ $(document).undelegate(' .qtuploader__mask', 'hacer clic'); $(documento).delegate('.qtuploader__mask', 'hacer clic', función() { $(this).closest('.qtuploader__view').fadeOut('normal', function() { $(this).closest('.qtuploader__view').remove(); }) }) /*Establecer tamaño de vista previa* / function setSize(elemento) { var thumbWidth = 0, thumbHeight = 0, arr = []; $(ventana).width(), winHeight = $(ventana).height(); var imgWidth = element.width(), imgHeight = element.height() if (imgWidth > imgHeight) { thumbHeight = parseInt(winHeight - 200); ancho del pulgar = parseInt((1920 * altura del pulgar) / 1080); else { altura del pulgar = parseInt(winHeight - 200); ancho del pulgar = parseInt((1080 * altura del pulgar) / 1920); arr.push(altura del pulgar, ancho del pulgar) return arr;Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.