ERROR: no se puede configurar un bloque de vídeo con src=null
Hola, Si no encontraste la respuesta aquí, puedes contactar con Devfuture Team: https://devfuture.pro/contact/ Nos especializamos en GrapesJS.
Lee la respuesta completa abajo ↓Pregunta
Descripción
- El error se reproduce en la demo actual
¿Qué pasa?
Configuré mi bloque de vídeo con src=null así:
'''javascript clase Vídeo { constructor(editor) { Let Block = editor. BlockManager.get('vídeo'); Hereda del plugin editor. BlockManager.remove(block.id);
return { Contenido: { ... block.attributes.content, src: null, estilo: { Ancho: '250px', Altura: '150px', }, }, etiqueta: '<div class="callout-icon-callout-icon-video"></div> <div class="callout-block-label">Video</div>', categoría: 'Extra', atributos: { Clase: 'FA', 'tipo de datos': 'vídeo', }, }; } }
Cuando arrastro el bloque, en el HTML generado aparece una imagen base64 en el atributo src así:
'''html
<vídeo allowfullscreen="allowfullscreen" id="imm4" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjJ awMC9zdmciIHdpZHRoPSIxMDAiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImZpbGw6IHJnYmEoMCwwLDAsMC4xNSk7IHRyYW5zZm9ybTogc2NhbGUoMC43NSkiPgogICAgICAgIDxwYXRoIGQ9Ik04LjUgMTMm uNWwyLjUgMyAzLjUtNC41IDQuNSA2SDVtMTYgMVY1YTIgMiAwIDAgMC0yLTJINWMtMS4xIDAtMiAuOS0yIDJ2MTRjMCAxLjEuOSAyIDIgMmgxNGMxLjEgMCAyLS45IDItMnoiPjwvcGF0aD4KICAgICAgPC9zdmc+" controls="controls"></video>
Comportamiento esperado
- Quiero establecer un bloque sin src predefinido y dar al usuario la capacidad de establecer el src mediante el rasgo .
Pasos para reproducir en la demo
- Abre la ventana emergente de importación, pega esto y haz clic en importar '''html <vídeo allowfullscreen="allowfullscreen" id="imm4" controls="controls"></video>
- Vuelve a abrir la ventana emergente de importación y verás que el atributo src está configurado con la imagen base64.
'''html
<vídeo allowfullscreen="allowfullscreen" id="imm4" controls="controls" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zd mciIHdpZHRoPSIxMDAiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImZpbGw6IHJnYmEoMCwwLDAsMC4xNSk7IHRyYW5zZm9ybTogc2NhbGUoMC43NSkiPgogICAgICAgIDxwYXRoIGQ9Ik04LjUgMTMm uNWwyLjUgMyAzLjUtNC41IDQuNSA2SDVtMTYgMVY1YTIgMiAwIDAgMC0yLTJINWMtMS4xIDAtMiAuOS0yIDJ2MTRjMCAxLjEuOSAyIDIgMmgxNGMxLjEgMCAyLS45IDItMnoiPjwvcGF0aD4KICAgICAgPC9zdmc+">
</video>
<style>* {
Tamaño de caja: caja de borde;
}
cuerpo {
marje: 0;
}
*{
tamaño de caja: caja de borde;
}
body{
marje:0;
}
@keyframes fadeEffect{
de {
opacidad:0;
}
to{
opacidad:1;
}
}
</style>
Las conclusiones de mi investigación
Parece ser una colisión entre el vídeo y el componente de imagen , porque la imagen base64 es la imagen de respaldo para el componente de imagen .
Respuestas (3)
Hola,
Si no encontraste la respuesta aquí, puedes contactar con Devfuture Team: https://devfuture.pro/contact/
Nos especializamos en GrapesJS.
@meyerco también pasan una propiedad vacía de 'respaldo: '
Para ser más precisos, el error consiste en cargar un html que contiene una etiqueta de vídeo sin el atributo src.
Tras cargar este html, se añade un atributo scr a la etiqueta de vídeo . Este valor src es una imagen base64 (obviamente la imagen base predeterminada para el componente de imagen).
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #2177
Cómo crear un bloque con contenido HTML, CSS y JavaScript.
¿Alguien podría mostrarme un ejemplo de código de cómo crear un bloque con estilos javascript y css? '''js editor. BlockManager.add('a_bloc...
Issue #2800
[Bug] al eliminar una descripción introductora no se elimina su CSS
DescripciónEl error se reproduce en la demo actual Comportamiento esperado Cuando se elimina una descripción introductora, se elimina su cs...
Issue #2802
[BUG] El editor se queda atascado al cambiar rápidamente la selección entre controles
DescripciónEl error se reproduce en la demo actual ¿Qué pasa? Al cambiar rápidamente la selección entre controles , el editor se queda atas...
Issue #4529
Cuando redimensionamos una imagen con la clase 'xyz', todos los elementos de la página con la misma clase también se redimensionan porque el editor añade CSS a esas clases.
Versión GrapesJS[X] Confirmo que se debe usar la última versión de GrapesJS¿Qué navegador usas? Versión 104.0.5112.101 (Versión oficial) (a...
Plugins de pago que cumplen con este problema
Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.
Cargando recomendaciones de plugins de pago...
Consulta los plugins de código abierto de GrapesJS en GitHub O haz una búsqueda rápida en nuestro catálogo gratuito.
Explora plugins gratuitos →Los plugins premium incluyen soporte, actualizaciones regulares y funciones listas para producción — ahorrando días de trabajo de integración.
Explora plugins premium →Tutoriales relacionados
Guías detalladas sobre el mismo tema.
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.