> 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-pt/scenes-sdk7/media/video-playing.md).

# Reprodução de Vídeo

Transmita vídeo para uma scene

Há três formas diferentes de mostrar um vídeo numa scene:

* Carregue um ficheiro de vídeo como parte do conteúdo da scene
* Faça streaming do vídeo a partir de uma fonte externa
* Faça streaming em direto via Decentraland cast

{% hint style="info" %}
**💡 Dica**: No [Scene Editor no Creator Hub](/creator/content-creator-pt/scene-editor/primeiros-passos/about-editor.md), pode usar um **Video Player** [Smart Item](/creator/content-creator-pt/scene-editor/interatividade/smart-items.md) para uma forma sem código de conseguir isto.
{% endhint %}

Em todos os casos, vai precisar de:

* Uma entity com um [forma primitiva](/creator/content-creator-pt/scenes-sdk7/fundamentos-de-conteudo-3d/shape-components.md) como um plane, cube ou até um cone.
* Um [material](/creator/content-creator-pt/scenes-sdk7/fundamentos-de-conteudo-3d/materials.md) com um `VideoTexture` atribuída à sua texture
* Um `VideoPlayer` component para controlar o estado do vídeo.

## Considerações de performance

Tenha em conta que o streaming de vídeo exige um esforço significativo da máquina do player. Recomenda-se evitar reproduzir mais de um vídeo de cada vez.

Se estiverem a ser reproduzidos demasiados vídeos ao mesmo tempo na sua scene, alguns serão pausados pelo engine. A prioridade para pausar uma screen é determinada com base em vários fatores, incluindo a proximidade ao player, o tamanho e se a screen está no campo de visão do player. O número máximo de vídeos simultâneos depende das definições de qualidade do player.

* Baixa: 1
* Média: 5
* Alta: 10

Também recomendamos começar a reproduzir o vídeo quando o player estiver perto ou realizar uma ação para isso. Começar a reproduzir um vídeo quando sua scene é carregada longe no horizonte afetará o desempenho desnecessariamente enquanto os players visitam scenes vizinhas.

Evite também fazer streaming de vídeos em resolução muito alta. Não use nada acima de *HD*.

Também é ideal reproduzir vídeos em Basic (unlit) materials, para reduzir a carga de performance, como acontece em todos os exemplos abaixo.

## Mostrar um vídeo

As instruções seguintes aplicam-se a todas as três opções de mostrar vídeo:

1. Crie uma entity para servir de screen de vídeo. Dê a esta entity um `MeshRenderer` component para que tenha uma forma visível.
2. Crie uma `VideoPlayer` component, quer referenciando um URL de streaming quer um caminho para um ficheiro de vídeo. Aqui também pode definir o vídeo `playing` estado e o volume. Este component pode ser atribuído à entity da screen de vídeo ou a qualquer outra entity na scene.
3. Crie uma `VideoTexture` object, e na sua `videoPlayerEntity` property atribua a entity que possui o `VideoPlayer` component.
4. Crie uma `Material`, atribua-o à screen entity, e defina o seu `texture` à `VideoTexture` que criou.

Este exemplo usa um vídeo armazenado localmente numa `/videos` folder no projeto da scene:

```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 um vídeo de um URL de streaming externo, altere o passo 2 para que o `src` property no `VideoPlayer` component referencie o 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,
})
```

