ドキュメント｜Wave.video ボタン

Wave.videoボタン

1.ボタンを作成し、ページに追加する。

ボタンを設定し、ページ上の必要な場所にボタンのコードを配置します。
YOUR_API_KEYを実際のAPIキーに置き換えてください。

```
<スクリプト
```
```
(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.仕組み

ボタンをクリックすると、ページ上のiframe内でWave.videoエディタが起動します。ユーザーはWave.videoにログインするか、アカウントを持っていない場合はサインアップする必要があります。ユーザーがビデオを作成した後、あなたのウェブサイトにビデオを公開します。

エディタからビデオを取得するにはいくつかの方法があります。最も簡単なのは、動画が配置されるビデオタグIDを指定することです。もう1つの方法は、動画の URL とサムネイルを受け取るコールバック関数を提供することです。

デモを見る

3.ボタンをカスタマイズする

あなた自身のスタイルを使用してボタンをカスタマイズすることができますし、私たちの提供するスタイルを使用することもできます。ページ上に複数のボタンを持つことができますが、それらはすべてクラスwave-video-button を持つ必要があります。

各ボタンはデータ属性でさらにカスタマイズできる：

データビデオアイディー	以前に作成されたビデオを編集する方法を提供するビデオのID。 IDはユーザーごとにユニークです。つまり、2人の異なるユーザーが同じIDでエディターを開くと、2つの異なるビデオが作成または編集されます。
データ・ビデオ・フォーマット	ビデオフォーマット。サポートされている全フォーマットのリストは、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=%2F使用例%2F仮想背景&name=ビーチ` もしエディターがストック・ライブラリーから始めるなら、このテキストは銘柄を検索するのに使われる。
データ・パブリッシュ・ラベル	デフォルトの "Publish "よりも優先されます。
データ・パブリッシュ・ビデオID	ビデオを受信したビデオタグのID。ページにvideoタグがある場合、このタグのIDを指定すると、エディタは最終的な動画のURLをこのvideoタグの`src`属性に設定します。
データ・ナビゲーション・ターゲット	select-formats- フォーマットの選択画面でエディターを開きます。 uploads- アップロード画面でエディタを開きます。 edit- 編集画面でエディタを開きます。 templates- テンプレートページからエディタを起動します（デフォルト）。data-search-textを使用して、テンプレートページで検索パラメータを指定できます。
データ・パブリッシュ・コールバック	コールバックグローバル関数。この関数は、ユーザが動画を保存するときに呼び出される。この関数は、以下のパラメータを指定して呼び出される： callback_function(ボタン, 結果, エラー) どこでだ： button- ボタン要素 result- 動画のURLとサムネイルを含むjson。 error- エラーメッセージ（もしあれば）。以下は結果のJSONの例である： { 「name": "プロジェクト名"、「videoUrl": "mp4へのURL"、 "duration"：継続時間（秒）、 "width": 映像の幅、「height": ビデオの高さ、 "size"：ビデオのサイズ（バイト）、「fps」：フレーム/秒、「format」：「video-format-selected-by-user」、 "サムネイル"：[ { "time"：0, "url": "url to thumbnail at time 0" }、 { "time": 2.2, "url": "url to thumbnail at time 2.2" }、 ] } エディタから返されるビデオは3日で期限切れとなることに注意してください。それ以上使用する場合は、このURLからダウンロードしてください。

例

次の例では、コールバック関数onWavePublish を持つボタンを用意しています。この関数が呼び出されると、動画ファイルの URL とサムネイルの URL がコンソールに出力されます。

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

    data-publish-callback="onWavePublish">ビデオを作る</span>。

```
<スクリプト
```

関数onWavePublish(button, result, 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；
```
```
        width = result.width；
```
```
        高さ = 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>
```

Wave.videoボタン

1.ボタンを作成し、ページに追加する。

ボタンの設定

2.仕組み

3.ボタンをカスタマイズする

例