Tombol Wave.video
1. Buat tombol Anda dan tambahkan ke halaman Anda
Siapkan tombol Anda dan letakkan kode tombol di tempat yang Anda perlukan untuk ditampilkan di halaman Anda.
Pastikan Anda mengganti YOUR_API_KEY
dengan kunci API yang sebenarnya.
<script>
(fungsi (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="tombol gelombang-video default besar"
data-video-format="youtube_horizontal">Buat video</span>
2. Bagaimana cara kerjanya
Mengklik tombol tersebut akan meluncurkan editor Wave.video di dalam iframe di halaman Anda. Pengguna Anda harus masuk ke Wave.video atau mendaftar jika mereka belum memiliki akun, semua itu ada di dalam iframe. Setelah pengguna Anda membuat video, mereka mempublikasikannya kembali ke situs web Anda.
Ada beberapa cara untuk mendapatkan video dari editor. Yang paling sederhana adalah menentukan ID tag video
di mana video akan ditempatkan. Pilihan lainnya adalah dengan menyediakan fungsi callback untuk menerima URL dan thumbnail video.
3. Menyesuaikan tombol Anda
Anda dapat menyesuaikan tombol menggunakan gaya Anda sendiri atau menggunakan gaya yang kami sediakan. Anda dapat memiliki beberapa tombol di halaman, tetapi semuanya harus memiliki kelas wave-video-button
.
Setiap tombol dapat disesuaikan lebih lanjut dengan atribut data
:
data-video-id | ID video yang menyediakan cara untuk mengedit video yang dibuat sebelumnya. ID ini unik untuk setiap pengguna, yaitu jika dua pengguna yang berbeda membuka editor dengan ID yang sama, maka dua video yang berbeda akan dibuat atau diedit. |
format data-video | Format video. Contoh: youtube_horizontal |
teks-pencarian-data | Permintaan pencarian baik untuk pustaka stok atau templat. Jika editor dimulai dari halaman template maka kueri ini adalah parameter pencarian template. Buka halaman templat, konfigurasikan pencarian dan kemudian salin semua parameter dari url. Sebagai contoh, jika url-nya adalah:
maka data-cari-teks harus diatur ke
Jika editor dimulai dari pustaka saham maka teks ini digunakan untuk mencari saham. |
data-publikasi-label | Label teks pada tombol terbitkan, menggantikan "Terbitkan" default. |
data-publikasikan-video-id | ID tag video yang menerima video. Jika Anda memiliki tag video di halaman Anda, Anda dapat menentukan ID tag ini dan editor akan menetapkan URL video akhir ke atribut |
target-navigasi-data | pilih-format - membuka editor pada layar pilih format |
data-publikasi-panggilan-kembali | Fungsi global panggilan balik. Fungsi ini dipanggil ketika pengguna menyimpan video. Fungsi ini dipanggil dengan parameter berikut ini:
Dimana: tombol - elemen tombol Berikut adalah contoh JSON yang dihasilkan:
Harap diperhatikan bahwa video yang dikembalikan dari editor akan kedaluwarsa dalam 3 hari. Jika ingin digunakan lebih lama, maka video tersebut harus diunduh dari URL ini. |
Contoh
Pada contoh berikut, kita memiliki tombol dengan fungsi pemanggilan kembali onWavePublish
.
Ketika fungsi ini dipanggil, kode akan mencetak ke konsol URL file video dan URL gambar mini.
<span id="tombol-saya"
class="tombol gelombang-video"
data-video-id = "mypost1"
data-publish-callback = "onWavePublish">Membuat video</span>
<script>
function onWavePublish(tombol, hasil, kesalahan) {
if (error) {
peringatan("Kesalahan: "+kesalahan);
} else {
if (result.videoUrl) {
console.log("mendapat video: ", result);
let src = result.videoUrl;
let nama = result.name;
let durasi = result.duration;
let size = result.size;
let width = result.width;
let height = result.height;
let fps = result.fps;
let format = result.format;
biarkan k = 0;
for (;k<hasil.thumbnail.length; k++) {
let url = result.thumbnails[k].url;
let waktu = result.thumbnails[k].time;
console.log("thumbnail pada "+waktu+" adalah "+url);
}
} else {
// gelombang ditutup tanpa publikasi, abaikan
}
}
}
(fungsi (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', 'KUNCI API ANDA');
</script>