Документація | Кнопка 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> </span> </span>.
```

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

data-video-format="youtube_horizontal">Зняти відео</span>

Попередній перегляд вашої кнопкиЗнятивідео

2. Як це працює

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

Отримати відео з редактора можна кількома способами. Найпростіший - вказати ідентифікатор відеотега, в якому буде розміщено відео. Інший варіант - надати функцію зворотного виклику для отримання URL-адреси та мініатюр відео.

Дивіться демо-версії

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

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

Кожну кнопку можна додатково налаштувати за допомогою атрибутів даних:

data-video-id	Ідентифікатор відео, який надає можливість редагувати раніше створене відео. Ідентифікатор є унікальним для кожного користувача, тобто якщо два різні користувачі відкриють редактор з однаковим ідентифікатором, буде створено або відредаговано два різних відео.
дані-відео-формат	Формат відео. Список усіх підтримуваних форматів доступний за посиланням https://api.wave.video/project/formats Приклад: youtube_horizontal
data-search-text	Пошуковий запит або для стокової бібліотеки, або для шаблонів. Якщо редактор запускається зі сторінки шаблонів, то цей запит є параметрами пошуку шаблонів. Перейдіть на сторінку шаблонів, налаштуйте пошук, а потім скопіюйте всі параметри з 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	Ідентифікатор відеотега, який отримує відео. Якщо на вашій сторінці є тег відео, ви можете вказати ідентифікатор цього тегу, і редактор встановить остаточну URL-адресу відео до атрибуту `src` цього тегу.
дані-навігація-ціль	select-formats - відкриває редактор на екрані вибору форматів uploads - відкрити редактор на екрані завантаження редагувати - відкрити редактор на екрані редагування templates - запускає редактор зі сторінки шаблонів (за замовчуванням). data-search-text можна використовувати для вказівки параметрів пошуку на сторінці шаблону
data-publish-callback	Глобальна функція зворотного виклику. Ця функція викликається, коли користувач зберігає відео. Функція викликається з наступними параметрами: callback_function(button, result, error) Де: button - елемент кнопки result - json з URL-адресою відео та мініатюрами error - повідомлення про помилку, якщо є Ось приклад результуючого JSON: { "name": "назва проекту", "videoUrl": "посилання на mp4", "duration": тривалість у секундах, "width": ширина відео, "height": висота відео, "size": розмір відео в байтах, "fps": кадрів в секунду, "format": "формат відео, вибраний користувачем", "мініатюри": [ { "time": 0, "url": "url до мініатюри в момент часу 0" }, { "time": 2.2, "url": "url to thumbnail at time 2.2" }, ] } Зверніть увагу, що термін дії відео, яке повертається з редактора, закінчується через 3 дні. Якщо ви хочете використовувати його довше, його слід завантажити за цим посиланням.

Приклад

У наступному прикладі ми маємо кнопку з функцією зворотного виклику на WavePublish. Коли ця функція викликається, код виводить на консоль 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) { { }.

```
if (error) { {
```
```
    alert("Помилка: "+error);
```
```
} else {
```
```
    if (result.videoUrl) {
```

        console.log("got video: ", result);

        нехай src = result.videoUrl;

```
        let name = result.name;
```
```
        let duration = result.duration;
```
```
        let size = result.size;
```
```
        let width = result.width;
```
```
        let height = result.height;
```
```
        нехай fps = result.fps;
```
```
        let format = result.format;
```
```
        нехай k = 0;
```

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

            нехай url = result.thumbnails[k].url;

            нехай time = result.thumbnails[k].time;

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

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

              // хвиля була закрита без публікації, ігнорувати

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

      нехай 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> </span> </span> </span>.
```