المشغّل

يعرض @videohati/player فيديو فيديوهاتي المحميّ في أي صفحة ويب. لا تبعية له على إطار عمل، وواجهته عربية أولًا من اليمين إلى اليسار، وتدفّق تشغيله مربوط بجلسة مع نبضة قلب وعلامة مائية على الفيديو. وهو رادع لا نظام حماية رقمية (DRM). الإصدار ‏1.0.0.

يحتاج كل تضمين إلى sessionToken من POST /v1/playback/sessions في الخادم — أنشئه بـ @videohati/node أو videohati/laravel. ويجب ألّا يصل مفتاح API إلى المتصفح أبدًا.

التضمين بوسم سكربت

أضف سكربت المشغّل وعنصر div يحمل الفيديو والمشروع ورمز الجلسة. يُركَّب المشغّل تلقائيًا على كل عنصر [data-videohati-video-id]، ويُفكّك نفسه عند إخفاء الصفحة.

<script src="https://cdn.videohati.com/player.js" async></script>
<div
  data-videohati-video-id="01JZ9WV3N8GQ5T2M7K4C6XBARH"
  data-videohati-project-id="01JZ9WV3N8GQ5T2M7K4C6XBARF"
  data-videohati-session-token="<sessionToken>"
  data-videohati-autoplay="muted"
  data-videohati-width="640"
  data-videohati-height="360"
  data-videohati-lang="ar"
  data-videohati-viewer-text="أحمد ك."
></div>

من دون رمز جلسة يرفض المشغّل التركيب ويعرض "Missing session token".

npm

ثبّت الحزمة وأنشئ مشغّلًا بنفسك حين تحتاج الكائن — مثلًا لاستدعاء play() أو الاشتراك في الأحداث.

npm install @videohati/player

import { Videohati } from "@videohati/player";

const player = Videohati.create({
  target: document.querySelector("#player")!,
  videoId: "01JZ9WV3N8GQ5T2M7K4C6XBARH",
  projectId: "01JZ9WV3N8GQ5T2M7K4C6XBARF",
  sessionToken,
  lang: "en",
});

player.on("state", (state) => console.log(state));
player.play();

تُعيد Videohati.create(options) كائن Player.

واجهة المشغّل

يكشف الكائن واجهة أوامر صغيرة.

استدعِ destroy() عند إزالة المشغّل من الصفحة — فهي تُنهي الجلسة وتوقف نبضة القلب. ويقوم التضمين بوسم السكربت بهذا نيابةً عنك عند إخفاء الصفحة.

الحالات

تُعيد getState() والحدث state إحدى القيم:

idle · loading · playing · paused · ended · stopped · error.

وstopped حالة نهائية يدخلها المشغّل عند إبطال الجلسة أو العبث بالعلامة المائية.

الأحداث

اشترك بـ player.on(name, listener).

يُطلَق الأخيران عند العبث بالعلامة المائية على الفيديو أو حجب محاولة التقاط — ويمكنك تسجيلهما.

اللغة والاتجاه

نصّ الواجهة عربيّ افتراضيًا. مرّر lang: "en" (أو data-videohati-lang="en") للإنجليزية. الشيء الوحيد الذي تغيّره اللغة هو النصوص: أمّا هيكل المشغّل نفسه فمن اليسار إلى اليمين دائمًا، كأيّ مشغّل شائع، فيُرتَّب تخطيطه بصورة صحيحة داخل صفحة من اليمين إلى اليسار.

وإن لم يمرّر التضمين lang، يتبع المشغّل إعداد لغة واجهة المشغّل الخاص بالمشروع (لوحة التحكم ← المشروع ← المشغّل)، بما في ذلك خيار «حسب لغة متصفح المشاهد».

تخصيص المشغّل

يتبع كلُّ تضمين ضمن المشروع إعداداتِ المشغّل الخاصة بالمشروع — دون تغيير كود التضمين. افتح لوحة التحكم ← المشروع ← المشغّل لضبط:

• لغة الواجهة والخط — العربية أو الإنجليزية أو لغة متصفح المشاهد؛ وخط من مجموعة مستضافة ذاتيًا (يُحمَّل من شبكة Videohati وليس من أي طرف ثالث).
• اللون الأساسي — شريط التقدم وزر التشغيل الكبير وتحديدات القوائم.
• الأزرار — إظهار أو إخفاء كل زر (تشغيل/إيقاف، ‏±10 ثوانٍ، شريط التقدم، الوقت، الصوت، الجودة، الإعدادات، ملء الشاشة). خيارا «صورة داخل صورة» وAirPlay متاحان كتفعيل اختياري ويبقيان مطفأين افتراضيًا: التشغيل المنبثق والبث إلى الشاشات يتجاوزان العلامة المائية وحمايات الالتقاط.
• سرعات التشغيل — عناصر قائمة السرعة بالضبط (من 0.1× إلى 16×، حتى 12 خيارًا، و1.00× مضمّنة دائمًا).
• خريطة المشاهدة الحرارية — منحنى كثافة مشاهدة عام فوق شريط التقدم، يظهر بعد 30 جلسة مشاهدة على الأقل للفيديو.
• استئناف موضع المشاهدة (مفعّل افتراضيًا)، والأزرار المدمجة، وCSS مخصّص محصور في ‎.vh-player.

تسري الإعدادات على جلسات التشغيل المنشأة بعد الحفظ؛ والتضمين الذي يمرّر lang صراحةً يحتفظ به.

سياسة أمان المحتوى

اسمح بأصلَي المشغّل. يغطّي connect-src حركة واجهة API والتشغيل؛ ويغطّي ‏media-src blob: الوسائط المتدفّقة؛ ولا يلزم script-src إلّا للتضمين بوسم السكربت.

connect-src https://api.videohati.com https://cdn.videohati.com;
media-src blob:;
script-src https://cdn.videohati.com;