Dokumentacja | Przycisk Wave.video

Przycisk Wave.video

1. Utwórz przycisk i dodaj go do strony

Skonfiguruj przycisk i umieść kod przycisku w miejscu, w którym ma się pojawić na stronie.
Upewnij się, że zastąpiłeś YOUR_API_KEY swoim rzeczywistym kluczem 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">Utwórz wideo</span>

Podgląd przyciskuUtwórzwideo

2. Jak to działa

Kliknięcie przycisku spowoduje uruchomienie edytora Wave.video wewnątrz ramki iframe na Twojej stronie. Użytkownicy będą musieli zalogować się do Wave.video lub zarejestrować się, jeśli nie mają jeszcze konta, a wszystko to wewnątrz ramki iframe. Po utworzeniu filmu użytkownicy publikują go z powrotem w witrynie.

Istnieje kilka sposobów na pobranie wideo z edytora. Najprostszym z nich jest określenie identyfikatora tagu wideo, w którym film zostanie umieszczony. Inną opcją jest zapewnienie funkcji zwrotnej, aby otrzymać adres URL i miniatury wideo.

Zobacz demonstracje

3. Dostosuj przycisk

Przycisk można dostosować przy użyciu własnego stylu lub skorzystać z naszych dostarczonych stylów. Na stronie może znajdować się kilka przycisków, ale wszystkie powinny mieć klasę wave-video-button.

Każdy przycisk można dodatkowo dostosować za pomocą atrybutów danych:

data-video-id	Identyfikator wideo, który umożliwia edycję wcześniej utworzonego wideo. Identyfikator jest unikalny dla każdego użytkownika, tzn. jeśli dwóch różnych użytkowników otworzy edytor z tym samym identyfikatorem, zostaną utworzone lub edytowane dwa różne filmy.
data-video-format	Format wideo. Lista wszystkich obsługiwanych formatów jest dostępna na stronie https://api.wave.video/project/formats. Przykład: youtube_horizontal
data-search-text	Zapytanie wyszukiwania dotyczy biblioteki zasobów lub szablonów. Jeśli edytor uruchamia się ze strony szablonów, to zapytanie jest parametrami wyszukiwania szablonów. Przejdź do strony szablonów, skonfiguruj wyszukiwanie, a następnie skopiuj wszystkie parametry z adresu URL. Na przykład, jeśli adres url to: `https://wave.video/video-templates?category=%2FUse-Cases%2FVirtual-Backgrounds&name=beach` wtedy data-search-text powinien być ustawiony na `category=%2FUse-Cases%2FVirtual-Backgrounds&name=beach` Jeśli edytor uruchamia się z biblioteki akcji, tekst ten jest używany do wyszukiwania akcji.
data-publish-label	Etykieta tekstowa na przycisku publikowania, zastępująca domyślną "Opublikuj".
data-publish-video-id	Identyfikator tagu wideo, który odbiera wideo. Jeśli na stronie znajduje się tag wideo, można określić identyfikator tego tagu, a edytor ustawi ostateczny adres URL wideo na atrybut `src` tego tagu wideo.
data-navigation-target	select-formats - otwiera edytor na ekranie wyboru formatów uploads - otwiera edytor na ekranie przesyłania edit - otwiera edytor na ekranie edycji templates - uruchamia edytor ze strony szablonów (domyślnie). data-search-text może być użyty do określenia parametrów wyszukiwania na stronie szablonu.
data-publish-callback	Globalna funkcja wywołania zwrotnego. Ta funkcja jest wywoływana, gdy użytkownik zapisuje wideo. Funkcja jest wywoływana z następującymi parametrami: callback_function(button, result, error) Gdzie: button - element przycisku result - json z adresem URL wideo i miniaturami error - komunikat o błędzie, jeśli występuje Oto przykład wynikowego JSON: { "name": "nazwa projektu", "videoUrl": "adres URL do mp4", "czas trwania": czas trwania w sekundach, "width": szerokość wideo, "height": wysokość wideo, "size": rozmiar wideo w bajtach, "fps": liczba klatek na sekundę, "format": "format wideo wybrany przez użytkownika", "miniatury": [ { "time": 0, "url": "url do miniatury w czasie 0" }, { "time": 2.2, "url": "url do miniatury w czasie 2.2" }, ] } Należy pamiętać, że wideo zwrócone z edytora wygaśnie za 3 dni. Jeśli ma być używany dłużej, należy go pobrać z tego adresu URL.

Przykład

W poniższym przykładzie mamy przycisk z funkcją zwrotną onWavePublish. Po wywołaniu tej funkcji kod wydrukuje w konsoli adres URL pliku wideo i adresy URL miniatur.

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

    data-publish-callback="onWavePublish">Utwórz wideo</span>.

```
<script>
```

function onWavePublish(button, result, error) {

```
if (error) {
```
```
    alert("Błąd: "+błąd);
```
```
} else {
```
```
    if (result.videoUrl) {
```

        console.log("got video: ", 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;
```
```
        niech 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 {
```

              // fala została zamknięta bez publikacji, zignoruj

```
          }
```
```
      }
```
```
  }
```
```
  (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>
```

Przycisk Wave.video

1. Utwórz przycisk i dodaj go do strony

Konfiguracja przycisku

2. Jak to działa

3. Dostosuj przycisk

Przykład