# Работа с видео

Ниже будет расписан пайплайн добавления видеофайла в продвинутый редакатор.

## Создание сценария

Первым делом, нужно добавить новый скрипт. 

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FuOZwhqFFKRxBFhQ1N8hl%2FVideo_1.jpg?alt=media\&token=8891c1d1-aad7-456f-b2cb-d02b0bd14438)

Далее, нужно перейти в режим редактирования кода, нажав на **Edit**.

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FHJ9IQ22bWQZRHounfcld%2FVideo_2.jpg?alt=media\&token=d672c5e9-a54c-4798-9fc1-db249f76d36c)

## Работа с кодом

Сначала нужно создать новый HTML-элемент `video` *(строка 1)*.

{% code lineNumbers="true" %}

```javascript
let videoElem = document.createElement('video');
```

{% endcode %}

Далее, нужно создать текстуру из элемента <mark style="color:blue;">`videoElem`</mark>, это делается с помощью `THREE.VideoTexture` *(строка 2)*.

{% code lineNumbers="true" %}

```javascript
let videoElem = document.createElement('video');
let videoTexture = new THREE.VideoTexture(videoElem);
```

{% endcode %}

Теперь нужно добавить на сцену плоскость, на которую и будет добавляться видео *(строки 3-6)*.

{% code lineNumbers="true" %}

```javascript
let videoElem = document.createElement('video');
let videoTexture = new THREE.VideoTexture(videoElem);
let videoPlane = new THREE.Mesh(
    new THREE.PlaneGeometry(2, 1),
    new THREE.MeshBasicMaterial({ map: videoTexture })
);
```

{% endcode %}

В данном случае создается плоскость `videoPlane`, с высотой 2 и шириной 1, а в качестве материала используется созданная ранее видеотекстура `videoTexture`<mark style="color:blue;">**.**</mark>

После создания плоскости с видеотекстурой, можно добавлять ее на сцену *(строка 7)*.

{% code lineNumbers="true" %}

```javascript
let videoElem = document.createElement('video');
let videoTexture = new THREE.VideoTexture(videoElem);
let videoPlane = new THREE.Mesh(
    new THREE.PlaneGeometry(2, 1),
    new THREE.MeshBasicMaterial({ map: videoTexture })
);
scene.add( videoPlane );
```

{% endcode %}

{% hint style="danger" %}
В случае, если данный скрипт привязан к сцене, то добавление объекта на сцену будет записываться не как `scene.add()`, а как `this.add()`. Это нужно для правильной работы импорта сцены в простой редактор.&#x20;
{% endhint %}

Теперь нужно настроить добавленную плоскость `videoPlane`.

Первым делом нужно добавить источник. Лучше всего, если это будет CDN, либо облако, поддерживающее [Access-Control-Allow-Origin](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin) *(строка 8)*.

{% code lineNumbers="true" %}

```javascript
let videoElem = document.createElement('video');
let videoTexture = new THREE.VideoTexture(videoElem);
let videoPlane = new THREE.Mesh(
    new THREE.PlaneGeometry(2, 1),
    new THREE.MeshBasicMaterial({ map: videoTexture })
);
this.add( videoPlane );
videoElem.src = "https://365508.selcdn.ru/examples/small.mp4";
```

{% endcode %}

Далее, очень важный пункт. Нужно добавить следующую строчку `videoElem.src = "https://365508.selcdn.ru/examples/small.mp4";` *(строка 9)*:

{% code lineNumbers="true" %}

```javascript
let videoElem = document.createElement('video');
let videoTexture = new THREE.VideoTexture(videoElem);
let videoPlane = new THREE.Mesh(
    new THREE.PlaneGeometry(2, 1),
    new THREE.MeshBasicMaterial({ map: videoTexture })
);
scene.add( videoPlane );
videoElem.src = "https://365508.selcdn.ru/examples/small.mp4";
videoElem.crossOrigin = "anonymous";
```

{% endcode %}

Если этого не сделать, при запуске сцены видео не появится,а в консоли будет следующая ошибка:

![](https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FXqnhiGAiXToBKHADc4Ld%2FVideo_3.jpg?alt=media\&token=606dc116-05a1-43fd-9de2-b922c3616924)

{% hint style="info" %}
Это связано с работой HTML-аттрибутом **crossorigin**. Подробнее об этом читайте [здесь](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin).
{% endhint %}

Последние шаги заключаются в включении/отключении зацикленности видео и присутствия звука *(строки 10-11)*.

{% code lineNumbers="true" %}

```javascript
let videoElem = document.createElement('video');
let videoTexture = new THREE.VideoTexture(videoElem);
let videoPlane = new THREE.Mesh(
    new THREE.PlaneGeometry(2, 1),
    new THREE.MeshBasicMaterial({ map: videoTexture })
);
scene.add( videoPlane );
videoElem.src = "https://365508.selcdn.ru/examples/small.mp4";
videoElem.crossOrigin = "anonymous";
videoElem.loop = false;
videoElem.muted = false;
```

{% endcode %}

И, что самое важное, нужно запустить воспроизведение видеофайла *(строка 12)*.

{% code lineNumbers="true" %}

```javascript
let videoElem = document.createElement('video');
let videoTexture = new THREE.VideoTexture(videoElem);
let videoPlane = new THREE.Mesh(
    new THREE.PlaneGeometry(2, 1),
    new THREE.MeshBasicMaterial({ map: videoTexture })
);
scene.add( videoPlane );
videoElem.src = "https://365508.selcdn.ru/examples/small.mp4";
videoElem.crossOrigin = "anonymous";
videoElem.loop = false;
videoElem.muted = false;
videoElem.play();
```

{% endcode %}

Таким образом можно добавлять любое видео на сцену.

Так же, ниже приложен JSON-файл с данным проектом, чтобы вы могли попробовать запустить и посмотреть на то, как он работает.

{% file src="<https://16483826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQlfxB1bBQeYgEsEfSMqq%2Fuploads%2FjVU9QMvPlPNlkU5wQSR4%2FcreateVideoElem.json?alt=media&token=ab92751b-ea68-4a12-bf1e-03a70feef70a>" %}