> For the complete documentation index, see [llms.txt](https://docs.decentraland.org/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.decentraland.org/creator/content-creator-es/scenes-sdk7/media/video-playing.md).

# Reproducción de video

Transmite video a una escena

Hay tres formas diferentes de mostrar un video en una escena:

* Sube un archivo de video como parte del contenido de la escena
* Transmite el video desde una fuente externa
* Transmite en vivo a través de Decentraland cast

{% hint style="info" %}
**💡 Consejo**: En el [Scene Editor en Creator Hub](/creator/content-creator-es/scene-editor/primeros-pasos/about-editor.md), puedes usar un **Video Player** [Smart Item](/creator/content-creator-es/scene-editor/interactividad/smart-items.md) para lograr esto sin código.
{% endhint %}

En todos los casos, necesitarás:

* Una entidad con un [forma primitiva](/creator/content-creator-es/scenes-sdk7/fundamentos-del-contenido-3d/shape-components.md) como un plano, un cubo o incluso un cono.
* Un [material](/creator/content-creator-es/scenes-sdk7/fundamentos-del-contenido-3d/materials.md) con un `VideoTexture` asignado a su textura
* Un `VideoPlayer` componente para controlar el estado del video.

## Consideraciones de rendimiento

Ten en cuenta que transmitir video exige un esfuerzo significativo por parte de la máquina del jugador. Se recomienda evitar reproducir más de un video a la vez.

Si se están reproduciendo demasiados videos al mismo tiempo en tu escena, algunos serán pausados por el engine. La prioridad para pausar una pantalla se determina según varios factores, como la proximidad al jugador, el tamaño y si la pantalla está dentro del campo visual del jugador. El número máximo de videos simultáneos depende de la configuración de calidad del jugador.

* Bajo: 1
* Medio: 5
* Alto: 10

También recomendamos comenzar a reproducir el video cuando el player esté cerca o realice una acción para hacerlo. Comenzar a reproducir un video cuando tu escena se carga muy lejos en el horizonte afectará innecesariamente el rendimiento mientras los players visiten escenas vecinas.

También evita transmitir videos en resoluciones muy altas. No uses nada por encima de *HD*.

También es ideal reproducir videos en materiales Basic (sin iluminación) para reducir la carga de rendimiento, como ocurre en todos los fragmentos de ejemplo a continuación.

## Mostrar un video

Las siguientes instrucciones se aplican a las tres opciones para mostrar video:

1. Crea una entidad para que actúe como pantalla de video. Dale a esta entidad un `MeshRenderer` componente para que tenga una forma visible.
2. Crea una `VideoPlayer` componente, ya sea haciendo referencia a una URL de streaming o a la ruta de un archivo de video. Aquí también puedes establecer el `playing` estado y su volumen. Este componente puede asignarse a la entidad de la pantalla de video o a cualquier otra entidad de la escena.
3. Crea una `VideoTexture` objeto, y en su `videoPlayerEntity` propiedad asigna la entidad que posee el `VideoPlayer` componente.
4. Crea una `Material`, asígnalo a la entidad de la pantalla y establece su `texture` a las `VideoTexture` que creaste.

Este ejemplo usa un video que está almacenado localmente en una `/videos` carpeta del proyecto de la escena:

```ts
// #1
const screen = engine.addEntity()
MeshRenderer.setPlane(screen)
Transform.create(screen, { position: { x: 4, y: 1, z: 4 } })

// #2
VideoPlayer.create(screen, {
	src: 'videos/myVideo.mp4',
	playing: true,
})

// #3
const videoTexture = Material.Texture.Video({ videoPlayerEntity: screen })

// #4
Material.setBasicMaterial(screen, {
	texture: videoTexture,
})
```

Para usar un video desde una URL de streaming externa, cambia el paso 2 para que el `src` property en el `VideoPlayer` componente haga referencia a la URL de streaming.

```ts
// #2
VideoPlayer.create(screen, {
	src: 'https://vz-7c61c1b5-d59.b-cdn.net/ccea595a-b910-4de6-b160-092819db021d/playlist.m3u8',
	playing: true,
})
```

Consulta [Streaming usando Decentraland cast](#streaming-using-decentraland-cast) para más detalles sobre cómo usar este tercer método alternativo.

## Acerca de la transmisión externa

La fuente del streaming debe ser una *https* URL (*http* las URLs no son compatibles).

Deberías poder pegar una URL que apunte a un video de la mayoría de los sitios populares de streaming de video. Ten en cuenta los términos de servicio de estas plataformas.

Para transmitir desde un archivo de video que tengas en tu máquina local, la forma más sencilla es subir este video a un Google Drive público y pegar el enlace.

Otra opción es usar un proveedor de hosting gestionado como [Vimeo](https://vimeo.com/) , [Livepeer Studio](https://livepeer.studio/) o [Serraform](https://serraform.gitbook.io/streaming-docs/guides/decentraland-playback) donde pagas una tarifa al proveedor para que gestione toda la infraestructura de streaming.

El enfoque más potente es configurar tu propio Server, usando software gratuito pero pagando por el hosting en una plataforma como [Digital Ocean](https://try.digitalocean.com/developerbrand/?_campaign=emea_brand_kw_en_cpc&_adgroup=digitalocean_exact_exact&_keyword=digitalocean&_device=c&_adposition=&_content=conversion&_medium=cpc&_source=bing\&msclkid=160bfc160a2a1bab9bbf9933594bd9c5\&utm_source=bing\&utm_medium=cpc\&utm_campaign=emea_brand_kw_en_cpc\&utm_term=digitalocean\&utm_content=DigitalOcean%20Exact_Exact) o [Cloudflare](https://www.cloudflare.com/products/cloudflare-stream/). Puedes desplegar algo como un [Node Media Server](https://github.com/illuspas/Node-Media-Server), que proporciona la mayor parte de lo que necesitas listo para usar.

Todas estas opciones tienen ventajas y desventajas para distintos escenarios. Debes evaluar cuál es la mejor para ti teniendo en cuenta tus necesidades, habilidades técnicas y presupuesto.

## Configuración de OBS para una transmisión exitosa

[OBS](https://obsproject.com/) es una herramienta popular y gratuita para gestionar tus streams.

Tanto si usas la clave de transmisión de un recinto como tu propio Server RTMP, tu configuración en OBS es importante para el éxito de tu stream. Debes aspirar a una conexión sólida y constante.

### Configuración simple de OBS

Se recomienda la siguiente configuración simple:

* Bitrate de 2500 kbps (que funcionará con todos los recintos de Decentraland)
* Bitrate de audio de 160 kbps
* Ajuste preestablecido del codificador de video: Hardware NVENC
* Codificador de audio AAC
* Resolución más amplia: 720 (cualquier valor mayor causa problemas en DCL)
* Frecuencia de fotogramas de 30 fps

{% hint style="warning" %}
**📔 Nota**: Asegúrate de desactivar Multitrack streaming en OBS. Puedes encontrarlo en Settings > Stream.
{% endhint %}

### Consejos para nuevos streamers

* Las comprobaciones de sonido tempranas son esenciales para probar tu configuración con el recinto.
* Pequeños errores como un dígito incorrecto en la clave de transmisión son los más propensos a arruinar el stream.
* No superes una resolución de 720 ni un bitrate de 2500 kbps.

## Streaming en vivo

Puedes transmitir en vivo desde tu cámara o compartir tu pantalla usando la [Streaming en vivo](/creator/content-creator-es/scene-editor/operar-en-vivo/live-streaming.md) función del [Herramientas de administración](/creator/content-creator-es/scene-editor/operar-en-vivo/scene-admin.md) smart item.

Este método de streaming usa la misma arquitectura de comunicaciones que se usa para las comunicaciones en vivo entre jugadores. Es fácil de configurar y tiene mucha menos latencia que el streaming desde fuentes externas.

1. Añade un [Herramientas de administración](/creator/content-creator-es/scene-editor/operar-en-vivo/scene-admin.md) smart item en tu escena, así como un [Video player](/creator/content-creator-es/scene-editor/interactividad/video-screen.md) smart item.
2. Publica tu escena, ya sea en un World o en Genesis City.
3. Entra en la escena como un jugador con permiso para usar las herramientas de Admin.
4. Abre la consola de Admin, selecciona la **Video** pestaña, luego selecciona la **Live** funcionalidad y haz clic en la **Obtener clave de transmisión** botón.
5. Copia el **URL del Server** y *clave de streaming*\* a tu software de streaming (por ejemplo, OBS).
6. Pulsa la **Activar** botón para comenzar a transmitir.

En lugar de añadir un smart item Video player a tu escena, también puedes usar la URL `livekit-video://current-stream` como fuente de video para reproducir la transmisión en tu escena. Aun así, seguirás necesitando las herramientas de Admin para obtener la clave de transmisión.

```ts
// #1
const screen = engine.addEntity()
MeshRenderer.setPlane(screen)
Transform.create(screen, { position: { x: 4, y: 1, z: 4 } })

// #2
VideoPlayer.create(screen, {
	src: `livekit-video://current-stream`,
	playing: true,
})

// #3
const videoTexture = Material.Texture.Video({ videoPlayerEntity: screen })

// #4
Material.setBasicMaterial(screen, {
	texture: videoTexture,
})
```

## Materiales de video

La mayoría de las veces querrás reproducir videos en un material sin iluminación [material Basic](/creator/content-creator-es/scenes-sdk7/fundamentos-del-contenido-3d/materials.md#unlit-materials), en lugar de un material PBR. Esto da como resultado una imagen mucho más brillante y nítida y es mejor para el rendimiento.

```ts
Material.setBasicMaterial(screen, {
	texture: videoTexture,
})
```

Por lo general, se recomienda reproducir videos en materiales Basic sin iluminación, ya que esto es mejor para el rendimiento. Sin embargo, si quieres proyectar un video sobre un material PBR, ten en cuenta que las propiedades predeterminadas hacen que el video se vea bastante opaco. Puedes mejorar esto alterando otras propiedades del material. Aquí tienes algunos ajustes recomendados para que el video destaque más:

```ts
Material.setPbrMaterial(screen, {
	texture: videoTexture,
	roughness: 1.0,
	specularIntensity: 0,
	metallic: 0,
	emissiveTexture: videoTexture,
	emissiveIntensity: 0.6,
	emissiveColor: Color3.White(),
})
```

{% hint style="info" %}
**💡 Consejo**: Como el video es una textura que se añade a un material, también puedes experimentar con otras propiedades de los materiales, como teñirlo con un color, o añadir otras capas de textura, por ejemplo para producir un efecto de pantalla sucia.

Consulta [materials](/creator/content-creator-es/scenes-sdk7/fundamentos-del-contenido-3d/materials.md) para más detalles.
{% endhint %}

## Acerca de los archivos de video

Se admiten los siguientes formatos de archivo:

* *.mp4*
* *.ogg*
* *.webm*

Ten en cuenta que un archivo de video aumenta el tamaño total de la escena, lo que hace que la escena tarde más en descargarse para los players que entren en tu escena. El tamaño del video también podría hacer que superes el [limitaciones de la escena](/creator/content-creator-es/scenes-sdk7/optimizacion/scene-limitations.md), ya que tienes un máximo de 15 MB por parcel para usar. Recomendamos comprimir el video lo más posible, para que sea un problema menor.

También recomendamos empezar a reproducir el video cuando el jugador esté cerca o realice una acción para activarlo. Empezar a reproducir un video cuando tu escena se cargue lejos en el horizonte afectará innecesariamente al rendimiento mientras los jugadores visitan escenas vecinas.

## Iniciar, pausar y detener un video

Para iniciar la reproducción del video o pausarlo, establece el `playing` propiedad en *true* o *false*. Si `playing` se establece en false, el video queda en pausa en el último fotograma mostrado.

Puedes hacer que una pantalla sea activable/desactivable añadiéndole un evento de puntero como se muestra a continuación:

```ts
pointerEventsSystem.onPointerDown(
	{
		entity: screen,
		opts: { button: InputAction.IA_POINTER, hoverText: 'Reproducir/Pausar' },
	},
	function () {
		const videoPlayer = VideoPlayer.getMutable(screen)
		videoPlayer.playing = !videoPlayer.playing
	}
)
```

Para detener el video y devolverlo al primer fotograma, establece el `posición` propiedad en 0. En el siguiente ejemplo, al hacer clic en el video se detiene.

```ts
pointerEventsSystem.onPointerDown(
	{
		entity: screen,
		opts: { button: InputAction.IA_POINTER, hoverText: 'DETENER' },
	},
	function () {
		const videoPlayer = VideoPlayer.getMutable(screen)
		videoPlayer.playing = false
		videoPlayer.position = 0
	}
)
```

## Configura el reproductor de video

Las siguientes propiedades opcionales están disponibles para establecer en el `VideoPlayer` component:

* `playing`: Determina si el video se está reproduciendo actualmente. Si es false, el video se pausa.

{% hint style="warning" %}
**📔 Nota**: Solo puede reproducirse un número limitado de videos al mismo tiempo, según la configuración de calidad del jugador. Si la escena reproduce más que eso, el engine pausa los de menor prioridad. Consulta [Consideraciones de rendimiento](#performance-considerations).
{% endhint %}

* `playbackRate`: Cambia la velocidad a la que se reproduce el video. *1* por defecto.
* `volume`: Te permite cambiar el volumen del audio. *1* por defecto.
* `posición`: Permite establecer una posición de inicio diferente en el video. Se expresa en segundos desde el inicio original del video. *0* por defecto, lo que hace que comience en el inicio real del video.
* `loop`: Boolean que determina si el video se reproduce continuamente en bucle o si se detiene después de reproducirse una vez. *false* por defecto.

## Reproducir varios videos

Para evitar problemas de rendimiento, mantén bajo el número de videos diferentes que se reproducen al mismo tiempo; el engine solo permite un número limitado de videos simultáneos, según la configuración de calidad del jugador (consulta [Consideraciones de rendimiento](#performance-considerations)). Sin embargo, una escena puede reproducir varias copias de la misma textura de video en varias pantallas diferentes. Esto no está restringido, ya que afecta mucho menos al rendimiento que reproducir videos separados. Para reproducir el mismo video en varias entidades, simplemente asigna la misma instancia del objeto de textura de video a los `Material` componentes de cada entidad de pantalla.

```ts
// #1
const screen1 = engine.addEntity()
MeshRenderer.setPlane(screen1)
Transform.create(screen1, { position: { x: 4, y: 1, z: 4 } })

const screen2 = engine.addEntity()
MeshRenderer.setPlane(screen2)
Transform.create(screen2, { position: { x: 6, y: 1, z: 4 } })

// #2
VideoPlayer.create(screen1, {
	src: 'https://vz-7c61c1b5-d59.b-cdn.net/ccea595a-b910-4de6-b160-092819db021d/playlist.m3u8',
	playing: true,
})

// #3
const videoTexture = Material.Texture.Video({ videoPlayerEntity: screen1 })

// #4
Material.setBasicMaterial(screen1, {
	texture: videoTexture,
})

Material.setBasicMaterial(screen2, {
	texture: videoTexture,
})
```

Ten en cuenta que en el ejemplo anterior, solo es necesario crear un `VideoPlayer` componente, que controla el estado de ambas pantallas de video. En este caso, el componente se asigna a la `screen1` entidad, pero también podría asignarse a cualquier otra entidad de la escena, no necesariamente a una de las pantallas.

## Eventos de video

Gestiona fácilmente los cambios de estado en un video para responder cuando un video empieza a reproducirse, se pausa, etc. Esto puede usarse, por ejemplo, para reproducir animaciones en perfecta sincronía con un video, asegurando que comiencen al mismo tiempo que el video.

Usa `videoEventsSystem.registerVideoEventsEntity` para definir una función que se ejecuta cada vez que cambia el estado del video asignado a una entidad. Cada vez que cambia el estado, tu función puede comprobar el nuevo estado y responder en consecuencia.

```ts
import {
	engine,
	Entity,
	VideoPlayer,
	videoEventsSystem,
	VideoState,
} from '@dcl/sdk/ecs'

// ... Crea videoPlayerEntity con el component VideoPlayer, Transform, MeshRenderer.setPlane(), etc. ...

videoEventsSystem.registerVideoEventsEntity(
	videoPlayerEntity,
	function (videoEvent) {
		console.log(
			'evento de video - estado: ' +
				videoEvent.state +
				'\ndesplazamiento actual:' +
				videoEvent.currentOffset +
				'\nduración del video:' +
				videoEvent.videoLength
		)

		switch (videoEvent.state) {
			case VideoState.VS_READY:
				console.log('evento de video - el video está LISTO')
				break
			case VideoState.VS_NONE:
				console.log('evento de video - el video está SIN ESTADO')
				break
			case VideoState.VS_ERROR:
				console.log('evento de video - ERROR del video')
				break
			case VideoState.VS_SEEKING:
				console.log('evento de video - el video está BUSCANDO')
				break
			case VideoState.VS_LOADING:
				console.log('evento de video - el video está CARGANDO')
				break
			case VideoState.VS_BUFFERING:
				console.log('evento de video - el video está EN BUFFER')
				break
			case VideoState.VS_PLAYING:
				console.log('evento de video - el video empezó a REPRODUCIRSE')
				break
			case VideoState.VS_PAUSED:
				console.log('evento de video - el video está EN PAUSA')
				break
		}
	}
)
```

El objeto videoEvent pasado como entrada a la función contiene las siguientes propiedades:

* `currentOffset` (*number*): El valor actual de la `posición` propiedad del video. Este valor muestra los segundos transcurridos desde el inicio original del video. *-1* si el video aún no ha comenzado a reproducirse.
* `state`: El nuevo estado del video, expresado como un valor de `VideoState` enum. Este enum puede contener los siguientes valores posibles:
  * `VideoState.VS_READY`
  * `VideoState.VS_NONE`
  * `VideoState.VS_ERROR`
  * `VideoState.VS_SEEKING`
  * `VideoState.VS_LOADING`
  * `VideoState.VS_BUFFERING`
  * `VideoState.VS_PLAYING`
  * `VideoState.VS_PAUSED`
* `videoLength` (*number* ): La duración total del video en segundos. *-1* si la duración es desconocida.
* `marca de tiempo` ( *number*): Una *lamport* marca de tiempo que se incrementa cada vez que el video cambia de estado.
* `tickNumber` (*number*): El momento en que ocurrió el evento, expresado como el conteo de ticks desde que la escena comenzó a ejecutarse.

Si vuelves a registrar un callback en una entidad que ya tiene uno (por ejemplo, para cambiar lo que ocurre al cambiar de estado), el nuevo callback reemplaza al anterior y se conserva el último estado reportado. Esto significa que el nuevo callback no se llama de nuevo para un estado que ya había sido reportado al callback anterior.

### Comprobar si una entidad está registrada

Usa `videoEventsSystem.hasVideoEventsEntity()` para comprobar si una entidad ya tiene registrado un callback de eventos de video.

```ts
if (videoEventsSystem.hasVideoEventsEntity(videoPlayerEntity)) {
	console.log('Esta entidad ya tiene un listener de eventos de video')
}
```

### Último evento de video

Consulta el último cambio de estado de un video usando `videoEventsSystem.getVideoState()`. Esto devuelve el último `VideoEvent` valor para la entidad, o `undefined` si aún no se ha reportado ningún evento. Puedes llamar a esto desde un system para consultar el estado del video en cada frame sin registrar un callback.

```ts
function mySystem() {
	const latestVideoEvent = videoEventsSystem.getVideoState(videoPlayerEntity)
	if (!latestVideoEvent) return

	console.log(`estado: ${latestVideoEvent.state}
    \ndesplazamiento actual: ${latestVideoEvent.currentOffset}
    \nduración del video: ${latestVideoEvent.videoLength}`)
}
```

## Máscaras alpha en videos

Un truco útil para tener pantallas de video no rectangulares es aplicar una textura alpha sobre un plano. Puedes recortar parte del plano con la forma que quieras.

Usa la siguiente imagen para recortar tu video en una forma circular, con esquinas transparentes.

![](https://1216664193-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoPnXBby9S6MrsW83Y9qZ%2Fuploads%2Fgit-blob-4a71dbd3206e2ccafdba8990cb5099b48c9a97cf%2Fcircle_mask.png?alt=media\&token=c1e0f780-7fd0-4e06-a27f-00222068bf81)

```ts
const videoTexture = Material.Texture.Video({
	videoPlayerEntity: screen,
})
const alphaMask = Material.Texture.Common({
	src: 'assets/scene/circle_mask.png',
	wrapMode: TextureWrapMode.TWM_MIRROR,
})

Material.setBasicMaterial(screen, {
	texture: videoTexture,
	alphaTexture: alphaMask,
})
```

![](https://1216664193-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoPnXBby9S6MrsW83Y9qZ%2Fuploads%2Fgit-blob-29eeafc704d19336cc3b0dc023c91e278b4bcd94%2Fcircular-video-screen.png?alt=media\&token=13d1560a-3d64-4a17-943c-25338f931f48)

{% hint style="warning" %}
**📔 Nota**: En versiones anteriores, el `alphaTexture` propiedad solo estaba presente en materiales PBR. Actualmente, solo funciona en materiales Basic.
{% endhint %}

## Reproducir un video en un modelo glTF

Puedes reproducir un video en un *glTF* modelo usando el [GltfNodeModifiers](/creator/content-creator-es/scenes-sdk7/fundamentos-del-contenido-3d/materials.md#modify-gltf-materials) componente. Consulta [Modificar materiales glTF](/creator/content-creator-es/scenes-sdk7/fundamentos-del-contenido-3d/materials.md#modify-gltf-materials) para más detalles.

Esto te permite reproducir tus videos en cualquier forma, no solo en planos. Por ejemplo, puedes reproducir videos en una pantalla curva, o incluso en todo el cuerpo de un NPC.

```ts
const myEntity = engine.addEntity()

GltfContainer.create(myEntity, {
	src: 'models/myModel.glb',
})

Transform.create(myEntity, {
	position: Vector3.create(4, 0, 4),
})

VideoPlayer.create(myEntity, {
	src: 'https://vz-7c61c1b5-d59.b-cdn.net/ccea595a-b910-4de6-b160-092819db021d/playlist.m3u8',
	playing: true,
})

GltfNodeModifiers.create(myEntity, {
	modifiers: [
		{
			path: '',
			material: {
				material: {
					$case: 'pbr',
					pbr: {
						texture: Material.Texture.Video({
							videoPlayerEntity: myEntity,
						}),
					},
				},
			},
		},
	],
})
```

El mapeo del video seguirá el mapeo UV original que usa el modelo. Esto significa que si el modelo tiene una textura asignada a una parte específica del modelo, el video se mapeará a esa misma parte.

También puedes usar la `GltfNodeModifiers` componente para reproducir un video solo en un mesh específico dentro del modelo. Por ejemplo, puedes reproducirlo en una pared específica de un edificio, aunque el modelo abarque todo el edificio. Consulta [Modificar materiales glTF](/creator/content-creator-es/scenes-sdk7/fundamentos-del-contenido-3d/materials.md#modify-gltf-materials) para más detalles.

## Audio espacial

Por defecto, el video de un `VideoPlayer` componente es global, lo que significa que se escuchará con un volumen constante en toda tu escena. Si un jugador sale de la escena, no escuchará el streaming en absoluto.

Para hacer que el audio sea espacial, establece el `spatial` propiedad en *true*.

```ts
VideoPlayer.create(entity, {
	src: 'https://player.vimeo.com/progressive_redirect/playback/1145666916/rendition/540p/file.mp4%20%28540p%29.mp4?loc=external&signature=db1cd6946851313cb8f7be60d1f6c30af0902bcc46fdae0ba2a06e5fdf44c329',
	playing: true,
	spatial: true,
})
```

Ahora el video se escuchará desde la posición de la entidad que posee el `VideoPlayer` componente, y sonará más fuerte a medida que el jugador se acerque.

Controla el audio espacial con las siguientes propiedades:

* `spatialMinDistance`: La distancia mínima a la que el audio se vuelve espacial. Si el jugador está más cerca, el audio se escuchará al volumen máximo. *0* por defecto.
* `spatialMaxDistance`: La distancia máxima a la que se escucha el audio. Si el jugador está más lejos, el audio se escuchará a volumen 0. *60* por defecto

```ts
const videoPlayerEntity = engine.addEntity()

Transform.create(videoPlayerEntity, {
	position: Vector3.create(8, 2, 8),
})

VideoPlayer.create(videoPlayerEntity, {
	src: 'https://player.vimeo.com/progressive_redirect/playback/1145666916/rendition/540p/file.mp4%20%28540p%29.mp4?loc=external&signature=db1cd6946851313cb8f7be60d1f6c30af0902bcc46fdae0ba2a06e5fdf44c329',
	playing: true,
	spatial: true,
	spatialMinDistance: 5,
	spatialMaxDistance: 10,
})

MeshRenderer.setPlane(videoPlayerEntity)

Material.setBasicMaterial(videoPlayerEntity, {
	texture: Material.Texture.Video({ videoPlayerEntity: videoPlayerEntity }),
})
```

{% hint style="warning" %}
**📔 Nota**: Algunos formatos de video no admiten audio espacial. Asegúrate de que la transmisión esté codificada en *mp4*, *m4a*, o *mov*.
{% endhint %}

## Análisis de audio

Puedes leer datos de amplitud y frecuencia en tiempo real de la pista de audio de una `VideoPlayer` entidad para impulsar visuales reactivos que se sincronicen con la banda sonora del video. Consulta [Análisis de audio](/creator/content-creator-es/scenes-sdk7/media/audio-analysis.md).

{% hint style="info" %}
**💡 Consejo**: Para ver un video reproducido en un modelo GLTF en lugar de en un primitivo, consulta la [`74,-8-gltfnodemodifier`](https://github.com/decentraland/sdk7-test-scenes/tree/main/scenes/74,-8-gltfnodemodifier) escena de prueba, que reproduce una transmisión HLS sobre nodos GLTF específicos usando `GltfNodeModifiers` texturas de video.
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.decentraland.org/creator/content-creator-es/scenes-sdk7/media/video-playing.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
