Документация | Кнопка Wave.video

Кнопка Wave.video

1. Создайте свою кнопку и добавьте ее на страницу

Настройте кнопку и поместите код кнопки в то место, где она должна появиться на вашей странице.
Убедитесь, что вы заменили YOUR_API_KEY на ваш реальный ключ API.

```
<script>
```
```
(function (d,w,e,c,a) {
```

    var cf = w[c] = w[c] || {}; cf.apiKey = a;

    var sc=d.createElement(e),s=d.getElementsByTagName(e)[0];

```
    sc.async=!0;
```

    sc.src=cf.embed || 'https://wave.video/editor/embed.js';

```
    s.parentNode.insertBefore(sc, s);
```

})(document, window, 'script', 'waveconfig', '');

```
</script>
```

<span class="wave-video-button large default"

data-video-format="youtube_horizontal">Сделать видео</span>.

Предварительный просмотр вашей кнопкиСделатьвидео

2. Как это работает

Нажатие на кнопку запустит редактор Wave.video внутри iframe на вашей странице. Вашим пользователям придется либо войти в Wave.video, либо зарегистрироваться, если у них еще нет аккаунта, и все это внутри iframe. После того как пользователи создадут видео, они опубликуют его на вашем сайте.

Существует несколько способов получить видео из редактора. Самый простой - указать ID видеотега, куда будет помещено видео. Другой вариант - предоставить функцию обратного вызова для получения URL и миниатюр видео.

Смотрите демонстрационные ролики

3. Настройте свою кнопку

Вы можете настроить кнопку, используя свой собственный стиль, или воспользоваться нашими готовыми стилями. На странице может быть несколько кнопок, но все они должны иметь класс wave-video-button.

Каждая кнопка может быть дополнительно настроена с помощью атрибутов данных:

data-video-id	Идентификатор видео, позволяющий редактировать ранее созданное видео. ID уникален для каждого пользователя, т.е. если два разных пользователя откроют редактор с одним и тем же ID, то будут созданы или отредактированы два разных видео.
data-video-format	Формат видео. Список всех поддерживаемых форматов доступен на сайте https://api.wave.video/project/formats. Пример: youtube_horizontal
данные-поиск-текст	Поисковый запрос либо для библиотеки запасов, либо для шаблонов. Если редактор запускается со страницы шаблонов, то этот запрос - параметры поиска по шаблонам. Перейдите на страницу шаблонов, настройте поиск, а затем скопируйте все параметры из url. Например, если url: `https://wave.video/video-templates?category=%2FUse-Cases%2FVirtual-Backgrounds&name=beach` тогда значение data-search-text должно быть установлено на `category=%2FUse-Cases%2FVirtual-Backgrounds&name=beach` Если редактор запускается из библиотеки запасов, то этот текст используется для поиска запасов.
data-publish-label	Текстовая метка для кнопки публикации, заменяющая установленное по умолчанию значение "Опубликовать".
data-publish-video-id	Идентификатор видеотега, который получает видео. Если на вашей странице есть тег видео, вы можете указать его ID, и редактор установит конечный URL-адрес видео в атрибут `src` этого тега.
data-navigation-target	select-formats - открывает редактор на экране выбора форматов загрузить - открыть редактор на экране загрузки редактировать - открыть редактор на экране редактирования templates - запуск редактора со страницы шаблонов (по умолчанию). data-search-text может использоваться для указания параметров поиска на странице шаблона
data-publish-callback	Глобальная функция обратного вызова. Эта функция вызывается, когда пользователь сохраняет видео. Функция вызывается со следующими параметрами: callback_function(button, result, error) Где: кнопка - элемент кнопки result - json с URL видео и миниатюрами error - сообщение об ошибке, если таковое имеется Вот пример результирующего JSON: { "name": "название проекта", "videoUrl": "ссылка на mp4", "duration": продолжительность в секундах, "width": ширина видео, "height": высота видео, "size": размер видео в байтах, "fps": количество кадров в секунду, "format": "video-format-selected-by-user", "thumbnails": [ { "time": 0, "url": "url к миниатюре в момент времени 0" }, { "time": 2.2, "url": "url к миниатюре в момент времени 2.2" }, ] } Обратите внимание, что срок действия видео, полученного из редактора, истекает через 3 дня. Если его нужно использовать дольше, то его следует загрузить с этого URL.

Пример

В следующем примере у нас есть кнопка с функцией обратного вызова onWavePublish. При вызове этой функции код выведет в консоль URL-адрес видеофайла и URL-адреса миниатюр.

```
<span id="my-button"
```
```
    class="wave-video-button"
```
```
    data-video-id="mypost1"
```

    data-publish-callback="onWavePublish">Сделать видео</span>.

```
<script>
```

function onWavePublish(button, result, error) {

```
если (ошибка) {
```
```
    alert("Ошибка: "+error");
```
```
} else {
```
```
    if (result.videoUrl) {
```

        console.log("получено видео: ", result);

```
        let src = result.videoUrl;
```
```
        let name = result.name;
```
```
        let duration = result.duration;
```
```
        let size = result.size;
```
```
        let width = result.width;
```
```
        let height = result.height;
```
```
        let fps = result.fps;
```
```
        let format = result.format;
```
```
        пусть k = 0;
```

        for (;k<result.thumbnails.length; k++) {

            let url = result.thumbnails[k].url;

            let time = result.thumbnails[k].time;

            console.log("thumbnail at "+time+" is "+url);

```
        }
```
```
    } else {
```

              // волна была закрыта без публикации, игнорируйте

```
          }
```
```
      }
```
```
  }
```
```
  (function (d,w,e,c,a) {
```

      let cf = w[c] = w[c] || {}; cf.apiKey = a;

      var sc=d.createElement(e),s=d.getElementsByTagName(e)[0];sc.async=!0;

      sc.src=cf.embed || 'https://wave.video/editor/embed.js';s.parentNode.insertBefore(sc, s);

  })(document, window, 'script', 'waveconfig', 'YOUR API KEY');

```
</script>
```