ویدیوکلیک مرکز توسعه‌دهندگان • راهنمای اتصال
پخش و نمایش

جای‌گذاری پلیر در وب‌سایت

وقتی ویدیو آماده شد، از صفحهٔ همان ویدیو کد Embed را دریافت کنید. برای پخش زنده هم کد رویداد مربوط را از پنل کپی کنید.

بررسی آماده‌بودن ویدیو

GET https://videoclick.ir/api/v2/videos/{videoId}
Authorization: Bearer vct_YOUR_ACCESS_TOKEN

پس از دریافت state: "ready"، کد Embed صادرشده از پنل را استفاده کنید. videoId شناسهٔ پردازش است؛ آن را به‌جای لینک Embed در iframe قرار ندهید.

قرار دادن کد صادرشده

آدرس دقیق Embed و تنظیمات دسترسی ممکن است برای هر آیتم متفاوت باشد. کد داخل پنل را بدون تغییر شناسه یا پارامتر امنیتی آن کپی کنید و برای واکنش‌گرایی، قاب را در ظرفی با نسبت تصویر مناسب قرار دهید.

<div style="aspect-ratio:16/9;width:100%">
  <iframe src="EMBED_URL_FROM_PANEL" title="پخش ویدیو"
          style="width:100%;height:100%;border:0"
          allow="autoplay;fullscreen;picture-in-picture"
          allowfullscreen loading="lazy"></iframe>
</div>
کلید محرمانه را به مرورگر نفرستید

فقط لینک پخشِ صادرشده را در صفحه قرار دهید. توکن vct_ برای درخواست‌های API از سرور شماست و نباید به HTML یا JavaScript مخاطب برسد.

رویدادها و کنترل پلیرِ کد Embed

در نسخهٔ قدیمی، کد Embed مبتنی بر اسکریپت به شیء window.Vid دسترسی می‌داد. پس از بارگیری همان اسکریپت، با شناسهٔ ویدیو، رویدادهای پخش، مکث، تغییر زمان و پایان را ثبت کنید. این نمونه برای iframe بین دو دامنه قابل استفاده نیست و باید با همان نسخهٔ اسکریپت پلیر سایت آزموده شود.

<script id="YOUR_VIDEO_UID"
  src="EMBED_SCRIPT_URL_FROM_PANEL"></script>
<script>
document.addEventListener("readystatechange", function (event) {
  if (event.target.readyState !== "complete" ||
      !window.Vid || !window.Vid.libraryMedias) return;
  var media = window.Vid.libraryMedias.getByHash("YOUR_VIDEO_UID");
  if (!media || !media.api) return;
  media.api.events.OnPlay(function () { console.log("play"); });
  media.api.events.OnPause(function () { console.log("pause"); });
  media.api.events.OnTimeupdate(function () {
    console.log(media.api.get.CurrentTime());
  });
  media.api.events.OnEnded(function () { console.log("ended"); });
  // Actionها: Play(), Pause(), Forward(5), Rewind(10), Seek(30)
  // Getterها: ID, Title, Duration, CurrentTime()
});
</script>

برای آمار سمت سرور، رویدادها را در برنامهٔ خودتان ثبت کنید. فراخوانی خودکار Play() ممکن است با سیاست پخش خودکار مرورگر محدود شود.

مرکز توسعه‌دهندگان ویدیوکلیکمرجع اتصال و مدیریت رسانه · API نسخهٔ ۲