Wave.video

1. Create your button and add it to your page

Set up your button and place the button code where you need it to appear on your page.
Make sure you replace YOUR_API_KEY with your actual API key.

Set up your button

Your API key
16:9 Horizontal
Large
Default
  1. <script>
  2. (function (d,w,e,c,a) {
  3.     var cf = w[c] = w[c] || {}; cf.apiKey = a;
  4.     var sc=d.createElement(e),s=d.getElementsByTagName(e)[0];
  5.     sc.async=!0;
  6.     sc.src=cf.embed || 'https://wave.video/editor/embed.js';
  7.     s.parentNode.insertBefore(sc, s);
  8. })(document, window, 'script', 'waveconfig', '');
  9. </script>
  10. <span class="wave-video-button large default"
  11. data-video-format="youtube_horizontal">Make video</span>
Your button previewMake video

2. How it works

Clicking on the button will launch Wave.video editor inside the iframe on your page. Your users will have to either log into Wave.video or sign up if they don't have an account yet, all of that inside the iframe. After your users create a video, they publish it back to your website.

There are several ways to get the video from the editor. The simplest is to specify video tag ID where the video will be placed. Another option is to provide a callback function to receive the URL and thumbnails of the video.

3. Customize your button

You can customize the button using your own style or you can use our provided styles. You can have several buttons on the page, but they all should have class wave-video-button.

Each button can be further customized with data- attributes:

data-video-id

The ID of the video that provides a way to edit previously created video.

The ID is unique per user, i.e. if two different users will open the editor with the same ID thentwo different videos will be created or edited.

data-video-format

The video format.
The list of all supported formats is available at https://api.wave.video/project/formats

Example: youtube_horizontal

data-search-text

The search query for the stock library.

The project starts from the stock library page and the search runs using this string.

data-publish-label

The text label on the publish button, overriding the default “Publish”.

data-publish-video-id

The ID of the video tag that receives the video.

If you have a video tag on your page, you can specify the ID of this tag and the editor will set the final video URL to the src attribute of this video tag.

data-navigation-target

select-formats — opens editor on select formats screen
uploads — opens editor on upload screen
edit — opens editor in edit screen (default)

data-publish-callback

A callback global function.

This function is called when the user saves the video. The function is called with the following parameters:

  1. callback_function(button, result, error)

Where:

button — button element
result — json with video URL and thumbnails
error — error message, if any

Here’s an example of resulting JSON:

  1. {
  2.   "name": "name of the project",
  3.   "videoUrl": "url to the mp4",
  4.   "duration": duration-in-seconds,
  5.   "width": width-of-the-video,
  6.   "height": height-of-the-video,
  7.   "size": size-of-the-video-in-bytes,
  8.   "fps": frames-per-second,
  9.   "format": "video-format-selected-by-user",
  10.   "thumbnails": [
  11.       { "time": 0, "url": "url to thumbnail at time 0" },
  12.       { "time": 2.2, "url": "url to thumbnail at time 2.2" },
  13.   ]
  14. }

Note that the video which is returned from the editor will expire in 3 days. If it is to be used longer, then it should be downloaded from this URL.

Example

In the following example we have a button with a callback function onWavePublish. When this function is called, the code will print to the console the URL of the video file and the URLs of the thumbnails.

  1. <span id="my-button"
  2.       class="wave-video-button"
  3.       data-video-id="mypost1"
  4.       data-publish-callback="onWavePublish">Make video</span>
  5. <script>
  6. function onWavePublish(button, result, error) {
  7.   if (error) {
  8.       alert("Error: "+error);
  9.   } else {
  10.       if (result.videoUrl) {
  11.           console.log("got video: ", result);
  12.           let src = result.videoUrl;
  13.           let name = result.name;
  14.           let duration = result.duration;
  15.           let size = result.size;
  16.           let width = result.width;
  17.           let height = result.height;
  18.           let fps = result.fps;
  19.           let format = result.format;
  20.           let k = 0;
  21.           for (;k<result.thumbnails.length; k++) {
  22.               let url = result.thumbnails[k].url;
  23.               let time = result.thumbnails[k].time;
  24.               console.log("thumbnail at "+time+" is "+url);
  25.           }
  26.       } else {
  27.                 // wave was closed without publish, ignore
  28.             }
  29.         }
  30.     }
  31.     (function (d,w,e,c,a) {
  32.         let cf = w[c] = w[c] || {}; cf.apiKey = a;
  33.         var sc=d.createElement(e),s=d.getElementsByTagName(e)[0];sc.async=!0;
  34.         sc.src=cf.embed || 'https://wave.video/editor/embed.js';s.parentNode.insertBefore(sc, s);
  35.     })(document, window, 'script', 'waveconfig', 'YOUR API KEY');
  36. </script>