文档 | 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 都是唯一的，也就是说，如果两个不同的用户使用相同的 ID 打开编辑器，那么将创建或编辑两个不同的视频。
数据视频格式	视频格式。所有支持格式的列表请访问https://api.wave.video/project/formats。示例：youtube_horizontal
数据搜索文本	搜索库或模板。如果编辑器是从模板页面启动的，那么该查询就是模板搜索参数。进入模板页面，配置搜索，然后从 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-video-id	接收视频的视频标记的 ID。如果页面上有视频标记，可以指定该标记的 ID，编辑器会将最终视频 URL 设置为该视频标记的`src`属性。
数据导航目标	选择格式 - 在选择格式屏幕上打开编辑器上传- 在上传屏幕上打开编辑器 edit- 在编辑界面打开编辑器模板- 从模板页面启动编辑器（默认）。data-search-text可用于在模板页面指定搜索参数
数据发布回调	回调全局函数。用户保存视频时会调用该函数。调用该函数时需要输入以下参数： callback_function( 按钮、结果、错误 ) 在哪里？ button- 按钮元素 result- 包含视频 URL 和缩略图的 json error- 错误信息（如有下面是结果 JSON 的示例： { "名称"："项目名称"、 "videoUrl"："mp4 的网址"、 "持续时间"：持续时间（秒）、 "宽度"：视频宽度、 "height"：视频高度、 "size"：以字节为单位的视频大小、 "fps"：每秒帧数、 "格式"："用户选择的视频格式"、 "缩略图"：[ { "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>。

```
<script>
```

function onWavePublish(button, result, error) {

```
如果 (错误) {
```
```
    alert("Error: "+error)；
```
```
否则 {
```
```
    if (result.videoUrl) {
```

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

```
        让 src = result.videoUrl；
```
```
        让 name = result.name；
```

        让 duration = result.duration；

```
        让 size = result.size；
```
```
        让 width = result.width；
```
```
        让 height = result.height；
```
```
        让 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)；

```
        }
```
```
    否则 {
```

              // 波形已关闭，但未发布，忽略

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