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

Wave.ビデオボタン

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

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

```
<script>
```
```
(function (d,w,e,c,a) {)
```
```
    var cf = 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にログインするか、アカウントを持っていない場合はサインアップする必要がありますが、そのすべてがiframeの中で行われます。ユーザーはビデオを作成した後、あなたのウェブサイトにビデオを公開します。

エディターから動画を取得するには、いくつかの方法があります。最も簡単なのは、動画が配置されるビデオタグIDを指定する方法です。また、動画の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=beach` エディターがストックライブラリーから起動する場合、このテキストは銘柄の検索に使用されます。
データパブリッシュラベル	発行ボタンのテキストラベルで、デフォルトの「発行」を上書きします。
データパブリッシュビデオアイディー	ビデオを受信するビデオタグのID。ページにvideoタグがある場合、このタグのIDを指定すると、エディターは最終的な動画のURLをこのvideoタグの`src`属性に設定します。
データナビゲーションターゲット	select-formats- select formats 画面でエディタを開く。 uploads- アップロード画面でエディタを開く edit- 編集画面でエディタを開く templates- テンプレートページからエディタを起動します（デフォルト）。data-search-textは、テンプレートページで検索パラメータを指定するために使用します。
データパブリッシュコールバック	コールバックのグローバル関数です。この関数は、ユーザが動画を保存する際に呼び出される。この関数は、以下のパラメータを指定して呼び出される。 callback_function(ボタン、結果、エラー) どこの国か。 button- ボタン要素 result- 動画のURLとサムネイルを含むjson。 error- エラーメッセージ（もしあれば）．以下は、結果のJSONの例です。 { "name"："プロジェクトの名前"。 "videoUrl": "mp4へのurl"。 "duration": 継続時間-秒。 "width": 映像の幅。 "height": 映像の高さ。 "size"：映像のサイズ-in-byte。 "fps"：フレーム・パー・セカンド。 "format": "video-format-selected-by-user", "サムネイル "です。[ { "time":0, "url": "時刻 0 のサムネイルへの url" }, { "time": 2.2, "url": "時刻2.2におけるサムネイルへのurl" }, ] } なお、エディターから返された動画は、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) {。

```
if (error) {
```
```
    alert("Error: "+error);
```
```
} 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;
```

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

Wave.ビデオボタン

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

ボタンを設定する

2.動作の仕組み

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

例