Issue #3098💬 RespondidoAbierto el 27 de octubre de 2020por meyercoReacciones 2

ERROR: no se puede configurar un bloque de vídeo con src=null

Respuesta rápidapor GoodPHP1

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)

GoodPHP30 de octubre de 2020

Hola,

Si no encontraste la respuesta aquí, puedes contactar con Devfuture Team: https://devfuture.pro/contact/

Nos especializamos en GrapesJS.

artf9 de noviembre de 2020

@meyerco también pasan una propiedad vacía de 'respaldo: '

meyerco29 de octubre de 2020

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.

Plugins de pago que cumplen con este problema

Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.

Ver todos los plugins

Cargando recomendaciones de plugins de pago...

Opción gratuita

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 →
Opción premium

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.

Todos los tutoriales →

Explorar categorías de plugins

Ve directamente a las páginas de categorías de plugins en el marketplace.