پلیر امن React و Next.js؛ ویدیوی رمزگذاری‌شده در App Router

در Next.js توکن را در کامپوننت سرور بگیرید و پلیر را مستقیم در صفحه رندر کنید؛ کلید API هرگز به مرورگر نمی‌رسد.

چرا XAPlayer برای React و Next.js

  • کامپوننت سرور

    توکن در Server Component یا Route Handler گرفته می‌شود و فقط نشانی پلیر به مرورگر می‌رسد.

  • server-only

    با ایمپورت server-only مطمئن می‌شوید کلید API هیچ‌وقت در باندل کلاینت قرار نمی‌گیرد.

  • هر اپ React

    در Vite یا Create React App هم کافی است بک‌اند شما توکن را بگیرد و React فقط iframe را نشان دهد.

  • نام کاربر روی ویدیو

    نام کاربر واردشده واترمارک ویدیو می‌شود.

سه قدم تا پخش امن

  1. کلید API و نشانی را در متغیرهای محیطی سرور بگذارید.
  2. در کامپوننت سرور صفحه‌ی درس، بعد از بررسی خرید توکن بگیرید.
  3. نشانی پلیر را در iframe رندر کنید.

آموزش‌ها و مستندات

نمونه‌ی کد

کد کامل، محل قرار دادن آن و آزمایشش در آموزش آمده است.

app/courses/[id]/watch/page.tsx
import 'server-only';

export default async function Watch({ params }) {
  const user = await requireBuyer((await params).id);
  const res = await fetch(`${process.env.XAPLAYER_URL}/embed-tokens`, {
    method: 'POST',
    headers: { Authorization: `Bearer ${process.env.XAPLAYER_API_KEY}`, 'Content-Type': 'application/json' },
    body: JSON.stringify({ courseId: COURSE_ID, viewer: { id: user.id, name: user.name } }),
    cache: 'no-store',
  });
  const { url } = await res.json();
  return <iframe src={url} allow="fullscreen" style={{ width: '100%', aspectRatio: '16/9', border: 0 }} />;
}

سؤالات متداول

بله. توکن را در getServerSideProps یا یک API Route بگیرید.

درخواست توکن را با cache: 'no-store' بفرستید تا هر کاربر توکن خودش را بگیرد.

بله؛ تا وقتی کلید API در متغیرهای محیطی سرور باشد.

بک‌اند شما (Node.js، لاراول یا پایتون) توکن را می‌گیرد و اپ React فقط نشانی را در iframe نمایش می‌دهد.

پلتفرم‌های دیگر

دوره‌تان را همین امروز امن کنید

ثبت‌نام کمتر از دو دقیقه طول می‌کشد. ۱۴ روز رایگان، با ۱۰ لایسنس هدیه.

شروع رایگان ۱۴ روزه