Veja [Streaming using Decentraland cast](#streaming-using-decentraland-cast) para detalhes sobre como usar este terceiro método alternativo.

## Sobre Streaming Externo

A origem do streaming deve ser uma *https* URL (*http* URLs não são suportados).

Deves poder colar uma URL que aponte para um vídeo na maioria dos sites populares de streaming de vídeo. Tem atenção aos termos de serviço dessas plataformas.

Para fazer streaming a partir de um ficheiro de vídeo que tenhas na tua máquina local, a forma mais fácil é carregar esse vídeo para um Google Drive público e colar o link.

Outra opção é usar um fornecedor de alojamento gerido como [Vimeo](https://vimeo.com/) , [Livepeer Studio](https://livepeer.studio/) ou [Serraform](https://serraform.gitbook.io/streaming-docs/guides/decentraland-playback) onde você paga uma taxa ao provedor para gerenciar toda a infraestrutura de streaming.

A abordagem mais poderosa é configurar o seu próprio servidor, usando software gratuito mas pagando o alojamento numa 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) ou [Cloudflare](https://www.cloudflare.com/products/cloudflare-stream/). Pode implementar algo como um [Node Media Server](https://github.com/illuspas/Node-Media-Server), que fornece de imediato a maior parte do que precisa.

Todas estas opções têm vantagens e desvantagens para diferentes cenários. Deve avaliar o que é melhor para si, tendo em conta as suas necessidades, competências técnicas e orçamento.

## Configurar o OBS para uma transmissão bem-sucedida

[OBS](https://obsproject.com/) é uma ferramenta popular e gratuita para gerir os seus streams.

Quer esteja a usar a stream key de um local ou o seu próprio servidor RTMP, as suas definições no OBS são importantes para o sucesso do seu stream. Deve apontar para uma ligação sólida e consistente.

### Configuração simples do OBS

A seguinte configuração simples é recomendada:

* Bitrate 2500kbps (que funcionará com todos os locais Decentraland)
* Bitrate de áudio 160kbps
* Predefinição do codificador de vídeo: Hardware NVENC
* Codificador de áudio AAC
* Resolução máxima: 720 (qualquer valor superior causa problemas em DCL)
* Taxa de frames 30fps

{% hint style="warning" %}
**📔 Observação**: Certifique-se de desativar o Multitrack streaming no OBS. Pode encontrar isto em Settings > Stream.
{% endhint %}

### Conselhos para novos streamers

* As verificações iniciais de som são essenciais para testar a sua configuração com o local.
* Pequenos erros como um dígito errado na stream key são os mais prováveis de estragar o stream.
* Não ultrapasse a resolução 720 nem uma bitrate de 2500 kbps.

## Streaming ao vivo

Pode fazer livestream a partir da sua câmara ou partilhar o seu ecrã usando a [Streaming ao vivo](/creator/content-creator-pt/scene-editor/operar-ao-vivo/live-streaming.md) funcionalidade do [Ferramentas de administração](/creator/content-creator-pt/scene-editor/operar-ao-vivo/scene-admin.md) .

Este método de streaming usa a mesma arquitetura de comunicações usada para comunicações em direto entre jogadores. É fácil de configurar e tem muito menos atraso do que o streaming a partir de fontes externas.

1. Adiciona um [Ferramentas de administração](/creator/content-creator-pt/scene-editor/operar-ao-vivo/scene-admin.md) smart item à sua scene, bem como um [Video player](/creator/content-creator-pt/scene-editor/interatividade/video-screen.md) .
2. Publique a sua scene, seja num World ou em Genesis City.
3. Entre na scene como um player com a permissão para usar as ferramentas de Admin.
4. Abra a consola de Admin, selecione a **Vídeo** separador, depois seleciona a **Live** funcionalidade e clique no **Obter chave de transmissão** botão.
5. Copia o **Server URL** e *Streaming key*\* para o seu software de streaming (por exemplo, OBS).
6. Pressione a **Ativar** botão para começar a transmitir.

Em vez de adicionar um smart item Video player à sua scene, também pode usar o URL `livekit-video://current-stream` como fonte de vídeo, para reproduzir o stream na sua scene. Ainda precisará das ferramentas de Admin para obter a stream key.

```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,
})
```

## Materiais de vídeo

Na maior parte das vezes, vai querer reproduzir vídeos num [Basic material](/creator/content-creator-pt/scenes-sdk7/fundamentos-de-conteudo-3d/materials.md#unlit-materials)não iluminado, em vez de um material PBR. Isto resulta numa imagem muito mais brilhante e nítida e é melhor para a performance.

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

Normalmente recomenda-se reproduzir vídeos em Basic unlit materials, pois isto é melhor para a performance. No entanto, se quiser projetar um vídeo sobre um material PBR, tenha em conta que as propriedades predefinidas fazem o vídeo parecer bastante opaco. Pode melhorar isto alterando outras properties do material. Aqui estão algumas definições recomendadas para fazer o vídeo sobressair mais:

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

{% hint style="info" %}
**💡 Dica**: Como o vídeo é uma texture adicionada a um material, também pode experimentar outras properties de materials, como tingi-lo com uma cor ou adicionar outras camadas de texture, por exemplo para produzir um efeito de ecrã sujo.

Veja [materials](/creator/content-creator-pt/scenes-sdk7/fundamentos-de-conteudo-3d/materials.md) para mais detalhes.
{% endhint %}

## Sobre arquivos de vídeo

Os seguintes formatos de arquivo são suportados:

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

Lembre-se de que um arquivo de vídeo aumenta o tamanho total da scene, o que faz com que a scene demore mais para ser baixada pelos players que entram na sua scene. O tamanho do vídeo também pode fazer você ultrapassar o [limitações da scene](/creator/content-creator-pt/scenes-sdk7/otimizacao/scene-limitations.md), pois você tem um máximo de 15 MB por parcel a ser usado. Recomendamos compactar o vídeo o máximo possível, para que isso seja menos problemático.

Também recomendamos começar a reproduzir o vídeo quando o player estiver por perto ou executar uma ação para o desencadear. Começar a reproduzir um vídeo quando a sua scene é carregada muito longe no horizonte afetará desnecessariamente a performance enquanto os players visitam scenes vizinhas.

## Iniciar, pausar e parar um vídeo

Para começar a reproduzir o vídeo ou pausá-lo, defina o `playing` property como *true* ou *false*. Se `playing` for definido como false, o vídeo fica em pausa no último frame mostrado.

Pode tornar uma screen alternável adicionando-lhe um pointer event, como mostrado abaixo:

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

Para parar o vídeo e enviá-lo de volta ao primeiro frame, defina a `position` propriedade para 0. No exemplo seguinte, clicar no vídeo faz com que ele pare.

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

## Configurar o video player

As seguintes propriedades opcionais estão disponíveis para definir no `VideoPlayer` component:

* `playing`: Determina se o vídeo está atualmente a ser reproduzido. Se false, o vídeo fica em pausa.

{% hint style="warning" %}
**📔 Observação**: Apenas um número limitado de vídeos pode ser reproduzido ao mesmo tempo, dependendo das definições de qualidade do player. Se a scene reproduzir mais do que isso, o engine pausa os de menor prioridade. Veja [Considerações de performance](#performance-considerations).
{% endhint %}

* `playbackRate`: Altera a velocidade a que o vídeo é reproduzido. *1* por padrão.
* `volume`: Permite alterar o volume do áudio. *1* por padrão.
* `position`: Permite definir uma posição inicial diferente no vídeo. É expressa em segundos após o início original do vídeo. *0* por defeito, o que faz com que comece no início real do vídeo.
* `loop`: Boolean que determina se o vídeo é reproduzido continuamente em loop, ou se para após ser reproduzido uma vez. *false* por padrão.

## Reproduzir vários vídeos

Para evitar problemas de performance, mantenha baixo o número de vídeos diferentes a serem reproduzidos ao mesmo tempo; o engine apenas permite um número limitado de vídeos simultâneos, dependendo das definições de qualidade do player (ver [Considerações de performance](#performance-considerations)). No entanto, uma scene pode reproduzir várias cópias da mesma video texture em vários screens diferentes. Isto não é restringido, pois tem muito menos impacto na performance do que reproduzir vídeos separados. Para reproduzir o mesmo vídeo em várias entities, basta atribuir a mesma instância do objeto de video texture aos `Material` components de cada screen entity.

```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,
})
```

Note que, no exemplo acima, só é necessário criar um `VideoPlayer` component, que controla o estado de ambas as screens de vídeo. Neste caso, o component é atribuído à `screen1` entity, mas também poderia ser atribuído a qualquer outra entity na scene, não necessariamente a uma das screens.

## Eventos de vídeo

Lide facilmente com alterações de estado num vídeo, para responder quando um vídeo começa a ser reproduzido, fica em pausa, etc. Isto pode ser usado, por exemplo, para reproduzir animações em perfeita sincronia com um vídeo, garantindo que começam ao mesmo tempo que o vídeo.

Use `videoEventsSystem.registerVideoEventsEntity` para definir uma função que é executada sempre que o estado do vídeo atribuído a uma entity muda. Sempre que o estado muda, a sua função pode verificar o novo estado e responder em conformidade.

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

// ... Crie videoPlayerEntity com o component VideoPlayer, Transform, MeshRenderer.setPlane(), etc. ...

videoEventsSystem.registerVideoEventsEntity(
	videoPlayerEntity,
	function (videoEvent) {
		console.log(
			'evento de vídeo - estado: ' +
				videoEvent.state +
				'\noffset atual:' +
				videoEvent.currentOffset +
				'\nduração do vídeo:' +
				videoEvent.videoLength
		)

		switch (videoEvent.state) {
			case VideoState.VS_READY:
				console.log('evento de vídeo - vídeo está PRONTO')
				break
			case VideoState.VS_NONE:
				console.log('evento de vídeo - vídeo está SEM ESTADO')
				break
			case VideoState.VS_ERROR:
				console.log('evento de vídeo - vídeo está EM ERRO')
				break
			case VideoState.VS_SEEKING:
				console.log('evento de vídeo - vídeo está A PROCURAR')
				break
			case VideoState.VS_LOADING:
				console.log('evento de vídeo - vídeo está A CARREGAR')
				break
			case VideoState.VS_BUFFERING:
				console.log('evento de vídeo - vídeo está A FAZER BUFFER')
				break
			case VideoState.VS_PLAYING:
				console.log('evento de vídeo - vídeo começou a REPRODUZIR')
				break
			case VideoState.VS_PAUSED:
				console.log('evento de vídeo - vídeo está EM PAUSA')
				break
		}
	}
)
```

O objeto videoEvent passado como input para a função contém as seguintes propriedades:

* `currentOffset` (*number*): O valor atual da propriedade `position` do vídeo. Este valor mostra os segundos decorridos desde o início original do vídeo. *-1* se o vídeo ainda não tiver começado a ser reproduzido.
* `state`: O novo estado do vídeo, expresso como um valor de `VideoState` enum. Este enum pode conter os seguintes valores possíveis:
  * `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* ): O comprimento em segundos de todo o vídeo. *-1* se o comprimento for desconhecido.
* `timestamp` ( *number*): Um *timestamp lamport* que é incrementado sempre que o vídeo muda de estado.
* `tickNumber` (*number*): O momento em que o evento ocorreu, expresso como contagem de ticks desde que a scene começou a correr.

Se voltar a registar um callback numa entity que já tenha um (por exemplo, para alterar o que acontece na mudança de estado), o novo callback substitui o antigo, e o último estado reportado é preservado. Isto significa que o novo callback não é chamado novamente para um estado que já tinha sido reportado ao callback anterior.

### Verificar se uma entity está registada

Use `videoEventsSystem.hasVideoEventsEntity()` para verificar se uma entity já tem um callback de video events registado.

```ts
if (videoEventsSystem.hasVideoEventsEntity(videoPlayerEntity)) {
	console.log('Esta entity já tem um listener de evento de vídeo')
}
```

### Último evento de vídeo

Consulte um vídeo quanto à sua última mudança de estado usando `videoEventsSystem.getVideoState()`. Isto devolve o último `VideoEvent` valor para a entity, ou `undefined` se nenhum evento tiver sido ainda reportado. Pode chamar isto a partir de um system para consultar o estado do vídeo a cada frame sem registar um callback.

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

	console.log(`estado: ${latestVideoEvent.state}
    \noffset atual: ${latestVideoEvent.currentOffset}
    \nduração do vídeo: ${latestVideoEvent.videoLength}`)
}
```

## Máscaras alpha em vídeos

Um truque útil para ter screens de vídeo não retangulares é aplicar uma alpha texture por cima de um plane. Pode recortar parte do plane para a forma que quiser.

Use a imagem seguinte para recortar o seu vídeo numa forma circular, com cantos transparentes.

![](https://2402076176-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://2402076176-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" %}
**📔 Observação**: Em versões anteriores, a `alphaTexture` propriedade só existia em PBR materials. Atualmente, só funciona em basic materials.
{% endhint %}

## Reproduzir um vídeo num modelo glTF

Pode reproduzir um vídeo num *glTF* modelo usando o [GltfNodeModifiers](/creator/content-creator-pt/scenes-sdk7/fundamentos-de-conteudo-3d/materials.md#modify-gltf-materials) componente. Veja [Modificar materiais glTF](/creator/content-creator-pt/scenes-sdk7/fundamentos-de-conteudo-3d/materials.md#modify-gltf-materials) para mais detalhes.

Isto permite-lhe reproduzir os seus vídeos em qualquer forma, não apenas em planos. Por exemplo, pode reproduzir vídeos num ecrã curvo, ou até em todo o corpo de um 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,
						}),
					},
				},
			},
		},
	],
})
```

O mapeamento do vídeo seguirá o mapeamento UV original que o modelo usa. Isto significa que, se o modelo tiver uma texture mapeada para uma parte específica do modelo, o vídeo será mapeado para essa mesma parte.

Você também pode usar a `GltfNodeModifiers` component para reproduzir um vídeo apenas numa mesh específica dentro do modelo. Por exemplo, pode reproduzi-lo numa parede específica de um edifício, mesmo que o modelo abranja todo o edifício. Veja [Modificar materiais glTF](/creator/content-creator-pt/scenes-sdk7/fundamentos-de-conteudo-3d/materials.md#modify-gltf-materials) para mais detalhes.

## Áudio espacial

Por defeito, o vídeo de um `VideoPlayer` component é global, o que significa que será ouvido a um volume consistente em toda a sua scene. Se um player sair da scene, não ouvirá o streaming de todo.

Para tornar o áudio espacial, defina a `spatial` property como *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,
})
```

O vídeo passará agora a ser ouvido a partir da posição da entity que possui o `VideoPlayer` component, e será mais alto à medida que o player se aproximar.

Controle o áudio espacial com as seguintes propriedades:

* `spatialMinDistance`: A distância mínima a partir da qual o áudio se torna espacial. Se o player estiver mais perto, o áudio será ouvido a volume total. *0* por padrão.
* `spatialMaxDistance`: A distância máxima a partir da qual o áudio é ouvido. Se o player estiver mais longe, o áudio será ouvido com volume 0. *60* por defeito

```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" %}
**📔 Observação**: Alguns formatos de vídeo não suportam áudio espacial. Certifique-se de que o stream está codificado em *mp4*, *m4a*, ou *mov*.
{% endhint %}

## Análise de áudio

Pode ler dados de amplitude e frequência em tempo real da faixa de áudio de uma `VideoPlayer` entity para conduzir visuais reativos que sincronizem com a banda sonora do vídeo. Veja [Análise de áudio](/creator/content-creator-pt/scenes-sdk7/media/audio-analysis.md).

{% hint style="info" %}
**💡 Dica**: Para ver o vídeo reproduzido num modelo GLTF em vez de numa primitive, consulte a [`74,-8-gltfnodemodifier`](https://github.com/decentraland/sdk7-test-scenes/tree/main/scenes/74,-8-gltfnodemodifier) cena de teste, que envia um stream HLS para nós específicos de GLTF usando `GltfNodeModifiers` video textures.
{% 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-pt/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.
